> For the complete documentation index, see [llms.txt](https://docs.klink.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klink.cloud/getting-started/setup-channels/live-chat/live-chat-on-wordpress.md).

# Live Chat on WordPress

This guide explains step-by-step how to install the **klink.cloud AI Agent Live Chat Widget** on your WordPress website using the **WPCode (formerly known as WBCoast)** plugin.

{% embed url="<https://www.loom.com/share/1fe0bf337daa4be1a9c71c46a9a20514>" %}

***

### ⚙️ Step 1: Log In to Your WordPress Admin Panel

1. Go to your WordPress admin dashboard (usually `https://yourdomain.com/wp-admin`).
2. Log in with your administrator credentials.

***

### 🧩 Step 2: Install the “WPCode” Plugin

1. In the left-hand menu, navigate to **Plugins → Add New**.
2. In the search bar, type **“WPCode”** (by WPBeginner — previously known as WBCoast).
3. Click **Install Now**, then **Activate** once the installation is complete.

***

### 💻 Step 3: Open the “Code Snippets” Section

1. After activation, you’ll see a new menu item labeled **Code Snippets** or **WPCode**.
2. Click **Code Snippets → Add New**.
3. Choose **Add Your Custom Code (New Snippet)**.

***

### 🧠 Step 4: Create a New JavaScript Snippet

1. Set a name for your snippet (e.g., **klink.cloud AI Agent Live Chat**).
2. In the **Code Type** dropdown, select **JavaScript Snippet**.
3. Copy your **AI Agent Live Chat JavaScript Code** from your **klink.cloud dashboard**.
4. Paste the code into the code editor area in WPCode.

***

### 🛠️ Step 5: Configure Snippet Settings

1. Under **Insertion**, choose **Auto Insert**.
2. Select **Site-Wide Header** (this ensures the live chat widget loads on every page).
3. Review to make sure all settings are correct.

***

### 💾 Step 6: Save and Activate the Snippet

1. Click **Save Snippet**.
2. Toggle the snippet to **Active** (Enable).
3. Then click **Update**.

***

### ✅ Step 7: Verify Installation

1. Visit your website in a new browser tab.
2. You should see the **AI Agent Live Chat Widget** appear at the bottom-right corner of your website.
3. If it doesn’t appear:
   * Clear your site and browser cache.
   * Make sure the snippet is **enabled** and **set to load in the header**.
   * Confirm that the JavaScript code copied from klink.cloud is correct.

***

### 🎉 You’re Done!

Your **klink.cloud AI Agent Live Chat Widget** is now successfully installed on your WordPress website.\
Visitors can now interact with your **AI Agent** or human support team directly through the live chat widget.

***

#### 🧾 Notes

* Ensure your website uses **HTTPS** so the chat widget loads securely.
* Any updates you make to the AI Agent settings inside **klink.cloud** will automatically apply to the widget.
* To temporarily disable the widget, toggle **Active → Inactive** in WPCode.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.klink.cloud/getting-started/setup-channels/live-chat/live-chat-on-wordpress.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.