NextJS Example

This page shows an example of how easily EmbedUI SDK can be hooked in NextJS App.

To embed Qwestive EmbedUI SDK script in a Next.js application, you can add it to the <head> section of your custom _document.js file. Here's how to do it:

// _document.tsx

import Document, { Head, Html, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  public render(): JSX.Element {
    return (
      <Html>
        <Head>
          <script
            type="text/javascript"
            src="https://qwestive-referral-prod.web.app/qwestiveEmbedUICallback.js"
          />
          <script
            id="embedUI"
            async
            defer
            type="text/javascript"
            project-key="YOUR_PROJECT_KEY"
            campaign-id="DEFAULT_CAMPAIGN_ID"
            src="https://qwestive-referral-prod.web.app/embed_ui_sdk.js"
          />
        </Head>
        <body>
          <div id="modal-root" />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

For setting up React context provider for the SDK, refer React Example here.

For instructions to find project-key and campaign-id, please refer here

PreviousReact ExampleNextAdmin API

Last updated