> ## 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 Webstudio

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

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

## Add your chatbot to your Webstudio website

[**Webstudio**](https://webstudio.is/) is an open-source, no-code **visual web development platform** that bridges the gap between design and code. It empowers users to build fast, responsive websites using a visual editor - while still offering full control over HTML, CSS, and JavaScript when needed.

Webstudio is ideal for **designers, developers, startups, and agencies** who want the flexibility of code with the speed of no-code. It's especially appealing to those who value open-source tools, hosting freedom, and modern web standards.

For more info see [**Webstudio**](https://webstudio.is/).

### In SiteSpeakAI

Select your chatbot from the dropdown menu at the top, click on the **Install Chatbot** section in the sidebar and then click on the **Copy Code** button to copy your code snippet.
![0 - Webstudio - Copy JS Code.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/0ShDl7ZHt2xAar4wZ9BmKV82v2r70Du6MTKAEzUS.png)

### In Webstudio

1. Select your project on your dashboard and click on the **Webstudio** logo
   ![1 - Webstudio - Click on Webstudio Logo on Dashboard.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/XmUYfLI76bqn9sRa2xbCl77TmiGhrdnxXPG2DG0N.png)

2. Click on **Project Settings**
   ![2 - Webstudio - Click on Project Settings.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/DVLWhVTEP1OduhR8Obtqx3fMMGlKs8Myjb9PXEBn.png)

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

4. Scroll down and insert your snippet under **Custom Code**. When done click on **X** to close the Project Settings dialogue
   ![4 - Webstudio - Scroll down and insert snippet under Custom Code.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/NKxHSY3mUC602o7rDyrjAru7r5EavPZu5hsdmj0J.png)

5. Click on **Publish** to publish your modifications to your live website
   ![5 - Webstudio - Click on Publish.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/Rr3YEoGWfnjCohNRZjiSMHKKX6Cf9qyiwqcX3kfZ.png)

6. Your chatbot button will now be displayed on your website pages
   ![6 - Webstudio - Chatbot button.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/DuCIfOaxXGG9DwiBSl1NVXAb2HmUjsmJWFdgaCYH.png)

7. If you click on the button it will display the Chatbot dialogue
   ![7 - Webstudio - Chatbot dialogue.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/sCCjUwKG7SDeDLXZNZDxQze2wtbnM6Xlovz99CwS.png)

Your chatbot is now added to your **Webstudio** website and your customers/vistors 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>