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

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

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

**GRAV** is a modern open source flat-file CMS and it makes use of Markdown. Before we start adding our AI support agent, we have to perform some configuration changes to allow your code snippet to be added.

**Please Note!** For GRAV, you have to add your AI support agent snippet to each page you want it to be displayed on, this means that the below instructions will have to be repeated for each page.

**Website URL:** [GRAV](https://www.grav.io/)

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

1. Log into your **GRAV** account and on your dashboard, select **Configuration** on the left sidebar.

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/1-GRAV-Select-Configuration.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=50d2e31ea04852b4962d470faeede3be" alt="" width="1252" height="764" data-path="images/installing-your-chatbot/grav/1-GRAV-Select-Configuration.png" />

2. Select **Content** on the System configuration list and under **Process**, make sure **Twig** is checked and **Markdown** is unchecked.

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/2-GRAV-Select-Content-and-make-sure-Twig-is-checked-and-Markdown-not.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=7fdc2f9d36dc3577caa1ee73d45401a8" alt="" width="1253" height="765" data-path="images/installing-your-chatbot/grav/2-GRAV-Select-Content-and-make-sure-Twig-is-checked-and-Markdown-not.png" />

3. Click on **Save** (Top Right) to save your changes if any.

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/3-GRAV-Click-on-Save-to-save-your-changes-if-any.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=8613d601a2e831ee2627f674d056b402" alt="" width="1248" height="762" data-path="images/installing-your-chatbot/grav/3-GRAV-Click-on-Save-to-save-your-changes-if-any.png" />

#### Let's insert our AI support agent snippet

4. Select **Pages** on the left sidebar.

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/4-GRAV-Select-Pages.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=4ef15469159d4b247a93c5d595da9326" alt="" width="1248" height="762" data-path="images/installing-your-chatbot/grav/4-GRAV-Select-Pages.png" />

5. Select the page you want to edit to add your AI support agent snippet to.

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/5-GRAV-Select-the-page-you-want-to-edit.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=e2cb39dca7b2f80a3a4ba449bf6638ca" alt="" width="1250" height="701" data-path="images/installing-your-chatbot/grav/5-GRAV-Select-the-page-you-want-to-edit.png" />

6. On the editor page, select **Normal** (the **Expert** option allows for more settings that we are not going to use now).

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/6-GRAV-Select-Normal.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=05f72fb0bbdd776155b06f189096154e" alt="" width="1251" height="711" data-path="images/installing-your-chatbot/grav/6-GRAV-Select-Normal.png" />

7. Insert your snippet above (or below) any HTML content in the editor input dialogue box.

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/7-GRAV-Insert-your-snippet.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=08caf420fba79bd5bdf65b00dfa21832" alt="" width="1251" height="708" data-path="images/installing-your-chatbot/grav/7-GRAV-Insert-your-snippet.png" />

8. Click on **Save** to save your input. **GRAV** will display a warning regarding potential XSS issues in content. This is due to the fact that the snippet contains a JS script tag. You can ignore this warning.

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/8-GRAV-Click-on-Save-to-save-your-input.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=be6445895031315198800277a3c393b2" alt="" width="1248" height="760" data-path="images/installing-your-chatbot/grav/8-GRAV-Click-on-Save-to-save-your-input.png" />

9. Your AI support agent button will now be displayed on your **GRAV** website page

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/9-GRAV-Chatbot-button.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=ba83755edb66ab69d6e8e6385819a70a" alt="" width="1255" height="765" data-path="images/installing-your-chatbot/grav/9-GRAV-Chatbot-button.png" />

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

<img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/grav/10-GRAV-Chatbot-dialogue.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=88edd288f82df6f16c5ef9b62fef7985" alt="" width="1253" height="760" data-path="images/installing-your-chatbot/grav/10-GRAV-Chatbot-dialogue.png" />

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