# 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](/getting-started/setup-channels/live-chat/live-chat-on-shopify-store.md)


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.