How to customize the live chat widget and window?

Estimated reading: 8 minutes 19 views

Introduction

Customizing the SalesIQ Live Chat Widget and Window allows you to create a seamless experience that matches your website’s look and feel. This customization is essential for businesses to align their chat interface with their brand identity, making interactions more personal and engaging for visitors. By tailoring the chat widget’s appearance, behavior, and settings, you can significantly enhance user engagement and customer satisfaction. This guide offers step-by-step instructions to help you customize your chat widget and window effectively.

Step-by-Step Instructions

How to Set Up Your SalesIQ Chat Window Home Page

To begin customizing your chat window’s home page, you first need to set up visitor engagement modes. This helps determine how visitors can contact you for assistance on your website.

Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Homepage > Visitor engagement modes.
Here, you can select the engagement modes available to your visitors. You can enable Chat, Call, or both options.
- If you choose Chat, visitors will be able to initiate a chat session directly from your website. The call option can then appear inside the chat window once the chat is underway.
- If you select Call, visitors can connect with you via a voice call directly from the website.

Adding a Chat Window Message

You can set a welcome message to greet your visitors or an impactful line that describes your brand clearly. This message serves as a brief introduction before visitors connect with your operators.

Go to Settings > Brands > Choose a brand > Personalization > Chat & Call > Homepage > Chat window message.
You can customize different messages for when your operators are online and available to assist visitors (online content), as well as when no one is available (offline content).

Displaying Your Company Logo on the Homepage

Incorporating your company logo into the chat widget homepage helps reinforce your branding.

To enable this, navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Homepage > Display company logo.
Toggle the option to enable the display of your company logo in the chat window’s homepage.
The logo that appears is the one you have uploaded in your company profile section.

How to Customize the Color of Your Chat Widget and Chat Window

You can select colors for both your chat widget and chat window to either blend in with your website’s design or stand out for better visibility.

Visit Settings > Brands > Choose a brand > Personalization > Chat & Call > Customize.
Here, you can pick a color and preview how it will look on your website.
Choose colors that either harmonize with your website’s color scheme or provide a contrast that makes the chat feature easy to spot by your visitors.

Display Company Logo in the Chat Window

Similar to the homepage, you can also display your company logo within the chat window itself.

Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Customize.
Enable the Display company logo option to show your logo in the chat window.
Again, this will use the logo uploaded in the company section.

How to Customize the Appearance of Your Chat Widget

The floating live chat widget is a convenient feature that stays visible as visitors scroll through your pages, drawing attention without being intrusive.

To hide the widget message and show only the chat icon (coin), navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat widget > Hide widget message. This is useful if you want a more subtle chat presence.
You can also replace the default chat coin with a custom sticker. Navigate to Custom sticker in the same path and upload an image that suits your brand’s look. Ensure the sticker clearly indicates help availability.
To customize messages that show when your operators are online or offline, use the Widget message – Online and Widget message – Offline options respectively.
If you want visitors to see the operator’s image on the chat widget coin, enable the Include operator image
There’s an option to hide the widget on mobile browsers if you want to avoid cluttering the mobile view.
You can also hide the widget completely when your operators are offline or outside business hours.
Lastly, you can decide the widget’s position on your website either the bottom-left or bottom-right corner depending on what fits best with your page layout.

How to Customize the Appearance of Your Chat Window

The chat window can be personalized extensively to enhance the user experience:

Seasonal Themes: You can set seasonal or festival-themed designs for your chat window. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat window > Seasonal Theme, and select the theme along with the dates when it should be displayed.
Choose a Theme: Apart from seasonal themes, you can select an overall theme for your chat window under Choose a theme for your chat window.
Size Selection: Choose the chat window size that fits your website best either Medium or Large. Note that this size setting applies only to desktop views; mobile chat windows automatically adjust based on screen size.
Operator Profile Picture: Displaying the operator’s profile picture when connecting with visitors adds a personal touch and builds trust.
Allow Visitors to Mute Sound Notifications: You can enable visitors to mute chat notification sounds if they find them distracting.

Using Customized CSS for the Chat Window Appearance

For advanced customization, you can upload your own CSS files to completely control the chat window’s look.

Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat window > Upload custom CSS.
Choose whether you are using the old or new chat window design and upload your CSS accordingly.
A live preview of your changes will appear on the right side, helping you refine the appearance before saving.
Refer to the SalesIQ Custom CSS guide for detailed instructions on CSS customization.

Personalizing the Self-Service Knowledge Base

Including a Knowledge Base in your chat window helps visitors find answers quickly without needing to wait for a live agent.

Configuring Articles:
Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Knowledgebase > Articles.
Here, you can customize the tab name, translate it into multiple languages, and set a default language fallback if no articles exist in the visitor’s language. You can also choose to show the article author’s info and enable visitor feedback on articles.
Grouping articles by department and categorizing them improves discoverability.
Configuring FAQs:
Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Knowledgebase > FAQs.
Similar to articles, you can customize the FAQ tab, translate its name, set default languages, show author info, enable feedback, and categorize or group FAQs for easy access.

Changing the Chat Window Language and Font

By default, your chat window will use the language and font from your website. However, you can override this to better suit visitors from different regions or to match your branding needs.

To change the language, go to Settings > Brands > Choose a brand > Personalization > Chat & Call > Language/Font.
Select the language you want from the dropdown and save.
If your desired language is not listed, you can select Website Language to keep the chat window language in sync with your website’s language.

Languages Supported in SalesIQ’s Chat Window

SalesIQ supports a wide range of languages including English, Norwegian, Catalan, Finnish, Chinese (Traditional and Simplified), Arabic, Hebrew, Japanese, and many more.

This ensures your chat window can communicate effectively with a global audience.

1.	English	✔
2.	Norwegian	✔
3.	Catalan	✔
4.	Finnish	✔
5.	Bulgarian	✔
6.	Chinese (Traditional)	✔
7.	Indonesian	✔
8.	Filipino	✔
9.	Slovak	✔
10.	Slovenian	✔
11.	Czech	✔
12.	Croatian	✔
13.	Thai	✔
14.	Arabic (New) -RTL	✔
15.	Vietnamese	✔
16.	Swedish	✔
17.	Polish	✔
18.	Dutch	✔
19.	Italian	✔
20.	Hungarian	✔
21.	Turkish	✔
22.	Danish	✔
23.	Greek	✔
24.	Portuguese	✔
25.	Russian	✔
26.	Spanish	✔
27.	French	✔
28.	German	✔
29.	Ukranian	✔
30.	Korean	✔
31.	Japanese	✔
32.	Chinese(Simplified)	✔

RTL language support for chat window

Matching the language of the chat window with the language of your visitors is essential for user experience and effective communication. This will contribute towards better engagement, increased trust and a more personalized interaction for your visitors.

Languages supported:

Arabic
Hebrew

Arabic

To get Arabic language display for the chat window on your website,

- Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Language/Font
- Under ‘Choose a language for your chat window‘, choose Arabic. Click on Save to save the settings.

This will change the layout of your chat window and the language to RTL format in Arabic.

Hebrew

To get Hebrew language display for the chat window on your website,

Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Language/Font
Under ‘Choose a language for your chat window’, choose Hebrew.
Click on Save to save the settings.

This will change the layout of your chat window and the language to RTL format in Hebrew.

How to customize the live chat widget and window?

Introduction