InBe Docs

Shopify

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

This guide will help you add the InBe widget to your Shopify store using the Script Editor.

Add the widget container

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Actions → Edit code on your active theme
  3. Navigate to the template where you want to add the widget (e.g., index.liquid, product.liquid)
  4. Add the container element where you want the widget to appear:
Add the widget container
<div id="inbe-widget"></div>

Add the widget scripts

  1. In your Shopify admin, go to Settings → Checkout and accounts
  2. Scroll down to Order status page section
  3. In the Additional scripts field, add both script tags:
Add the widget scripts
<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>
  1. Click Save

Alternative: Using theme.liquid

If you prefer to add the scripts to your theme directly:

  1. In your theme editor, open theme.liquid
  2. Add the scripts just before the closing </body> tag:
Add the widget scripts to theme.liquid
<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>

Publish your changes

  1. Save your theme changes
  2. Visit your store to see the widget

Important Notes

Make sure to replace YOUR_PUBLIC_API_KEY with your actual API key. The widget will appear where you placed the container element - You can add the container to any template file (index.liquid, product.liquid, etc.)

Troubleshooting

If the widget doesn't appear: 1. Ensure the container element exists on the page, 2. Check that your API key is correct, 3. Try clearing your browser cache, 4. Make sure both script tags are properly added.

On this page