---
title: "Embedding Bookingbird in Webflow"
description: "Learn how to globally add the Bookingbird SDK in Webflow and use it to display the booking button or embed components like pages and services directly into your site."
url: https://help.bookingbird.io/en/articles/64-embedding-bookingbird-in-webflow
collection: "Bookingbird JavaScript SDK"
updated: 2026-03-06
language: en
alternates: [de]
---

# Embedding Bookingbird in Webflow

Learn how to globally add the Bookingbird SDK in Webflow and use it to display the booking button or embed components like pages and services directly into your site.

#### 💡 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:
    

```javascript
<!-- 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).

![](https://staticfiles.gleap.io/gattachments/c3gqOShXiI6nrhPFKs3c92v24pLtBX88LgoNwsqcu447etHBWK72oG7O9HC07KN9eZa6baha2YA.png)

## ⚙ Step 2: Customizing the Integration

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

Example:

```javascript
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.

```javascript
<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.
    

![](https://staticfiles.gleap.io/gattachments/Xf6vpNahzRqNTNraf2JcCSERnBIc493zF54XOFPGxDdgOqSL1TzSosxCKUyYyYenuX2f1pZLbr1.png)

1.  Paste one of the examples below:
    

**Booking Page:**

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

**Service:**

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

**Resource:**

```javascript
<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.
    

![](https://staticfiles.gleap.io/gattachments/t0QHPtTleAdjGUw3CrBP2FYoFlRM6kQa5NXBOhZkBkR0E4YSh4l6rItJ2Wy8LqtKeC5SCGBEzfe.png)

### ⚙ Common Attributes

Attribute

Description

<table data-id="848adb12-f25f-4b17-8e11-94ca632b91cc" style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p data-id="88624d1e-2855-4116-aa96-1aa56c1a39ad"><code>hide-navigation</code></p></td><td colspan="1" rowspan="1"><p data-id="a1e3be78-1a9b-4bd3-bbab-d59283545361">Hides the navigation bar</p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="32c393a3-bfb5-4c70-8af4-331d9538f46b"><code>hide-footer</code></p></td><td colspan="1" rowspan="1"><p data-id="ead5e8ce-ce59-4501-992f-45ec5c8637ad">Hides the footer section</p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="058b5efa-c2e0-40ec-adbd-6c1c48e1fdd2"><code>width</code> / <code>height</code></p></td><td colspan="1" rowspan="1"><p data-id="3e14c8e8-8b6e-4c93-914f-cbb98d10c4fa">Sets the component size (default: 100% / 600px)</p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="b2a18f33-2311-4837-99d0-29466fc03c41"><code>height="auto"</code></p></td><td colspan="1" rowspan="1"><p data-id="56707022-e12b-4108-81db-377a9419946c">Automatically resizes the frame based on content</p></td></tr></tbody></table>

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

```javascript
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.