Framer

Add the widget container

In your Framer project, add an HTML Embed component to your page

1. Click the insert button at the top left (a '+' icon)
2. Navigate to the Utility option, at the bottom of the list
3. Click the Embed option
4. Note: If you are getting 'Failed to insert' error, ensure that you do not have an adblocker, or privacy extension enabled.

Add the widget scripts

Now lets add the widget to the HTML embed.

1. In the right side panel, scroll down to the Embed section
2. Make sure the Type is set to HTML
3. In the HTML section, add the code you copied from the Widget Builder. Make sure to replace YOUR_PUBLIC_API_KEY with your actual API key.
4. If you want to customise the widget on the fly, you can start by adding this code, and then customising the widget to your needs.

<div id="inbe-widget"></div>
 
<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>

Review and publish your site

1. Review the widget size and position on the page in the preview mode.
2. Once you are happy, click Publish in Framer
3. Visit your published site to see the widget in action