InBe Docs

Understanding the Widget

Options you can set, what they do, and how to install the widget

Get the most out of the InBe widget

In this guide, we'll cover the options you can set to get the most out of the InBe widget. The widget can be easily customised, but we have a default set of options that are suitable for most scenarios. If you don't see an option you need, please contact us and we'll help you.

At some point you may want to grow beyond what the widget offers. If you do, or want to build your own solution, we have a comprehensive API. See the API documentation for more information.

Widget oprions

Use this reference to tailor the widget to your brand and flow.

NameExampleDescription
apiKey"pk_..."Your InBe public API key is required. You can get one from the dashboard.
containerdocument.getElementById("inbe-widget")The container id is required. This is where the widget will render.
headline"Let's find some unforgettable restaurants"Main heading text. Defaults to "Let's find some unforgettable restaurants".
secondary"Add your preferences and needs, and we'll find the perfect places for you"This text is below the headline. Defaults to descriptive text.
templateType["location","preferences","search"]Controls visible sections. Remove any sections you don't want to show. Defaults to ["location","search","preferences"].
locations[{ label: "London" }] or [{ lat: 51.5, lon: -0.12, label: "London" }]Starting location context. Defaults to [].
smartHeadlinefalseAutomatically adds location into the headline when available. Defaults to true.
primaryColor"#222222"Main brand color. Defaults to "#1A0C29".
secondaryColor"#00AEEF"Accent/action color. Defaults to "#FF164E".
backgroundColor"#F7F7F7"Widget background. Defaults to "#FFFFFF".
height"600px"Widget height. Defaults to "100%".
width"100%"Widget width. Defaults to "100%".
maxHeight"800px"Max height. Defaults to "stretch".
minHeight"400px"Min height. Defaults to "150px".
maxWidth"1200px"Max width. Defaults to "stretch".
minWidth"320px"Min width. Defaults to "300px".

Notes on locations

You can pass either a simple label (e.g., a city name) or coordinates via props or via the URL:

Location via props
locations: [
  { label: "London" },
  { lat: 51.5072, lon: -0.1276, label: "Central London" },
];

The widget can also pick up locations from the page URL using inbe- parameters (e.g., ?inbe-location=London), which helps personalise the headline.

Location via URL
https://yourwebsite.com/pageWithInBeWidget?inbe-location=London"

The ? is important. It enables the URL to be passed to the widget and the location to be extracted.

This is useful if you want to tell the widget to search for results in a specific location. For example, you could link to a page with ?inbe-location=Zurich and the widget will pre-fill the location in the headline.

Combining this with templateType (removing the location section) means that once your customer adds their preferences, the widget will automatically search for results in the location you specified.

Troubleshooting

  • Nothing appears: check that the container element exists before the script runs
  • “Invalid API key”: confirm you used your public key (pk_…) and copied it correctly
  • Looks off-brand: set primaryColor, secondaryColor, and backgroundColor
  • No results: try a broader locations label or a nearby area

Next

Widget Builder

Pick your colours and settings, then copy the generated code.

Integration Guides

Follow a step-by-step guide to integrate the widget into your site.

On this page