InBe Docs

Next.js

A complete guide to integrate the InBe widget for Next.js websites.

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

Add the widget container

  1. 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>

Add the widget scripts

  1. Import the Script component from Next.js:
Import Script component
import Script from "next/script";
  1. 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

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

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

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

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

On this page