# WordPress

> Add the Quickchat AI Agent to your WordPress site with the official plugin. Install from the WordPress Plugin Directory, enter your Scenario ID, and the chat widget appears automatically. No code required.

In this guide, we'll show how to add the Quickchat AI Widget to your WordPress site using our official plugin.

## What you'll need

- A WordPress site (version 6.0 or newer) where you can install plugins
- The [**Quickchat AI Agent**](https://wordpress.org/plugins/quickchat-ai-agent/) plugin (free, from the WordPress Plugin Directory)
- Your **Scenario ID** from the [Quickchat AI App](https://app.quickchat.ai)

_Time to complete: \~2 minutes_

---

## Step 1: Install the plugin

In your WordPress admin, go to **Plugins → Add New**, search for **Quickchat AI Agent**, then click **Install Now** and **Activate**.

You can also install it from the [Quickchat AI Agent listing](https://wordpress.org/plugins/quickchat-ai-agent/) on WordPress.org, or by uploading the plugin ZIP under **Plugins → Add New → Upload Plugin**.

---

## Step 2: Enter your Scenario ID

After activating, go to **Settings → Quickchat AI Agent** and paste your **Scenario ID**, then click **Save Changes**.

![Screenshot: Quickchat AI Agent settings page in WordPress with the Scenario ID field](https://docs.quickchat.ai/_astro/1-settings.LpASGYyD.png)

:::note[Where to find your Scenario ID]
Log in to the [Quickchat AI App](https://app.quickchat.ai), go to **Channels → Your Website → Install**, and copy your Scenario ID. You can also read it from your scenario URL: it's the last part of `https://app.quickchat.ai/i/your-scenario-id`.
:::

---

## Step 3: Confirm on your site

Open your site's front end and look for the Quickchat AI chat bubble in the bottom-right corner of the page.

![Screenshot: The Quickchat AI chat widget live on a WordPress site](https://docs.quickchat.ai/_astro/2-widget-live.DlA0frb4.png)

That's it!

**Quickchat AI Agent is live on your WordPress site 🎉**

All widget configuration (colors, position, launcher size, welcome messages, AI behavior) is managed in the [Quickchat AI App](https://app.quickchat.ai) under **Channels → Your Website**. Changes take effect on your site automatically. See the [Website](/channels/website/) guide for the full list of appearance and text options.

---

## Troubleshooting

### The chat widget doesn't appear

If the chat bubble doesn't show up on your site, a caching or optimization plugin (for example WP Rocket, LiteSpeed Cache, W3 Total Cache, or Autoptimize) is most likely caching, deferring, or delaying the widget loader script.

Exclude the loader from every cache and optimization feature (caching, minify/combine, defer, and delayed JavaScript execution):

`https://bubble.quickchat.ai/chat.js`

In WP Rocket, for example, add this URL to **Excluded JavaScript Files**, **Excluded from Deferred**, and **Delay JavaScript Execution**. After excluding the loader, clear your site cache and reload the page.

### It still isn't appearing after clearing the cache

Check these, in order:

- **Recheck your Scenario ID.** Re-copy it from **Channels → Your Website → Install** in the [Quickchat AI App](https://app.quickchat.ai) and paste it into **Settings → Quickchat AI Agent**, with no extra spaces.
- **Confirm the plugin is active.** In **Plugins**, make sure **Quickchat AI Agent** shows as activated.
- **Rule out ad blockers.** Browser privacy extensions can hide the widget. Try another browser or turn them off.
- **Check the front end.** The widget shows on your public site, not inside the WordPress admin.

### I can't find the "Quickchat AI Agent" settings page

The settings live under **Settings → Quickchat AI Agent** in your WordPress admin. If it isn't there, the plugin isn't active yet: open **Plugins**, find **Quickchat AI Agent**, and click **Activate**.

### Does it work with WooCommerce, Elementor, Divi, and page builders?

Yes. The plugin loads the widget across your whole site through your theme footer, so it runs alongside WooCommerce and any theme or page builder with no extra setup.

### How do I temporarily hide or remove the widget?

Deactivate the **Quickchat AI Agent** plugin to remove it, or turn off **Availability and access** under **Channels → Your Website → Install** in the app to take the Agent offline while leaving the plugin in place.

---

## How to manually add a widget script

If you'd rather not install the plugin, you can add the Quickchat AI Widget to WordPress with a small script instead.

### 1. Get the Widget script

1. Log in to the [Quickchat AI App](https://app.quickchat.ai).
2. Go to **Channels → Your Website → Install**.
3. Copy the **Widget script**.

```html
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID_HERE");
</script>
```

### 2. Add it to your site

Paste the script just before the closing `</body>` tag, using whichever method fits your setup:

- **A code-snippet plugin** such as **WPCode** or **Insert Headers and Footers**: paste the script into the plugin's footer/body section and save.
- **Your theme's `footer.php`**: in **Appearance → Theme File Editor**, paste the script just before `</body>`. Use a [child theme](https://developer.wordpress.org/themes/advanced-topics/child-themes/) so a theme update doesn't overwrite your change.

The widget will appear on every page that includes your theme footer.

:::tip
The official plugin does the same thing for you and survives theme updates, so it's the recommended option for most sites.
:::

For help, contact us at **contact@quickchat.ai**.