Embedding Bookingbird in Webflow

Overview

The Bookingbird JavaScript SDK allows you to seamlessly integrate the Bookingbird booking experience into your Webflow website.
It can display a floating “Book now” button or embed booking components (like pages, services, or resources) directly within your layout.

Because of how Webflow handles scripts, the Bookingbird SDK must be added globally in your project’s Head Code - this ensures the SDK is loaded on every page.

Step 1: Add the Bookingbird SDK Globally

1. Open your Webflow project.

2. Go to Project Settings → Custom Code → Head Code.

3. Paste the following code snippet:

<!-- Bookingbird SDK Global Integration -->
<script>
  !(function () {
    if (!(window.Bookingbird = window.Bookingbird || []).invoked) {
      window.BookingbirdActions = [];
      var proxy = new Proxy({ invoked: !0 }, {
        get: function (target, name) {
          if (name === "invoked") return target.invoked;
          return function () {
            var args = Array.prototype.slice.call(arguments);
            window.BookingbirdActions.push({ e: name, a: args });
          };
        }
      });
      window.Bookingbird = proxy;
      var s = document.createElement("script");
      s.src = "https://cdn.bookingbird.io/latest/index.js";
      s.async = true;
      document.head.appendChild(s);
      window.Bookingbird.initialize({
        clientId: "your-client-id",
        options: { button: { visible: true, text: "Book now" } }
      });
    }
  })();
</script>

4. Click Save Changes and Publish your site.

After publishing, the Bookingbird SDK will automatically load on every page.
If the button.visible option is set to true, a floating “Book now” button will appear (by default in the bottom-right corner).

Step 2: Customizing the Integration

You can customize how Bookingbird appears globally by adjusting the options in the script.

Example:

window.Bookingbird.initialize({
  clientId: "your-client-id",
  options: {
    button: {
      visible: true,
      text: "Reserve now",
      position: "bottom-left",
      themeColor: "#FF3366"
    },
    widget: {
      width: 420,
      height: 600,
      borderRadius: 16
    }
  }
});

🔘 Step 3: Triggering the Widget Manually (Optional)

If you don’t want the floating button, you can hide it and trigger the booking widget from a custom Webflow button instead.

<script>
  window.Bookingbird.initialize({
    clientId: "your-client-id",
    options: { button: { visible: false } }
  });

  document.querySelector("#book-now-btn").onclick = () => window.Bookingbird.open();
</script>

Give your Webflow button the ID book-now-btn, and the widget will open when the button is clicked.

Step 4: Embedding Bookingbird Components

Once the SDK is added globally, you can also embed any Bookingbird component directly in your Webflow pages.

1. Add an Embed element to your Webflow page.

1. Paste one of the examples below:

Booking Page:

<bookingbird-page page-id="your-page-id" hide-navigation="true" hide-footer="true"></bookingbird-page>

Service:

<bookingbird-service service-id="your-service-id" width="100%" height="600px"></bookingbird-service>

Resource:

<bookingbird-resource resource-id="your-resource-id" height="600px"></bookingbird-resource>

3. Adjust the height of the Embed element in the Webflow Designer (e.g. 600px).

4. Publish your site to see the embedded booking view live.

Common Attributes

Attribute

Description

For auto-height, the embedded frame sends a resize message:

window.parent.postMessage({ type: 'bookingbird-resize', height: 800 }, '*');

🧰 Troubleshooting

• Double-check that your clientId is correct.

• Ensure that your published site uses https:// — Bookingbird requires a secure connection.

• If components don’t appear, verify that the global script is properly added in Project Settings → Custom Code → Head Code.

• You can open your browser console and type Bookingbird to confirm that the SDK is loaded.