> ## 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 chatbot to WebWave

> How to add your custom ChatGPT trained chatbot to your WebWave website.

You want to embed your custom trained chatbot in your WebWave website page. Here's how to add ChatGPT to WebWave with SiteSpeakAI.

## Add your chatbot to your WebWave 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 WebWave

1. Login to WebWave and on your dashboard select **Edit Website** for the website you want to add your snippet to

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

2. You can place your chatbot button on a specific page or on each page in your website

a. Specific page

* On the website editor page, select the page and drag the **Custom HTML** element onto the header of your page

![2a - Select a specific page (WebWave).png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/VefnJtSO63uivSsCgAoJPlqRyXnrxBRPwZpL4quo.png)

*

![2a.1 - Select the Custom HTML element (WebWave).png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/ncLd41LRMrRcOmG7vvmFwiIRujhcAwcm2giGuvBB.png)

*

![2a.2 - Drag the Custom HTML element onto page (WebWave).png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/y7nP4WTnhTr3PNIYMKieZdoryNw7ZXSOAb9jXqZh.png)

b. Global (on each page)

* Select **Shared elements** on the Webpages dropdown list and drag the Custom HTML element onto the area provided

![2b - Select Shared elements (WebWave).png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/cmHZmnyyf0eRX5vzdhsDDcBsyT3sUwCkpyaHDPSO.png)

*

![2b.1 - Drag the Custom HTML element onto the Shared elements area (WebWave).png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/rbdiZJpLt6BbyzgpUbRlIaBOL8jTWLCNAHzLxiPz.png)

3. Click on the Custom HTML element to open the HTML editor, replace the existing content with your snippet and click on **Change code**

![3. Insert snippet and Change code (WebWave).png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/8UJZhziZJZA7cdc5FkYNGIzswoZHbuZmhMHxTPLM.png)

4. Click on Publish to publish your website (***Note***: Previewing your won't display the chatbot button)

![4. Publish website (WebWave).png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/BcwMDRb81Uzhv6OcHXChlpQcvrWowKvUTOtxDnt6.png)

5. Your chatbot button will now be displayed on your WebWave website

![5. Chatbot button on website (WebWave).png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/PyzqtiOGfrrjz1TpTKBc9rPevQMU2ifwv4zIi7g8.png)

6. If you click on the button it will display the chatbot dialogue

![6. Chatbot dialogue on website (WebWave).png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/rxAsNVrqUbFxS20fKre5DVskgPJUZXbFEiERVZnh.png)

Your chatbot is now added to your WebWave website and your 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>
