> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://knowledge.clym.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Bubble.io plugin

# Clym CMP for Bubble.io

The Clym CMP plugin for Bubble.io allows you to quickly integrate Clym's consent and accessibility management solutions into your Bubble application without needing to manually add the installation embed code to your app's header. Once installed and configured, the plugin connects your Bubble application to your Clym account, and automatically injects the Clym widget scripts on page load via a workflow action, allowing you to easily deploy and manage Clym functionality throughout your Bubble environment.

Below, you can find details on:
* [The requirements to use the Clym CMP plugin](#2-requirements)
* [How to install the plugin on your Bubble.io website](#2-installation)
* [How to configure your Clym widget](#2-configuration)
* [How to apply Clym to multiple pages](#2-applying-to-multiple-pages)
* [How to verify the installation was successful](#2-verification)

---

## Requirements

* A Bubble.io account with an existing app
* A Clym account — log in at [auth.clym.io](https://auth.clym.io) or register at [register.clym.io](https://register.clym.io)

---

## Installation

1. In your Bubble app editor, open the **Plugins** tab in the left sidebar
2. Click **Add plugins**
3. Search for **Clym CMP**
4. Click **Install**

---

## Configuration

The Clym widget is activated via a workflow action on each page where you want it to appear.

### Step 1 — Add the workflow

1. Open the **Workflow** tab for your page
2. Click **+ Add a new event** → **General** → **Page is loaded**
3. Click **+ Add an action** → find the **Clym CMP** section → select **Initialize Clym CMP**

### Step 2 — Enter your Widget ID

1. In the action settings, find the **Widget ID** field
2. Enter your Clym Widget ID

Your Widget ID can be found in your Clym Control Center account at [auth.clym.io](https://auth.clym.io). After signing into your Clym account, your property ID will be available in your URL.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/e/3/8/ae38f50f15c00000/property-id_h14mb1.png)


### Step 3 — Deploy

Click **Deploy** to publish your changes. The Clym widget will now load on that page whenever a user visits it.

---

## Applying to multiple pages

Repeat the workflow setup on each page where you want the Clym widget to appear. For app-wide coverage, add the workflow to every page or use a reusable element that is present on all pages.

---

## Important note

Bubble's JavaScript environment runs after the page shell has been delivered to the browser. This means the Clym scripts are injected dynamically on page load rather than server-side. The widget initializes correctly for all user interactions on the page.

For true synchronous `<head>` injection, an alternative is to add the script tags manually via **Settings → SEO / Metatags → Script/meta tags in header**:

```html
<script src="https://config.clym-widget.net/v2/YOUR-WIDGET-ID.js"></script>
<script src="https://widget-next.clym-sdk.net/v2/stub.js" data-property="YOUR-WIDGET-ID"></script>
```

---

## Verification

Open your app in **Preview** mode, right-click the page and select **View Page Source**. Search for `clym-widget.net` — you should see the two script tags present in the page.

---

## Support

If you encounter any challenges, please reach out to support@clym.io.
