> ## 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 Github Pages

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

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

**GitHub Pages** is a free service offered by GitHub that allows you to host static websites directly from your GitHub repositories. It's incredibly easy to use, you simply push your HTML, CSS, and JavaScript files to a specific branch of your repository (usually `main` or `gh-pages`), and GitHub Pages automatically builds and serves your website. It's perfect for personal portfolios, documentation sites, landing pages, and simple blogs.

**Website URL:** [**GitHub Pages**](https://pages.github.com/)

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

1. Log into your **Github** account and select your Github page you want to add the AI support agent to
   <img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/github-pages/1-Github-Pages-Login-and-select-your-Github-page.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=0da72fcf0585c96daa4dd509d94accc8" alt="" width="1163" height="623" data-path="images/installing-your-chatbot/github-pages/1-Github-Pages-Login-and-select-your-Github-page.png" />

2. Select the **index.html** file of your page. If you have more pages in your Github website then you will have to repeat the whole process for each page
   <img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/github-pages/2-Github-Pages-Select-your-index.html-file.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=850d566a4ac34dc655cdc14ae3344f30" alt="" width="1160" height="621" data-path="images/installing-your-chatbot/github-pages/2-Github-Pages-Select-your-index.html-file.png" />

3. On the page editor page, select **Edit this file** and then select the way you want to edit the file, i.e. **Edit in place** (This opens an editor to allow editing), **github.dev** or **Github Desktop**. For the sake of this tutorial we will use the **Edit in place** option
   <img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/github-pages/3-Github-Pages-Select-Edit-this-file.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=f4dae6836842de556387f979f251e87b" alt="" width="1149" height="622" data-path="images/installing-your-chatbot/github-pages/3-Github-Pages-Select-Edit-this-file.png" />

4. When the editor opens your file in edit mode, scroll down and insert your support agent snippet just above the `</head>` tag. When done, click on the **Commit changes...** button to commit your changes to the repository
   <img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/github-pages/4-Github-Pages-Insert-your-snippet-and-commit-changes.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=ea5f8a4324cf481958674a7a409d78a0" alt="" width="1115" height="749" data-path="images/installing-your-chatbot/github-pages/4-Github-Pages-Insert-your-snippet-and-commit-changes.png" />

5. Click on **Commit changes** in the Commit changes dialogue box
   <img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/github-pages/5-Github-Pages-Click-on-Commit-changes.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=a1293fb5b27e6ac2a72f169769ded9aa" alt="" width="1172" height="619" data-path="images/installing-your-chatbot/github-pages/5-Github-Pages-Click-on-Commit-changes.png" />

6. Your AI support agent button will now be displayed on your **Github Pages** website page
   <img src="https://mintcdn.com/espressodev/M-R0dVKgYaQ73Jh2/images/installing-your-chatbot/github-pages/6-Github-Pages-Chatbot-button-on-page.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=efc554fd76397e8b90c7f179aff89435" alt="" width="1424" height="780" data-path="images/installing-your-chatbot/github-pages/6-Github-Pages-Chatbot-button-on-page.png" />

7. 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/github-pages/7-Github-Pages-Chatbot-dialogue-on-page.png?fit=max&auto=format&n=M-R0dVKgYaQ73Jh2&q=85&s=ea71a6a226d7d97d80fcbd320b8dad6c" alt="" width="1425" height="778" data-path="images/installing-your-chatbot/github-pages/7-Github-Pages-Chatbot-dialogue-on-page.png" />

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