InBe Docs

WordPress

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

This guide will help you add the InBe widget to your WordPress website using custom code.

Add the widget container and scripts

  1. In your WordPress editor, add a Custom HTML block to your page or post
  2. Add both the container and scripts in the HTML block:
Add the widget container and scripts
<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>
  1. Update or publish your page

Method 2: Using theme files

Add the widget container

  1. In your WordPress admin, go to Appearance → Theme Editor
  2. Select the template file where you want to add the widget (e.g., index.php, page.php)
  3. 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 theme editor, open functions.php
  2. Add this code to enqueue the scripts:
Add the widget scripts
function add_inbe_widget_scripts() {
    wp_enqueue_script('inbe-widget', 'https://api.inbe.us/v1/widget/simple-widget.js?apiKey=YOUR_PUBLIC_API_KEY', array(), '1.0', true);
    wp_add_inline_script('inbe-widget', '
        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"
            ]
        });
    ');
}
add_action('wp_enqueue_scripts', 'add_inbe_widget_scripts');
  1. Click Update File

Method 3: Using a Plugin

If you prefer using a plugin:

  1. Install a plugin like Insert Headers and Footers or Code Snippets
  2. Add the first script to the Header section
  3. Add the initialization script (2nd script tag) to the Footer section
  4. Add the container element to your page content with id inbe-widget. If you have changed the id, use the id you have chosen.

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. Method 1 (Custom HTML Block) is the easiest for most users.

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, 5. If using a caching plugin, clear the cache

On this page