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

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

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

[WeWeb](https://www.weweb.io/) is a no-code frontend builder that allows users to create well constructed web applications by connecting to any backend or data source.

**Website URL**: [WeWeb](https://www.weweb.io/)

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

1. Log into your **WeWeb** account and on the dashboard select the project you wish to edit

<img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/1-WeWeb-Dasboard-select-project-to-edit.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=836ccbfb08ce3eada118843ccf8b8f34" alt="1-WeWeb-Dasboard-select-project-to-edit" width="1219" height="758" data-path="images/installing-your-chatbot/WeWeb/1-WeWeb-Dasboard-select-project-to-edit.png" />

2. **Please Note**! There are 2 ways to add your AI support agent to your WeWeb website:

   a. Adding custom code manually in the project editor or <br />
   b. Using the **FullStack AI prompt bar** in the project editor.

We are going to go through both options (for both options you will have to **Deploy** your website to see the AI support agent dialogue on your live website):

#### A. Adding custom code manually in the project editor

1. On the project editor page, ensure that the **Edit** option is selected and click on **Settings** in the left side toolbar

<img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/2-WeWeb-Select-Settings.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=f16c803e62aa13718088af567bc947ed" alt="2-WeWeb-Select-Settings" width="1885" height="922" data-path="images/installing-your-chatbot/WeWeb/2-WeWeb-Select-Settings.png" />

2. Select **Custom scripts** in the left side toolbar

<img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/3-WeWeb-Select-Custom-scripts.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=944b96f5fd54e6e1d7de46b55b0b68f1" alt="3-WeWeb-Select-Custom-scripts" width="1579" height="919" data-path="images/installing-your-chatbot/WeWeb/3-WeWeb-Select-Custom-scripts.png" />

Note that the **Project settings - Custom scripts** dialogue box states that *'Custom code and scripts will only appear on the deployed project'* meaning that you will have to **Deploy** your project to see your AI support agent dialogue on your live website page, it is not displayed on the Preview page.

3. Insert your snippet under **Head** or **Body**. A warning will appear to inform you that there is a validation error (*Validation error: Your next deploy may fail.*) but you can ignore the error. Click on **Update custom code** to save your code

<img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/4-WeWeb-Insert-snippet.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=5064704e7ac9dad9231696fdd98b17b4" alt="4-WeWeb-Insert-snippet" width="1587" height="924" data-path="images/installing-your-chatbot/WeWeb/4-WeWeb-Insert-snippet.png" />

4. Click on **Deploy** to deploy your website

<img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/5-WeWeb-Click-on-Deploy.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=91f97d8e2f991f5d2bb6957d96919cef" alt="5-WeWeb-Click-on-Deploy" width="1886" height="1005" data-path="images/installing-your-chatbot/WeWeb/5-WeWeb-Click-on-Deploy.png" />

#### B. Using the FullStack AI prompt bar

1. Log into your WeWeb account as mentioned above and select your project to edit.

We are going to use WeWeb’s **FullStack AI prompt bar** to insert your SiteSpeakAI agent snippet site‑wide for us.

The prompt consists of an instruction, e.g. "Please add the following JS snippet to my app code:" followed by the snippet code as copied at the beginning of this tutorial. Note that the ##### part of the JS file URL will be your specific js script filename (36 characters including the 4 dashes).

**Tip**: Create the complete prompt in a text editor and then paste this into the AI prompt bar.

```
Please add the following JS snippet to my app code:

<!-- SiteSpeakAI - Add ChatGPT to your website -->
	<script type="text/javascript">(function()	{d=document;s=d.createElement("script");
	s.src="https://sitespeak.ai/chatbots/#########################.js";
	s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
<!-- / SiteSpeakAI -->
```

2. On the project editor page, ensure that the **AI** option is selected.

<img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/6-WeWeb-Select-AI-option.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=559fe792238079b455fa8e78a4902823" alt="6-WeWeb-Select-AI-option" width="1886" height="928" data-path="images/installing-your-chatbot/WeWeb/6-WeWeb-Select-AI-option.png" />

Please note: At the moment the AI part of WeWeb is still in Alpha status, so it could inform you that it could not perform the task and then create a whole set of manual instructions for you to add it yourself. This is then basically the same process as described in first option where we added it manually in the project editor. You can clear the message and retry the process or just refer to Option A.

3. Make sure the `Fullstack` option is selected, insert the prompt into the **AI prompt bar** and click on **Send** (or just press **Enter**)

<img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/7-WeWeb-Insert-prompt.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=2e0ef7852e04d03fde4a9a76fa5b168b" alt="7-WeWeb-Insert-prompt" width="1884" height="930" data-path="images/installing-your-chatbot/WeWeb/7-WeWeb-Insert-prompt.png" />

It will go through a whole process of creating a workflow and inserting your snippet.

4. Finally it will indicate that the process was completed and then you can **Deploy** (Publish) your website.

<img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/8-WeWeb-Click-on-Deploy-after-AI.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=add68ee8fe668b8ac89ba9ff40e20090" alt="8-WeWeb-Click-on-Deploy-after-AI" width="1886" height="926" data-path="images/installing-your-chatbot/WeWeb/8-WeWeb-Click-on-Deploy-after-AI.png" />

#### C. For both options

1. Your AI support agent button will now be displayed on your **WeWeb** webpage
   <img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/9-WeWeb-Button.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=fa4d7eb037bc85fd00767c7a6b32784f" alt="9-WeWeb-Button" width="1886" height="925" data-path="images/installing-your-chatbot/WeWeb/9-WeWeb-Button.png" />

2. If you click on the button it will display the AI support agent dialogue
   <img src="https://mintcdn.com/espressodev/dbtnXw_NQqoC2CW2/images/installing-your-chatbot/WeWeb/10-WeWeb-Dialogue.png?fit=max&auto=format&n=dbtnXw_NQqoC2CW2&q=85&s=a4153fae81dd9dc8925c6d4436035d3f" alt="10-WeWeb-Dialogue" width="1883" height="924" data-path="images/installing-your-chatbot/WeWeb/10-WeWeb-Dialogue.png" />

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