Qwestive web3 referral
  • OVERVIEW
    • 👋Introduction
  • Setup referral campaign
    • 💻Quick Start
    • Developers: Getting started
    • Implement Tracking
      • Client side Tracking
        • React example
        • Adding welcome popup card
      • Server side Tracking
    • Implement Embedded UI
      • React Example
      • NextJS Example
    • Admin API
  • 💼Use Case
  • 🚀Launch preparation
  • 🤖Bot and Fraud Detection
Powered by GitBook
On this page
  1. Setup referral campaign
  2. Implement Embedded UI

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>
    );
  }
}
PreviousReact ExampleNextAdmin API

Last updated 2 years ago

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

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

here
here