# How to Install the answer.cloud AI Chat Widget on Your Website

> Canonical source: [How to Install the answer.cloud AI Chat Widget on Your Website](https://ai.answer.cloud/pages/how-to-install-the-answer-cloud-ai-chat-widget-on-your-website/)

Learn how to integrate the answer.cloud AI chat widget into your website to engage visitors and offer instant assistance. This guide covers general installation steps as well as platform-specific instructions for WordPress, Webflow, and custom sites.

Enhance your website's customer engagement by adding the answer.cloud AI chat widget. This tool enables instant assistance for visitors and provides valuable analytics for your business.

---

## General Installation Instructions

Follow these steps to add the AI chat widget to your website:

1. **Access Your Website's HTML**
   - Open the HTML file of the webpage where the widget should appear.
2. **Insert the Code**
   - Copy and paste the following script just before the closing `</body>` tag:

     ```html
     <script>
         window.aeoSettings = {
             button_text: "Ask AI",
             button_color: "#000",
             intro_text: "Hi, welcome to REPLACE_WITH_YOUR_ORG_NAME AI. How can I help you today?",
             organization_id: REPLACE_WITH_YOUR_ORG_ID
         }
     </script>
     <script src="https://answer.cloud/embed.js"></script>
     ```

   - Replace `REPLACE_WITH_YOUR_ORG_NAME` with your organization's name and `REPLACE_WITH_YOUR_ORG_ID` with your organization's unique ID.
3. **Customize the Widget (Optional)**
   - Modify the following settings in the script to personalize the chat experience:
     - `button_text`: Text displayed on the chat button
     - `button_color`: Button color (use a hex code, e.g., `#000`)
     - `intro_text`: Introduction message shown in the chat

---

## Platform-Specific Installation

### WordPress

1. **Access the Admin Panel**
   - Log into your WordPress dashboard.
2. **Edit the HTML**
   - Navigate to `Appearance` > `Editor`.
   - Select the `footer.php` file.
3. **Add the Widget Code**
   - Paste the script code before the closing `</body>` tag.
4. **Save Changes**
   - Click `Update File` to save.

### Webflow

1. **Open Project Settings**
   - Go to your Webflow dashboard and select your project.
2. **Custom Code Section**
   - Navigate to `Project Settings` > `Custom Code`.
3. **Add the Widget Code**
   - Paste the script in the `Footer Code` section, before the closing `</body>` tag.
4. **Publish Your Site**
   - Click `Publish` to apply your changes.

### Custom Websites

- For custom-built websites, use the general installation steps above. Ensure direct access to your site's HTML files is available.

---

## Example Script

Here is a sample widget configuration:

```html
<script>
    window.aeoSettings = {
        button_text: "Ask AI",
        button_color: "#000",
        intro_text: "Hi, welcome to ExampleCorp AI. How can I help you today?",
        organization_id: 123456
    }
</script>
<script src="https://answer.cloud/embed.js"></script>
```

---

## Additional Notes
- Ensure your organization's details are correctly entered in the script for proper functionality.
- The widget can be customized to fit your website's branding and tone.
- For troubleshooting or advanced customization, contact answer.cloud support.