> For the complete documentation index, see [llms.txt](https://limechatai.gitbook.io/limechat-product-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://limechatai.gitbook.io/limechat-product-guide/helpdesk/inboxes/live-chat-inboxes/website-widget-setup-guide.md).

# Website Widget Setup Guide

***

### How to Navigate to Widget Settings

{% stepper %}
{% step %}
Go to **LimeChat CRM Settings**
{% endstep %}

{% step %}
Click on **Inboxes**
{% endstep %}

{% step %}
Click on **Website Inbox** (you created)
{% endstep %}

{% step %}
Click on **Edit**
{% endstep %}

{% step %}
Click on **Website Widget** on the Top Navigation Bar
{% endstep %}

{% step %}
Make changes to **Widget Settings**
{% endstep %}
{% endstepper %}

***

### Understanding Elements of Widget

<figure><img src="/files/Yn8qeIMTBqkikK9nMvHh" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/xMaZCkwIJ8sTGP2n6GpA" alt="" width="563"><figcaption></figcaption></figure>

<div><figure><img src="/files/CPbCJauaOjKberL7jDnz" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ZgNQJ7Jh7ivcLsUGVLyX" alt=""><figcaption></figcaption></figure></div>

***

### General Widget Settings

<table><thead><tr><th width="244">Config</th><th>Description</th></tr></thead><tbody><tr><td><strong>Widget Bot Name</strong></td><td>Add a name for the bot (max 20 characters recommended)</td></tr><tr><td><strong>Widget Font</strong></td><td>Options include Lato and Europa</td></tr><tr><td><strong>Welcome Heading</strong></td><td>Textual message, recommended max length of 50 characters</td></tr><tr><td><strong>Welcome Tagline</strong></td><td> Textual message, recommended max length of 50 characters</td></tr><tr><td><strong>Widget Background Color</strong></td><td>Primary widget color (customizable for branding)</td></tr><tr><td><strong>Chat Background Color</strong></td><td>Secondary widget color (customizable for branding)</td></tr><tr><td><strong>Widget Image</strong></td><td>Add an image link (50x50 pixels recommended)</td></tr><tr><td><strong>Bot Avatar</strong></td><td>Add an image link for the bot avatar (50x50 pixels recommended)</td></tr><tr><td><strong>Widget Z-Index</strong></td><td>Allows layering of the widget (default: 2147 48 3000)</td></tr><tr><td><strong>Reply Time</strong></td><td>Options include "In a few minutes," "In a few hours," "In a day," or "None"</td></tr><tr><td><strong>Agent Offline Status</strong></td><td>Enable/Disable option</td></tr><tr><td><strong>Unread Message Display</strong></td><td>Show unread messages and count when the widget is closed (Yes/No)</td></tr><tr><td><strong>Input Field Capabilities</strong></td><td>File Picker / Emoji Picker / Restart Button</td></tr></tbody></table>

***

### Website Widget for Mobile Settings

<table><thead><tr><th width="180">Config</th><th>Description</th></tr></thead><tbody><tr><td><strong>Widget Type</strong></td><td>Choose between Icon and Button (Recommended - Icon)</td></tr><tr><td><strong>Widget Position</strong></td><td>Left or Right (Recommended - Right for natural thumb position)</td></tr><tr><td><strong>Widget Size</strong></td><td>Small, Medium, or Large (Recommended - Small or Medium)</td></tr><tr><td><strong>Button Message</strong></td><td>Add a pop-up text (max 20 characters recommended)</td></tr><tr><td><strong>Margins</strong></td><td>From Bottom: 36 pixels recommended<br>From Left/Right: 36 pixels recommended</td></tr></tbody></table>

***

### Website Widget for Desktop Settings

<table><thead><tr><th width="180">Config</th><th>Description</th></tr></thead><tbody><tr><td><strong>Widget Type</strong></td><td>Choose between Icon and Button </td></tr><tr><td><strong>Widget Position</strong></td><td>Left or Right (Recommended - Right for natural thumb position)</td></tr><tr><td><strong>Widget Size</strong></td><td>Small, Medium, or Large (Recommended -  Medium or Large)</td></tr><tr><td><strong>Button Message</strong></td><td>Add a pop-up text (max 20 characters recommended)</td></tr><tr><td><strong>Margins</strong></td><td>From Bottom: 48 pixels recommended<br>From Left/Right: 48 pixels recommended</td></tr></tbody></table>

***

### Popup Message Settings

<table><thead><tr><th width="180">Config</th><th>Description</th></tr></thead><tbody><tr><td><strong>Position</strong></td><td>Top or Left Side (Recommended - Top)</td></tr><tr><td><strong>Pop-Up Text</strong></td><td>Add a pop-up message (max 60 characters recommended)</td></tr><tr><td><strong>Pop-Up Image</strong></td><td>Add an image link (50x50 pixels recommended)</td></tr><tr><td><strong>Pop-Up Delay</strong></td><td>Add a delay in seconds (recommended range: 2-5 seconds)</td></tr></tbody></table>

***

## FAQ'S

<details>

<summary>Can I configure different settings for mobile and desktop widgets?</summary>

Yes, LimeChat allows separate customization for **Website Widget for Mobile** and **Website Widget for Desktop** to ensure an optimal user experience on both platforms.

</details>

<details>

<summary>Can I preview the widget settings before applying changes?</summary>

Yes, LimeChat provides a preview option to see how the widget will look on both mobile and desktop before saving your changes.

</details>

<details>

<summary>How do I disable the widget temporarily without deleting it?</summary>

You can toggle the widget off in the **General Widget Settings** section without removing the setup, allowing you to enable it again later.

</details>

<details>

<summary>Is there a way to track user interactions with the widget?</summary>

LimeChat provides analytics on widget interactions, including chat initiations, response rates, and user engagement trends.

</details>