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

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

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

**Plasmic** is an open-source visual development platform that helps teams build and manage websites and web applications.

**Website URL:** [Plasmic](https://www.plasmic.io/)

## Add your AI support agent to your **Plasmic** 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://mintlify.s3.us-west-1.amazonaws.com/espressodev/images/installing-your-chatbot/copy-code.png" alt="Copy code snippet" />

### In Plasmic

1. Log into your **Plasmic** account and on your dashboard select the project you want to add your AI support agent to
   ![1 - Plasmic - Log into Plasmic.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/VSrRSzNYUQwY5ZJb67cJ7DVy3W4uSDXwEeCzAlOD.png)

2. Click on **+** to add a new component
   ![2 - Plasmic - Add new component.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/QCg9mlL3B3fqWN2kfzWoKs6nHfsNWtEP63kTSkPi.png)

3. Select **Default components** on the left sidebar
   ![3 - Plasmic - Select Default components.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/XPeppcPsT7m1wWjkHzg1DIeyVd5OPuZwstN0TPom.png)

4. Scroll down on the list of Default components and select **Embed HTML** in the HTML group
   ![4 - Plasmic - Select Embed HTML.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/re2ZpXCUXJP0Pb5W43mw7ZIvXpvw81kTzb0Vq00K.png)

5. Click on the **Code** input box under **Embed HTML props**
   ![5 - Plasmic - Click on Code input box.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/titpv5Dw3dJAW1xWseXb1SuUBO2TjkPQf8Acga1f.png)

6. Insert your snippet (as copied above) into the **Code** input box and click on **Save**
   ![6 - Plasmic - Insert snippet in Code input box and click on Save.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/yOZnql1XTECLwSGgEp7LpCE7EfLdOMiI2OK1xPz7.png)

7. Click on **Publish** to publish your changes
   ![7 - Plasmic - Click on Publish to publish your changes.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/otb7GeCUqNn2A9Hwz45ECKzuzDXASgApuLZiL8vh.png)

8. Your AI support agent button will now be displayed on your **Plasmic** website
   ![8 - Plasmic - Your chatbot button.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/WbkVBFakektxmCVq9OmlvqtloqUymQqMemgST2Io.png)

9. If you click on the button it will display your AI support agent dialogue
   ![9 - Plasmic - Your chatbot dialogue.png](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/SKSdmx6Ff3WOckdXZdI7i5BWL8uufa0KdfkCoQuv.png)

Your AI support agent has now been added to your **Plasmic** website and your customers/visitors 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>