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

> How to add your custom ChatGPT trained AI support agent to your Hercules website or App.

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

**Hercules** makes it easy to build stunning apps and websites by chatting with AI. With the Hercules platform you can build any type of app or website, e.g. SaaS, eCommerce, Internal Tools, Mobile Apps, Marketing Pages, Landing pages, and more.

**Website URL**: [Hercules](https://hercules.app)

## Add your AI support agent to your **Hercules** website or 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 Hercules

1. Log into your **Hercules** account and select your project on the dashboard
   <img src="https://mintcdn.com/espressodev/Zn6ZP-dD8oQZDW0b/images/installing-your-chatbot/Hercules/1-Hercules-Dashboard.png?fit=max&auto=format&n=Zn6ZP-dD8oQZDW0b&q=85&s=dcd7309477941c7eee85f61b3bd1ccac" alt="1-Hercules-Dashboard" width="1313" height="809" data-path="images/installing-your-chatbot/Hercules/1-Hercules-Dashboard.png" />

We are going to use a prompt to instruct the Hercules AI to insert the snippet for us.

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

<Note>
  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 message box.
</Note>

```
Please add the following JS snippet to my project 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. Make sure the **AI Editor** option is selected on the Left sidebar and insert this prompt into the AI prompt message box. Click on the **Send** button
   <img src="https://mintcdn.com/espressodev/Zn6ZP-dD8oQZDW0b/images/installing-your-chatbot/Hercules/2-Hercules-Insert-AI-prompt.png?fit=max&auto=format&n=Zn6ZP-dD8oQZDW0b&q=85&s=2c6274300d863ce3890c8e52e05a6b62" alt="2-Hercules-Insert-AI-prompt" width="1374" height="882" data-path="images/installing-your-chatbot/Hercules/2-Hercules-Insert-AI-prompt.png" />

3. The **Hercules AI** will start adding the code to your website, it takes a while so please be patient. When done it will display a message indicating that the snippet was added and also display the support Agent button on the Preview page. Click on **Publish** to publish your changes
   <img src="https://mintcdn.com/espressodev/Zn6ZP-dD8oQZDW0b/images/installing-your-chatbot/Hercules/3-Hercules-AI-action-done.png?fit=max&auto=format&n=Zn6ZP-dD8oQZDW0b&q=85&s=3fc97a0d8b4c71dcb79ce1ea369f7c42" alt="3-Hercules-AI-action-done" width="1372" height="745" data-path="images/installing-your-chatbot/Hercules/3-Hercules-AI-action-done.png" />

4. Your AI support agent button will now be displayed on your **Hercules** website page or App
   <img src="https://mintcdn.com/espressodev/Zn6ZP-dD8oQZDW0b/images/installing-your-chatbot/Hercules/4-Hercules-Agent-button.png?fit=max&auto=format&n=Zn6ZP-dD8oQZDW0b&q=85&s=05f9a121e7c988624f622b40dd8f52e1" alt="4-Hercules-Agent-button" width="1372" height="750" data-path="images/installing-your-chatbot/Hercules/4-Hercules-Agent-button.png" />

5. If you click on the button it will display the AI support agent dialogue
   <img src="https://mintcdn.com/espressodev/Zn6ZP-dD8oQZDW0b/images/installing-your-chatbot/Hercules/5-Hercules-Agent-dialogue.png?fit=max&auto=format&n=Zn6ZP-dD8oQZDW0b&q=85&s=def620721b03b8b79758b483510dc3ea" alt="5-Hercules-Agent-dialogue" width="1374" height="754" data-path="images/installing-your-chatbot/Hercules/5-Hercules-Agent-dialogue.png" />

Your AI support agent has now been added to your **Hercules** 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>
