Install the widget

Add the Bubblo chat widget to your site with one script tag

The Bubblo widget is installed with one script tag. The dashboard keeps this install code and the widget appearance settings together so you can copy the code, customize the visitor experience, and preview it from the same page.

Copy the install code and CID

Select the organization that owns the website.
Open Integrations → Widget.
Copy the generated install code. Its cid already contains the current Widget channel ID.

The same CID is also shown separately below the code for tools that ask for a channel ID. Each organization currently has one Widget channel, and the same channel can be installed on multiple pages of that organization’s website.

The CID is a public identifier embedded in your page source. It is not an API credential and must not be used to authorize server-side requests.

Add the script

Paste the following snippet immediately before your site’s closing </body> tag, then replace YOUR_CHANNEL_ID with the Widget CID you copied:

<script src="https://cdn.bubblo.ai/widget.js" cid="YOUR_CHANNEL_ID"></script>

Add the script once to the shared layout used by every page. The widget creates its own page element and does not require a separate container.

Choose the right installation location

Plain HTML or server templates: place the script immediately before the shared closing </body> tag.
WordPress, Shopify, Wix, and other site builders: use the global custom-code or footer-code area so the platform adds it once to every page.
React, Vue, or another Vite application: add it to the root index.html, immediately before </body>.
A framework with a root layout: add the script through that framework’s shared layout or script component, and ensure it is emitted only once per page.

Do not create a second widget container or load the script from every component. Duplicate script tags are unnecessary and make installation problems harder to diagnose.

Verify the installation

Publish or reload the site. A chat bubble should appear in the configured bottom corner. You can also open it from the browser console:

window.Bubblo.open()

The Online indicator in the panel means the browser’s live chat stream is connected. It does not indicate that a human teammate is currently available.

The same Integrations → Widget page contains the appearance form. Its live preview updates while you edit; select Save changes at the bottom of the form to publish the new appearance.

If the bubble does not appear, work through Troubleshooting. Next, learn how to customize the widget or control it with the JavaScript API.