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

> How to add your custom ChatGPT trained AI support agent to your Kirki built WordPress website.

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

**Droip** was rebranded into **Kirki**. If you have a current **Droip** subscription, read the following info page [Migrating from Droip to Kirki](https://kirki.com/docs/migrate-from-droip-to-kirki/) for a proper set of instructions on how to migrate to Kirki.

**Please note**: Installing **Kirki** as a plugin on **WordPress** is not part of this tutorial but you can follow the installation on [Installation & Update](https://kirki.com/docs/installation-update/).

**Kirki** is a freeform visual builder plugin for WordPress and an advanced theme customizer that lets you design and build complete websites visually — without coding.

**Website URL**: [Kirki](https://kirki.com)

## Add your AI support agent to your Kirki built WordPress 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 Kirki

1. Log into your **WordPress** account and on your dashboard select **Kirki** -> **Canvas** on the left side-bar
   <img src="https://mintcdn.com/espressodev/bj2-XXX2w475FZhV/images/installing-your-chatbot/Kirki/1-WP-Dashboard-Select-Canvas.png?fit=max&auto=format&n=bj2-XXX2w475FZhV&q=85&s=121b8f3c4a1e52a316c1168c145ee530" alt="1-WP-Dashboard-Select-Canvas" width="1919" height="958" data-path="images/installing-your-chatbot/Kirki/1-WP-Dashboard-Select-Canvas.png" />

**Note**!  Embedding your support agent in Kirki is done per page, thus you have to add the snippet to each page you want to add your support agent to.

2. On the Kirki dashboard, select the page you want to add your support agent to
   <img src="https://mintcdn.com/espressodev/bj2-XXX2w475FZhV/images/installing-your-chatbot/Kirki/2-Kirki-Dashboard-Select-Page.png?fit=max&auto=format&n=bj2-XXX2w475FZhV&q=85&s=ed7c4347ac37e4bc669edfaf510bf806" alt="2-Kirki-Dashboard-Select-Page" width="1918" height="957" data-path="images/installing-your-chatbot/Kirki/2-Kirki-Dashboard-Select-Page.png" />

3. On the Kirki Canvas displaying your page, select **Settings**
   <img src="https://mintcdn.com/espressodev/bj2-XXX2w475FZhV/images/installing-your-chatbot/Kirki/3-Kirki-Canvas-Select-Settings.png?fit=max&auto=format&n=bj2-XXX2w475FZhV&q=85&s=61c7c036e98fb4576b05d2c6bed205af" alt="3-Kirki-Canvas-Select-Settings" width="1918" height="957" data-path="images/installing-your-chatbot/Kirki/3-Kirki-Canvas-Select-Settings.png" />

4. Click on the **Custom Code** tab, insert your snippet in one of the two possible areas, i.e. **Inside`<head>`tag** or **Before`</body>`Tag** and click on **Save**
   <img src="https://mintcdn.com/espressodev/bj2-XXX2w475FZhV/images/installing-your-chatbot/Kirki/4-Kirki-Insert-your-snippet.png?fit=max&auto=format&n=bj2-XXX2w475FZhV&q=85&s=95362c87cf6959a52153ee475df2505f" alt="4-Kirki-Insert-your-snippet" width="1919" height="958" data-path="images/installing-your-chatbot/Kirki/4-Kirki-Insert-your-snippet.png" />

5. Your AI support agent button will now be displayed on your **Kirki** website page
   <img src="https://mintcdn.com/espressodev/bj2-XXX2w475FZhV/images/installing-your-chatbot/Kirki/5-Kirki-Support-agent-button.png?fit=max&auto=format&n=bj2-XXX2w475FZhV&q=85&s=1cad1247d3d62cb20f1610953e9a2d01" alt="5-Kirki-Support-agent-button" width="1907" height="926" data-path="images/installing-your-chatbot/Kirki/5-Kirki-Support-agent-button.png" />

6. If you click on the button it will display the AI support agent dialogue
   <img src="https://mintcdn.com/espressodev/bj2-XXX2w475FZhV/images/installing-your-chatbot/Kirki/6-Kirki-Support-agent-dialogue.png?fit=max&auto=format&n=bj2-XXX2w475FZhV&q=85&s=2298b8ce9675460a7ff0873dcc5b25f6" alt="6-Kirki-Support-agent-dialogue" width="1907" height="925" data-path="images/installing-your-chatbot/Kirki/6-Kirki-Support-agent-dialogue.png" />

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