React / Next.js

Name: Inclusify
Rating: 5 (100 reviews)

Add Inclusify to your React or Next.js application using the Script component or head injection.

Next.js (App Router)

Use the Next.js Script component in your root layout:

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
                <Script
                    src="https://app.inclusifyapp.com/w/YOUR-DOMAIN.com.js"
                    strategy="afterInteractive"
                />
            </body>
        </html>
    )
}

Next.js (Pages Router)

Add to your custom _app.js:

pages/_app.js

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
    return (
        <>
            <Component {...pageProps} />
            <Script
                src="https://app.inclusifyapp.com/w/YOUR-DOMAIN.com.js"
                strategy="afterInteractive"
            />
        </>
    )
}

React (Vite, CRA)

Add the script to your index.html:

index.html

<script src="https://app.inclusifyapp.com/w/YOUR-DOMAIN.com.js" async></script>

Add before the closing </body> tag.

Notes

• Works with all React frameworks (Next.js, Remix, Gatsby, Vite, CRA)
• SSR compatible
• No React component needed — the widget initializes automatically