---
title: "Customization, Components & Events"
description: "Learn how to customize the Bookingbird widget and use the built-in Web Components and event system."
url: https://help.bookingbird.io/en/articles/63-customization-components-and-events
collection: "Bookingbird JavaScript SDK"
updated: 2026-10-07
language: en
alternates: [de]
---

# Customization, Components & Events

Learn how to customize the Bookingbird widget and use the built-in Web Components and event system.

#### 🎨 Customizing the Widget

You can control both the floating button and the popup widget.

**Example:**

```javascript
Bookingbird.initialize({
  clientId: "your-client-id",
  options: {
    button: {
      visible: true,
      text: "Reserve now",
      themeColor: "#FF3366",
      textColor: "#ffffff",
      position: "bottom-left"
    },
    widget: {
      width: 500,
      height: 700,
      borderRadius: 20
    }
  }
});
```

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

#### 📦 Widget Control Methods

Method

Description

<table data-id="a4e5b913-8ada-4b38-b19c-8ae255b4c672" 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="84aefdc9-56a7-423a-bc8c-6613e4007d4d"><code>Bookingbird.open()</code></p></td><td colspan="1" rowspan="1"><p data-id="7a1003ab-a4a8-4daa-993f-00e2d99d8341">Opens the widget</p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="5444e5b1-7748-4da5-b11b-32c8f5dd6c9e"><code>Bookingbird.close()</code></p></td><td colspan="1" rowspan="1"><p data-id="aa3dd84b-6f3c-4121-ad89-ffc5f6b4e1fb">Closes the widget</p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="bbaec7b8-86e8-40ee-b7af-c235ddfbf2d0"><code>Bookingbird.toggle()</code></p></td><td colspan="1" rowspan="1"><p data-id="e7e1fec1-c818-4570-ac2d-b5621feb5dce">Toggles the widget</p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="8461a09d-62f7-471e-ad17-c8cbf65e86cd"><code>Bookingbird.isOpen()</code></p></td><td colspan="1" rowspan="1"><p data-id="9ee0a3bf-153f-4748-9443-91b8767efc8c">Returns boolean</p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="a7aa3e94-d460-46fb-8989-72303f66b36c"><code>Bookingbird.destroy()</code></p></td><td colspan="1" rowspan="1"><p data-id="6209c4de-b5a6-4bb6-b14b-f7968dac219a">Removes widget</p></td></tr><tr><td colspan="1" rowspan="1"><p data-id="89acb80d-9737-461c-b0ac-08b40362bf04">`Bookingbird.setWidgetButtonVisible(true</p></td><td colspan="1" rowspan="1"><p data-id="cd5a07e8-012a-4e1f-91bb-a3b58f61eda5">false)`</p></td></tr></tbody></table>

You can call these methods after initialization — e.g. from a custom button click:

```javascript
document.querySelector("#myButton").onclick = () => Bookingbird.open();
```

#### 🧩 Web Components

Bookingbird offers native web components for direct embedding into your site.

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

**Booking Page:**

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

**Service:**

```javascript
<bookingbird-service service-id="your-service-id" width="400px"></bookingbird-service>
```

**Resource:**

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

**Common attributes:**

-   `width` (default `100%`)
    
-   `height` (default `600px`)
    
-   `hide-navigation`
    
-   `hide-footer`
    

For automatic resizing, use:

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

#### 🔔 Events

Subscribe to SDK events for better control:

```javascript
Bookingbird.on("ready", () => console.log("Bookingbird ready"));
Bookingbird.on("open", () => console.log("Widget opened"));
Bookingbird.on("close", () => console.log("Widget closed"));
```

**Available Events:**  
`ready`, `open`, `close`, `launcher:click`, `config:loaded`, `config:error`,  
`config:updated`, `settings:updated`, `api:url:changed`, `destroy`

#### 🧠 Advanced Use Cases

-   Dynamically update your API base URL:
    
    ```javascript
    Bookingbird.setApiUrl("https://staging-api.bookingbird.io");
    ```
    
-   Open specific resources directly:
    
    ```javascript
    Bookingbird.openResource("resource-id");
    ```
    
-   Hide/show widget button dynamically:
    
    ```javascript
    Bookingbird.setWidgetButtonVisible(false);
    ```