> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatling.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Bubble

> Learn how to add Chatling to your Bubble website

1. Go to your dashboard.
2. Click `Deploy` button in the sidebar menu.

<img src="https://chatling-assets.b-cdn.net/deploy-ai-agent.jpg" width="500" alt="Open Deploy page" />

3. Click the `Manage` button under the `Website Widget` option.

<img src="https://chatling-assets.b-cdn.net/manage-website-widget-chatbot.jpg" width="600" alt="Manage website widget" />

4. Design the appearance of the widget by clicking the `Open widget designer` button.

<img src="https://chatling-assets.b-cdn.net/open-website-widget-designer.jpg" width="500" alt="Open website widget designer" />

5. Select the display mode for your chatbot, such as "Floating Chat", "Inline", or "Fullscreen".

<img src="https://chatling-assets.b-cdn.net/configure-website-widget-display-type.jpg" width="500" alt="Configure website widget display type" />

6. Copy the widget code.

<img src="https://chatling-assets.b-cdn.net/website-widget-code.jpg" width="500" alt="Copy widget code" />

7. Go to your Bubble account and open the app/website where you want to add the widget.

<img src="https://chatling-assets.b-cdn.net/ZhBX8hrFxhpPBV9M.jpg" alt="Bubble dashboard" width="600" />

8. On the side, click the gear icon to open Settings.

<img src="https://chatling-assets.b-cdn.net/ZhBYHRrFxhpPBV9P.jpg" alt="Open Bubble app settings" width="350" />

9. Go to `SEO / metatags`.

<img src="https://chatling-assets.b-cdn.net/ZhBX8xrFxhpPBV9N.jpg" alt="Bubble SEO / metatags" width="600" />

10. Under the `SEO settings` section, paste the widget code in the header or body textbox.

<img src="https://chatling-assets.b-cdn.net/ZhBX8BrFxhpPBV9K.jpg" alt="Add chatbot code to Bubble header or body" width="600" />

11. The settings will be saved automatically. Click the Preview icon to confirm that the widget has been added.

* Note that this method only works on paid plans. If you're on a free account, Bubble doesn't load the widget.

<img src="https://chatling-assets.b-cdn.net/ZhBX8RrFxhpPBV9L.jpg" alt="Bubble chatbot" width="600" />