InBe Docs

General Guide

A complete guide to integrate the InBe widget for website builders and CMSs, that dont have a specific guide.

This guide works for most websites, regardless of platform.

Most platforms have a specific guide for their platform. If you don't see your platform here, please contact us and we'll help you out.

For visual website builders, often there is an option to add script tags to your site. This is the easiest way to add the widget to your site.

For code based websites, you can add the InBe widget script tags like you would any other script tag.

If you have used our widget builder, you can simply copy and paste the generated code into your site.

Add the widget container

First, add a container element where you want the widget to appear on your page. Give it an ID of inbe-widget.

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

Add the widget scripts

Add both script tags to your website. You need both - the first loads the widget library, and the second initializes it:

Script tags
<script src="https://api.inbe.us/v1/widget/simple-widget.js?apiKey=YOUR_PUBLIC_API_KEY"></script>
<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>

Make sure to replace YOUR_PUBLIC_API_KEY with your actual API key.

  1. Find the setting on your website builder to add script tags or custom code. As this is common, it is likely to be similar to adding a section or intergration. Sometimes is called Custom Code, Custom HTML, Embed, or Script.
  2. Add the container element to your page where you want the widget to appear. Give it an ID of inbe-widget. For many website builders, you can add the div, and script tags in one custom code element.
  3. Id adding the div and script tag in one custom code element does not work, try adding the div and script tags separately.

Troubleshooting

If the widget doesn’t appear, ensure the container element exists on the page and that your public API key is correct. If your site uses aggressive caching or a CDN, purge cache after updates.

On this page