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

> How to add your custom ChatGPT trained AI support agent to your Zite web app.

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

[Zite](https://www.zite.com) is an AI‑powered no‑code app builder that lets you quickly create business apps, workflows, and databases without writing code.

**Website URL**: [Zite](https://www.zite.com)

## Add your AI support agent to your **Zite** web app

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

1. Log into your **Zite** account and on the dashboard select the web app you want to edit

<img src="https://mintcdn.com/espressodev/RIYH3rU1WY0FUFhM/images/installing-your-chatbot/Zite/1-Zite-Dasboard-select-web-app-to-edit.png?fit=max&auto=format&n=RIYH3rU1WY0FUFhM&q=85&s=598dcf16624f2c8e36197e940bb90bda" alt="1-Zite-Dashboard-select-web-app-to-edit" width="1515" height="730" data-path="images/installing-your-chatbot/Zite/1-Zite-Dasboard-select-web-app-to-edit.png" />

We are going to use Zite’s **AI prompt bar** to insert your SiteSpeakAI agent snippet site‑wide.

The prompt consists of an instruction, e.g. "Please add the following JS snippet to my app code:" followed by the snippet code as copied at the beginning of this tutorial.

Note that the `#########################.js` part of the JS file URL will be replaced by your specific js script filename (36 characters including the 4 dashes).

**Tip**: Create the complete prompt in a text editor and then paste this into the AI prompt bar.

```
Please add the following JS snippet to my app code:

<!-- SiteSpeakAI - Add ChatGPT to your website -->
	<script type="text/javascript">(function()	{d=document;s=d.createElement("script");
	s.src="https://sitespeak.ai/chatbots/#########################.js";
	s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
<!-- / SiteSpeakAI -->
```

2. Insert the prompt in the **AI prompt bar** and click on **Send**

<img src="https://mintcdn.com/espressodev/RIYH3rU1WY0FUFhM/images/installing-your-chatbot/Zite/2-Zite-Insert-prompt-and-Send.png?fit=max&auto=format&n=RIYH3rU1WY0FUFhM&q=85&s=8a4a950d22501391b43e85b866352def" alt="2-Zite-Insert-prompt-and-Send" width="1742" height="783" data-path="images/installing-your-chatbot/Zite/2-Zite-Insert-prompt-and-Send.png" />

3. If all goes well, the **Zite AI builder** will indicate "*Your SiteSpeak AI chatbot is all set up and ready to go!*" and also display the support agent button preview

<img src="https://mintcdn.com/espressodev/RIYH3rU1WY0FUFhM/images/installing-your-chatbot/Zite/3-Zite-Success-msg-and-button-preview.png?fit=max&auto=format&n=RIYH3rU1WY0FUFhM&q=85&s=5de0aff28dd29e3e242019907ecd75d6" alt="3-Zite-Success-msg-and-button-preview" width="1514" height="783" data-path="images/installing-your-chatbot/Zite/3-Zite-Success-msg-and-button-preview.png" />

4. Click on **Publish** to publish your changes

<img src="https://mintcdn.com/espressodev/RIYH3rU1WY0FUFhM/images/installing-your-chatbot/Zite/4-Zite-Publish.png?fit=max&auto=format&n=RIYH3rU1WY0FUFhM&q=85&s=ac458a5fed1e0f6f17d2c4cfe09be00d" alt="4-Zite-Publish" width="1515" height="781" data-path="images/installing-your-chatbot/Zite/4-Zite-Publish.png" />

5. Your AI support agent button will now be displayed on your **Zite** web app page

<img src="https://mintcdn.com/espressodev/RIYH3rU1WY0FUFhM/images/installing-your-chatbot/Zite/5-Zite-Button.png?fit=max&auto=format&n=RIYH3rU1WY0FUFhM&q=85&s=1acfeeeb55d602e4f690d180e99a9546" alt="5-Zite-Button" width="1514" height="782" data-path="images/installing-your-chatbot/Zite/5-Zite-Button.png" />

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

<img src="https://mintcdn.com/espressodev/RIYH3rU1WY0FUFhM/images/installing-your-chatbot/Zite/6-Zite-Dialogue.png?fit=max&auto=format&n=RIYH3rU1WY0FUFhM&q=85&s=e750fa3e83132ff42cf3f2d7121a15c7" alt="6-Zite-Dialogue" width="1516" height="782" data-path="images/installing-your-chatbot/Zite/6-Zite-Dialogue.png" />

Your AI support agent has now been added to your **Zite** web app page 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>
