How to customize the live chat widget and window?
Choose your widget type
Float Widget
- To choose a different float widget, navigate to Settings > Brands > Your brand > Personalize, select Stickers on the left-hand side menu.
- Under Float, pick your desired float widget and click Save.
Button Widget
- To choose a different float widget, navigate to Settings > Brands > Your brand > Personalize, select Stickers on the left-hand side menu.
- Under Button, pick your desired float widget and click Save.
Upload your custom sticker
- In the Stickers page, click on the Upload your sticker option on the top right corner.
- You can either drag and drop your sticker or pick a image from your computer.
Note: The sticker must be a square image, the recommended image dimension is a minimum of 50 x 50 pixels, and the maximum size is 1MB.
Change the content displayed in the chat widget
Customize Online Message
Customize Offline Message
Change Widget position
- In the Stickers page, scroll to the Widget position section, choose the side you want to place the chat widget, and click Save.
Customizing the Chat Window Appearance
You can do the following customizations to your chat window:
- Choose the Appearance of the chat window according to website needs.
- Hand-pick a color of your choice for the chat window that suits your website.
- Display your company logo in the chat window.
- Show the profile picture of the operator while connecting with the visitor on chat.
- Redesign the window appearance completely with your Custom CSS File.
Where do I customize the appearance of the chat window?
- In Settings > Brands > Your brand name > Personalize, navigate to Appearance on the left-hand side menu.
- Now you can pick from one of the themes available. Click Save after you select your predefined theme.
Change the color of the chat window
- In Settings > Brands > Your brand name > Personalize, navigate to Appearance on the left-hand side menu.
- Scroll down to Pick A Color For Your Chat Window and choose a color from the list or use the color picker to select your desired color.
- You can either give the color code or pick a color from the color palette in the color picker.
- You can have an instant chat window preview on the right side of the screen. The colors you choose will reflect on the window.
Choose the size of your chat window
- In Settings > Brands > Your brand name > Personalize, navigate to Appearance on the left-hand side menu.
- Scroll down to Choose A Size For Your Chat Window. You can choose your chat window size between Small & Large according to your website needs.
Note: Choosing the chat window size is not applicable to mobile browsers. The size of the chat window on mobiles is based on the screen size.
Is it possible to use a Customized CSS file to change the appearance of the chat window?
Yes, it is possible to change the appearance of the chat window with your Custom CSS file. Refer to our Custom CSS guide and try customizing your chat window.
- In Settings > Brands > Your brand name > Personalize, navigate to Appearance on the left-hand side menu.
- Scroll down to Upload Custom CSS, click the upload button, pick the CSS file from your computer, and click Save.
- You can we a live preview of your CSS on the preview chat window on the right-hand side.
Personalizing self-service knowledge base
- Navigate to Settings > Brands > Your brand name > Configurations > Channels and turn on the Knowledge base option for the desired channels.
Articles
Navigate to Settings → Brands → Your brand name → Personalization. Switch to the Knowledge base section. Click on the Articles tab, and click on the toggle to enable.
Now, you can personalize your articles section in your visitor chat window.
Tab name: Customize the name of the article tab in the visitor chat window. You can translate the tab name into other languages by selecting the "Translate Name" option and entering the preferred names for respective languages.
Set up default language for articles: On setting up the default language, when there are no articles available in the visitor's language, articles from the default language will be displayed to the visitor. If disabled, when there are no articles available for the visitor's language, then the articles section will be hidden
Author info: Display the author's name and profile picture to the visitor when viewing the article.
Article feedback: Enable visitors to provide feedback on knowledge base articles.
Combine departments: Group articles in the chat window by the department. Once visitors switch to the Knowledge Base section, they will see the different public departments in your SalesIQ portal.
Categorize articles: Display resources by defined categories in SalesIQ. This helps users find required resources more easily.
FAQs
Navigate to Settings → Brands → Your brand name → Personalization. Switch to the Knowledge base section. Click on the FAQs tab, and click on the toggle to enable.
Now, you can personalize your FAQs section in your visitor chat window.
Tab name: Customize the name of the FAQs tab in the visitor chat window. You can translate the tab name into other languages by selecting the "Translate Name" option and entering the preferred names for respective languages.
Set up default language for FAQs: On setting up the default language, when there are no FAQs available in the visitor's language, FAQs from the default language will be displayed to the visitor. If disabled, when there are no FAQs available for the visitor's language, then the FAQs section will be hidden
Author info: Display the author's name and profile picture to the visitor when viewing the FAQ.
FAQ feedback: Enable visitors to provide feedback on knowledge base FAQs.
Combine departments: Group FAQs in the chat window by the department. Once visitors switch to the Knowledge Base section, they will see the different public departments in your SalesIQ portal.
Categorize FAQs: Display resources by defined categories in SalesIQ. This helps users find required resources more easily.
Change the chat window Language/Font:
Language
By default, your webisite chat window will take up the language available on your website. You can change the language for the chat window here as per your requirement. If you have multiple websites for different countries with different languages, then this option will be helpful for you.
- From your SalesIQ dashboard, navigate to Settings > Brands > Your brand name > Personalize,
- Click on Language/Font on the left side panel.
- Select a language from the drop-down and click Save.
- If you do not find the language you are looking for or wish to change it according to your website, choose the Website Language option at the top of the drop-down.
Languages supported in SalesIQ's website chat window
S. No | Language | Chat window support |
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 | Greek | ✔ |
22 | Danish | ✔ |
23 | Turkish | ✔ |
24 | Spanish | ✔ |
25 | Russian | ✔ |
26 | Portuguese | ✔ |
27 | Ukranian | ✔ |
28 | German | ✔ |
29 | French | ✔ |
30 | Japanese | ✔ |
31 | Chinese(Simplified) | ✔ |
32 | Korean | ✔ |
Font
- In the Language/Fonts tab, select your desired font under the Chat Window Font section, and click Save.
RTL language support for chat window
- Arabic
- Hebrew
Arabic
- From the SalesIQ dashboard, navigate to Settings > Choose your brand > Personalisation.
- Click on Language/Font on the left side panel.
- 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
- From the SalesIQ dashboard, navigate to Settings > Choose your brand > Personalisation.
- Click on Language/Font on the left side panel.
- 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.
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
Zoho Sheet Resources
Zoho Forms Resources
Zoho Sign Resources
Sign, Paperless!
Zoho TeamInbox Resources
Zoho DataPrep Resources
Design. Discuss. Deliver.
Related Articles
Personalize your SalesIQ Chat window with new custom widgets (Beta)
Note: This feature is still in beta version. If need be, changes will be made to the JS API code/format for further refinement of the widgets. Additionally, the widgets JS API will work only on the new SalesIQ live chat. If you are using the older ...How to configure chat window options?
Setup your brand Add a name and description to your brand to make it identifiable and feel more personalized. If you wish to change your brand's name, you can do so by navigating to Settings > Brands > Your Brand > Configurations, Under Name your ...Live Chat integration with Matomo (Piwik)
Integrate Zoho SalesIQ with Matomo and track your live chat events into your open source web analytics platform. Get valuable insights of your website's visitors live chat operation into your Matomo dashboard. Once you have pasted the Zoho SalesIQ ...Live Chat Integration with Google Analytics
Integrate Zoho SalesIQ with Google Analytics to analyse prime Zoho SalesIQ related actions and events on your Google Analytics dashboard. See all interactions of your live chat operations with your visitors and track its effectiveness. Once you have ...How to add live chat widget to WHMCS?
Connect to your webserver via the FTP program of your choice, and navigate to whmcs/template/X, where X is the name of the theme that you are using in WHMCS. Find the file footer.tpl and click on it. From the left side of your cPanel click on ...