# Live Chat

This guide walks you through the steps to install the **Web Chat** widget on your website or mobile app using the klink.cloud platform.

{% embed url="<https://www.loom.com/share/97e32031b5274be5aff9b656bdd28f06?sid=e65b943b-b6f5-46e1-b39f-09a7299c470d>" %}

***

### 📌 Step-by-Step Instructions

#### 1. Navigate to Web Chat Setup

* Log in to your klink.cloud account.
* Go to **Integrations** > **Messaging Integration**.
* Select **Web Chat**.

***

#### 2. Create a New Web Chat Widget

* Enter a **name** for your Web Chat instance (e.g., “SalaryHero Website”).
* Add your **whitelisted domain(s)** (without `http://` or `https://`) to restrict where the widget can be embedded.

> Example:\
> `salaryhero.com`\
> `www.salaryhero.com`

***

#### 3. Customize Widget Appearance

* **Greeting Text:**\
  Customize the welcome message shown to users (e.g., “Hi, welcome! How can I assist you today?”).
* **Placeholder Text:**\
  Optional – you can use a placeholder like “Ask me anything.”
* **Logo Upload:**\
  Upload your brand logo to personalize the chat widget.
* **Bot Display Name:**\
  Set your AI assistant name (e.g., “SalaryHero AI Assistant”).
* **Theme Color:**\
  Set a theme color for your widget using HEX color codes (e.g., `#832015`).
* **Agent Name (Chat Bar):**\
  This name will appear in the chat bar (e.g., “SalaryHero Agent”).

***

#### 4. Optional: Add Privacy Policy

* Toggle the **Privacy Policy** option if you want to display an acceptance link before chat starts.
* Insert the URL to your privacy policy document.

***

#### 5. Save and Install

* Click **Save** to generate the embed code.
* Copy the generated **JavaScript snippet**.
* Paste it into your website or mobile app's HTML code, just before the closing `</body>` tag.

```html
htmlCopyEdit<script>
  // [Generated Web Chat Script Here]
</script>
```

***

### ✅ What It Looks Like

Once installed, the widget will appear as a chat bubble on your website. All customer messages will be sent to your klink.cloud unified inbox in real-time.

***

### 🧪 Test Before Go-Live

After embedding:

1. Visit your website.
2. Interact with the widget to confirm appearance and functionality.
3. Ensure messages are received correctly in your inbox.

***

### Need Help?

If you need further assistance, please contact our support team at <support@klink.cloud>.

Learn How to Install Live Chat Widget on Shopify Store - [live-chat-on-shopify-store](https://docs.klink.cloud/getting-started/setup-channels/live-chat/live-chat-on-shopify-store "mention")