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

# Live Chat

How to Install Web Chat Widget on Your Website or Mobile App

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`

{% hint style="info" %}
**How whitelisted domains work**

* **Leave the list empty** to allow the widget on any website.
* **Add domains** to allow only those sites. The check uses the website address reported by the visitor's browser, which a web page can't fake.
* `www.` is optional: `salaryhero.com` also covers `www.salaryhero.com`.
* To allow all subdomains, add `*.salaryhero.com`. This covers `shop.salaryhero.com` and `app.salaryhero.com`, but not `salaryhero.com` itself, so add that too if you need it.
* The in-app chat page (`chat.klink.cloud/app`) always works, including inside mobile apps, without being listed.
* On a site that isn't allowed, the widget doesn't load, and the browser console shows `[KLinkChat] This site … is not in the channel's whitelisted domains.`
  {% endhint %}

***

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

***

### 📎 Sharing Files

Visitors can attach one file per message, up to **150 MB**, using the paperclip icon. Agents receive the file in the klink.cloud inbox.

| Shown to agents as | File types                                                                       |
| ------------------ | -------------------------------------------------------------------------------- |
| Image              | jpg, jpeg, png, gif, bmp, webp, svg                                              |
| Video              | mp4, mov, avi, mkv, webm                                                         |
| Audio              | mp3, wav, m4a, aac, ogg                                                          |
| File               | pdf, doc, docx, xls, xlsx, ppt, pptx, txt, csv, rtf, odt, ods, odp, zip, rar, 7z |

* **Cancel an upload:** while a file is uploading, the send button turns into **✕ Cancel upload**.
* **If an upload fails** (for example on a weak connection), the visitor's message and file stay in the input box. They can simply tap send again.
* **"Not delivered":** if a message couldn't be passed to your team, it shows **"Not delivered. Please send it again."** instead of the delivered ticks.

***

### 🧪 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.
4. Send a test file (for example a PDF) and check that it appears in the 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)