Widget Builder
Build the widget for your needs, then, simply copy and paste the provided code. No technical experience required.
There is a glossary of terms you can use below.
Widget builder
The interactive InBe widget playground will live here once the widget preview modules are restored in this codebase.
| Name | Example | Description |
|---|---|---|
| apiKey | "pk_..." | Your InBe public API key is required. You can get one from the dashboard. |
| container | document.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 []. |
| smartHeadline | false | Automatically 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". |