> ## 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 app.dragdropr

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

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

**app.dragdropr** is a super-simple website builder that focuses on creating landing pages and basic websites without needing any coding knowledge. It's built around a drag-and-drop interface, meaning you literally drag elements (text boxes, images, buttons, etc.) onto a page and arrange them however you like. It's particularly known for its ease of use and speed - you can get a basic website up and running in minutes. It's designed for very straightforward websites, like promoting a product, collecting email addresses, or showcasing a simple service.

**Website URL:** [app.dragdropr](https://app.dragdropr.com/)

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

1. Log into your **app.dragdropr** account and on the dashboard select the project you want to add your custom ChatGPT trained AI support agent to

![](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/9C759u7GK26aPyRaVe4ZRmVROo1CkLmAVbTZ6Xdc.png)

2. In the page editor, select **Settings** in the top right menu

![](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/HRyHLgFyhOTyuvIGEnnh9ZsCtWgxyYXP9N1rtBvk.png)

3. Click on **ADD SCRIPTS** on the PAGE Settings

![](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/uZshQLfmJhTO6fcFX1ywMpOss6i72S1RZrwQt2gv.png)

4. In the **Javascript Editor**, insert your snippet under **HEAD**, click on **SAVE** and close the editor

![](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/5YJdAwGplHfRycuMW9fV1uHL4wH3swC4hpZvEAEG.png)

5. On the main editor page, click on **SAVE** to save your changes to the page

![](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/XbrCJeU4rV9y89ip6GPdua8gn42r5TFwYe0nIT1C.png)

6. Click on **Live Preview** to see how your AI support agent will be displayed on your live page

![](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/n0tkMvWsXYMZFrxSeW2NGTE6lJzKxqJdnrV3t5kX.png)

7. Your AI support agent button will now be displayed on your **app.dragdropr** website page

![](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/9vrY3n8N9j0RqR3IhmlCgKN50j1P5wJSrWafUZE9.png)

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

![](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/KvMNPNBPJGwDCPJrEJsLWzIzafMCqffldPR5doHu.png)

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