> For the complete documentation index, see [llms.txt](https://so9.gitbook.io/so9-guidebook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://so9.gitbook.io/so9-guidebook/so9-crm/13.-guide-to-chat-widget-setup.md).

# 13. Guide to Chat Widget setup

This section provides the steps to set up the Chat Widget.

The **Chat Widget** is a chat window embedded directly on your business website, allowing customers to send messages while browsing the site.

To set up the Chat Widget, follow these steps:

<mark style="color:red;">**Step 1:**</mark> On the SO9 CRM screen, select ***More > Message Permisssions***

<figure><img src="https://1121310069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1taSbCVfzo5vozIaPALl%2Fuploads%2FBRvB9z6ODvcmFlf1Bvcl%2FScreenshot%202026-07-28%20110118.png?alt=media&amp;token=c33d8af7-947f-4585-808e-b8a132e8cce8" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**Step 2:**</mark> Connect the **Chat Widget** channel.

<figure><img src="https://1121310069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1taSbCVfzo5vozIaPALl%2Fuploads%2FKTOT1ypPYlXncHeYvApA%2FScreenshot%202026-07-28%20110147.png?alt=media&amp;token=6e9fd2e0-96dc-45ec-b6c5-4249ba57d28a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1121310069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1taSbCVfzo5vozIaPALl%2Fuploads%2Fowh96jHrYrfrlDTMaBj0%2FScreenshot%202026-07-28%20110159.png?alt=media&amp;token=7f707c63-a5c7-4d4e-a6a5-970c6e40cdaf" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1121310069-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1taSbCVfzo5vozIaPALl%2Fuploads%2FRYNwTJPrmIigxqWOYbQ9%2FScreenshot%202026-07-28%20110232.png?alt=media&amp;token=833bd6f3-c87f-4b23-aa1d-3a4c80e34501" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**Step 3:**</mark> Configure chat widget display

**1. Button display style** The system supports 3 button styles: round, horizontal, and vertical. Choose the style that best fits your website.

**2. Button size and position** You can customize: position (left/right), height, width, and bottom margin on website/mobile to match the display interface.

**3. Colors** Select the primary color and text color for the chat button.

**4. Button icon** Choose an icon for the Chat Widget button. You can select a pre-built icon or upload your own image.

**5. Animation effects and notifications**

* Animation effects: Turn on/off movement effects for the chat button.
* Notifications: Turn on/off notifications when there is a new message from a customer.

**6. Chat widget avatar**

* Display name: Enter the brand name or display name.
* Avatar image: Select a suitable profile image.

**7. Conversation window height** You can adjust the display height of the chat window on each device.

* Mobile height: Set the conversation window height when displayed on mobile.
* Website height: Set the conversation window height when displayed on desktop.

<mark style="color:red;">**Step 4:**</mark> Configure chat widget form

**1. Language** Select the language version displayed on the form.

**2. Form title** Enter the text that guides customers to provide their information.

**3. Contact forrm** Set up fields such as Name, Phone Number, Email. You can add more fields by selecting **Add information** (text, number, paragraph, multiple choice).

**4. Frequently asked questions**&#x20;

You can set up suggested questions for customers to quickly select when starting a conversation.

* Show Questions: Turn on/off the display of the question list outside the chat window.
* Question List:
  * Enter the content of frequently asked questions.
  * You can add or delete questions as needed.

**5. Auto open and send message**&#x20;

These settings help increase interaction with customers when they visit the website.

* Auto open chat window: Turn on/off the feature that automatically opens the chat window when a customer visits the website.
* Welcome message:
  * Turn on/off automatic welcome message.
  * Set the sending time (e.g., after 5 seconds).

**6. Additional information** Display additional information about the business or support staff so customers can easily understand.

Then, click ***Save and Get Code***.

To display the Chat Widget on your website, you need to embed the **\<script>** code provided by SO9 into the **\<body>** tag of your website’s HTML code.