• Step 1 - Log into the Admin Dashboard.

    Screenshot 2024-01-10 at 5.29.48 PM.png

  • Step 2 - Navigate to the Settings → Widget section and copy the widgetId

    Screenshot 2024-01-25 at 1.14.42 PM.png

  • Step 3. Create a widget-config file

    1. Create a file “bakstage-widget.js” under the below directory structure /public/libs/bakstage-widget.js
    2. Add the below code inside that file
    function initBakstageWidget() {
    if (window) {
      window.bakstageAppId = '<widgetId>';
      window.bakstageSettings = { widgetId: '<widgetId>' };
    }
}
  
initBakstageWidget();

  • Step 4: Update the “_document.tsx” file under the directory “/src/pages/_document.tsx” and add the below code. Please modify as needed if you already have scripts in the file.

    Note: For further details on the ‘Custom Document’ refer the official NextJS documentation here.

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

export default class CustomDocument extends Document {
  ...

  render() {
    return (
      <Html lang="en" prefix="og: <https://ogp.me/ns#>">
        <Head>
          <script
            type="text/javascript"
           src="/libs/bakstage-widget.js"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

    🎉  You have successfully added the Bakstage AI Sales Assist Widget to your NextJS website!

    Note: If you face any issues or need help - please contact us at [email protected]