> ## 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 Elementor
> How to add your custom ChatGPT trained AI support agent to your Elementor website.
You want to embed your custom trained AI support agent in your **Elementor** website page. Here's how to add an AI support agent to Elementor with SiteSpeakAI.
**Elementor** is the leading no-code, drag-and-drop website builder plugin for WordPress, powering over 18 million sites worldwide. It delivers a live, front-end editing experience with pixel-perfect design controls and built-in marketing tools.
**Website URL:** [Elementor](https://elementor.com/)
**Please note**: Installing **Elementor** as a plugin on **WordPress** is not part of this tutorial but you can follow the installation on [**How to Install Elementor Pro: Full Guide**](https://elementor.com/help/installing-elementor-pro/).
## Add your AI support agent to your **Elementor** 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.
### In Elementor
With Elementor you have two (2) options to embed your AI support agent code snippet:
* Using the **Elementor Editor** to add an **HTML** element containing your snippet per page in a selected section on your page (this option is also available if you have the **free** Elementor plugin installed)
* Using the **Elementor Code** editor to add the code snippet as a code element to your website. You can select where it should be displayed, i.e. on the entire site or per page. Note that this option is only available with the **Elementor Pro** (paid) subscription.
We will cover both options.
#### A. Using the **Elementor Editor** option
1. Log into your **WordPress** account and on the Dashboard, select **Pages → All Pages** on the leftside menu
2. Scroll down on the list of available pages until you find the page you want to add your snippet to. Move your mouse over the page entry and select **Edit with Elementor**
3. Scroll down on the list of **Elements** and drag the **HTML** element onto your page
4. Insert your code snippet in the **HTML Code** text box. The Preview will display the **AI support agent** button on the right hand bottom side of the page. To see the button on your live page, click on Publish and view your live page
#### B. Using the **Elementor Code** option
1. Log into your **WordPress** account and on the Dashboard, select **Elementor → Custom Code** on the leftside menu
2. Click on **NEW CODE**
3. Add a **Title** (for your reference), choose the **Location** (**\**, **\-Start** or **\-End**), optionally set a **Priority** (1-10) to control injection order, insert your code snippet and click on **Publish**\
4. You can add a **Condition** (where the code snippet must be displayed, the default is **Entire site**) and click on **Save & Close**
#### C. For both options
Whatever option you have used, your AI support agent will now be active on your website.
1. Your AI support agent button will now be displayed on your **Elementor** website page
2. If you click on the button it will display the AI support agent dialogue
Your AI support agent has now been added to your **Elementor** website and your visitors/customers can start interacting with it!
***
Join over 1000+ businesses, websites and startups automating their customer service and other tasks with a custom trained AI agent.