InBe Docs

Webflow

A complete guide to integrate the InBe widget within your Webflow website.

This guide will help you add the InBe widget to your Webflow website using custom code.

Add the widget container

  1. In your Webflow Designer, add a Div Block element to your page where you want the widget to appear
  2. Give the div an ID of inbe-widget:
    • Select the div block
    • In the Element Settings panel, go to Settings
    • Add inbe-widget as the ID

Add the widget scripts

  1. In your Webflow Designer, go to Project Settings (gear icon in the left panel)
  2. Click on Custom Code
  3. In the Head Code section, add the first script tag:
Add the widget library
<script src="https://api.inbe.us/v1/widget/simple-widget.js?apiKey=YOUR_PUBLIC_API_KEY"></script>

Widget Builder Note

If you are using the Widget Builder, and pasting the generated code into your site, only paste the first script tag.

  1. In the Footer Code section, add the initialization script:
Add the widget initialization
<script>
  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>

Widget Builder Note

If you are using the Widget Builder, and pasting the generated code into your site, only paste the second script tag.

  1. Click Save

Publish your site

  1. Click Publish in Webflow
  2. Visit your published site to see the widget

Important Notes

Make sure to replace YOUR_PUBLIC_API_KEY with your actual API key. The widget will appear in the div block with ID inbe-widget. You can style the div block to control the widget's size and position

Troubleshooting

If the widget doesn't appear: 1. Ensure the div block has the correct ID (inbe-widget), 2. Check that your API key is correct, 3. Try refreshing the page, 4. Make sure both script tags are in the correct sections (Head Code and Footer Code).

On this page