This guide will help you add the InBe widget to your Next.js website using the Script component.

Method 1: Using Next.js Script Component (Recommended)

Add the widget container

In your Next.js component, add a container element where you want the widget to appear:

Add the widget container

<div id="inbe-widget"></div>

Import the Script component from Next.js:

Import Script component

import Script from "next/script";

Add both scripts to your component:

Add scripts to your component

import Script from "next/script";

export default function MyPage() {
  return (
    <div>
      <div id="inbe-widget"></div>

      <Script
        src="https://api.inbe.v1/widget/simple-widget.js?apiKey=YOUR_PUBLIC_API_KEY"
        strategy="afterInteractive"
      />
      <Script id="inbe-widget-init" strategy="afterInteractive">
        {`
          new InBeWidget({
            container: document.getElementById('inbe-widget'),
            apiKey: "YOUR_PUBLIC_API_KEY",
            headline: "Let's find some unforgettable restaurants",
            secondary: "Add your preferences and needs, and we'll find the perfect places for you",
            smartHeadline: true,
            primaryColor: "#1A0C29",
            secondaryColor: "#FF164E",
            backgroundColor: "#FFFFFF",
            maxHeight: "stretch",
            minHeight: "150px",
            maxWidth: "stretch",
            minWidth: "300px",
            height: "100%",
            width: "100%",
            templateType: [
              "location",
              "search",
              "preferences"
            ]
          });
        `}
      </Script>
    </div>
  );
}

Method 2: Using useEffect Hook

Create a widget component

import { useEffect } from "react";

export default function InBeWidgetComponent() {
  useEffect(() => {
    // Load the widget script
    const script = document.createElement("script");
    script.src =
      "https://api.inbe.us/v1/widget/simple-widget.js?apiKey=YOUR_PUBLIC_API_KEY";
    script.async = true;

    script.onload = () => {
      // Initialize the widget once the script is loaded
      if (window.InBeWidget) {
        new InBeWidget({
          container: document.getElementById("inbe-widget"),
          apiKey: "YOUR_PUBLIC_API_KEY",
          headline: "Let's find some unforgettable restaurants",
          secondary:
            "Add your preferences and needs, and we'll find the perfect places for you",
          smartHeadline: true,
          primaryColor: "#1A0C29",
          secondaryColor: "#FF164E",
          backgroundColor: "#FFFFFF",
          maxHeight: "stretch",
          minHeight: "150px",
          maxWidth: "stretch",
          minWidth: "300px",
          height: "100%",
          width: "100%",
          templateType: ["location", "search", "preferences"],
        });
      }
    };

    document.head.appendChild(script);

    // Cleanup
    return () => {
      if (script.parentNode) {
        script.parentNode.removeChild(script);
      }
    };
  }, []);

  return <div id="inbe-widget"></div>;
}

Use the component in your page

import InBeWidgetComponent from "./InBeWidgetComponent";

export default function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <InBeWidgetComponent />
    </div>
  );
}

Method 3: Using _document.js

Add scripts to _document.js

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

export default function Document() {
  return (
    <Html>
      <Head>
        <script src="https://api.inbe.us/v1/widget/simple-widget.js?apiKey=YOUR_PUBLIC_API_KEY" />
      </Head>
      <body>
        <Main />
        <NextScript />
        <script
          dangerouslySetInnerHTML={{
            __html: `
              new InBeWidget({
                container: document.getElementById('inbe-widget'),
                apiKey: "YOUR_PUBLIC_API_KEY",
                headline: "Let's find some unforgettable restaurants",
                secondary: "Add your preferences and needs, and we'll find the perfect places for you",
                smartHeadline: true,
                primaryColor: "#1A0C29",
                secondaryColor: "#FF164E",
                backgroundColor: "#FFFFFF",
                maxHeight: "stretch",
                minHeight: "150px",
                maxWidth: "stretch",
                minWidth: "300px",
                height: "100%",
                width: "100%",
                templateType: [
                  "location",
                  "search",
                  "preferences"
                ]
              });
            `,
          }}
        />
      </body>
    </Html>
  );
}

Add the container to your page

export default function MyPage() {
  return (
    <div>
      <div id="inbe-widget"></div>
    </div>
  );
}

Important Notes

Make sure to replace YOUR_PUBLIC_API_KEY with your actual API key

Troubleshooting

If the widget doesn't appear: 1. Ensure the container element exists on the page 2. Check that your API key is correct 3. Try refreshing the page 4. Make sure both scripts are properly loaded 5. Check the browser console for any errors

Next.js

Method 1: Using Next.js Script Component (Recommended)

Add the widget container

Add the widget scripts

Method 2: Using useEffect Hook

Create a widget component

Use the component in your page

Method 3: Using _document.js

Add scripts to _document.js

Add the container to your page

On this page