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

# How to add a ChatGPT AI support agent to Bubble

> How to add your custom ChatGPT trained AI support agent to your Bubble website.

You want to embed your custom trained AI support agent in your **Bubble** website page. Here's how to add an AI support agent to Bubble with SiteSpeakAI.

**Bubble** is a *no-code website builder*. That means you can create professional-looking websites, web apps, and even complex online tools *without writing any code*. Instead of coding, you use a visual drag-and-drop interface to build your site by connecting "elements" like text boxes, images, buttons, and databases. It's like building with LEGOs for the web.

**Website URL:** [Bubble](https://bubble.io/)

## Add your AI support agent to your **Bubble** website

### In SiteSpeakAI

Select your chatbot from the dropdown menu at the top, click on the **Install Agent** section in the sidebar, then click on the **Copy Code** button to copy your code snippet.

<img src="https://mintcdn.com/espressodev/uRHTfU4evieXXVDw/images/installing-your-chatbot/copy-code.png?fit=max&auto=format&n=uRHTfU4evieXXVDw&q=85&s=b2614ba1d9a160d4d501b1d1bca094a2" alt="Copy code snippet" width="3436" height="1916" data-path="images/installing-your-chatbot/copy-code.png" />

### In Bubble

1. Log into your Bubble account and select the page where you want to add your AI support agent to

![uploads/help-center/images/Ja7ZKe1XcEYXM86W4bCWfxCiIugFmz3CvIBHa238.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/Ja7ZKe1XcEYXM86W4bCWfxCiIugFmz3CvIBHa238.png)

2. Select the  **\</> HTML** element on the **UI Builder** menu tab under **Visual Elements** and drag the element to your page

![uploads/help-center/images/GgIHdhU3uVyeDbLIQaZQTib5ZD9tBKCerWQGtB6s.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/GgIHdhU3uVyeDbLIQaZQTib5ZD9tBKCerWQGtB6s.png)

3. Insert the **AI support agent** snippet under **HTML appearance**

![uploads/help-center/images/BTvrLjb9AcupE7hclA0eA2aWV7cfCBRlWGPyYDNx.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/BTvrLjb9AcupE7hclA0eA2aWV7cfCBRlWGPyYDNx.png)

4. Click on **Preview** to view your **AI support agent** on your page

![uploads/help-center/images/hyHbGlEStitiaIfC5Re9xLGBNf9PvSpiGX5XML3O.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/hyHbGlEStitiaIfC5Re9xLGBNf9PvSpiGX5XML3O.png)

5. Your AI support agent button will now be displayed on your **Bubble** website page

![uploads/help-center/images/fTx1xpiaStWNwx43F3GXSKIzyNUWwOXrQaQJn6kv.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/fTx1xpiaStWNwx43F3GXSKIzyNUWwOXrQaQJn6kv.png)

6. If you click on the button it will display the AI support agent dialogue

![uploads/help-center/images/3gY4NTDe2JKO1FUQw1qZEibZpJaAzaW4wcbblj09.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/3gY4NTDe2JKO1FUQw1qZEibZpJaAzaW4wcbblj09.png)

Your AI support agent has now been added to your **Bubble** website and your visitors/customers can start interacting with it!

***

<Card title="Ready to automate your customer service with AI?" icon="bot" href="https://sitespeak.ai/register?utm_source=docs&utm_medium=cta&utm_campaign=primary-cta" arrow="true" cta="Create Your AI Agent">
  Join over 1000+ businesses, websites and startups automating their customer service and other tasks with a custom trained AI agent.
</Card>
