> 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.