Customize live chat widget and window - Zoho SalesIQ

How to customize the live chat widget and window?

Customizing the SalesIQ Live Chat Widget and Window allows you to match your website's look and feel and also allows businesses to align their chat interface with their brand identity and improve user engagement. This guide provides step-by-step instructions on customizing the chat widget's appearance, behaviour, and settings.

    

How to setup your SalesIQ chat window home page ?

Setup visitor engagement modes

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Homepage > Visitor engagement modes.
  2. Select the engagement modes you want your visitors to contact you from the website for help. You can choose between Chat or Call, or you can choose to display both.
    1. Chat: Visitors can initiate a chat from the website for help(The call option can be displayed inside the chat window after the chat is initiated.)
    2. Call: Visitors can connect on a voice call for help.

Chat window message 

You can add a welcome message or an impactful line that describes your brand better for a little intro for the visitors before they connect with your operators. 
  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Homepage >  Chat window message.
  2. You can configure for both when your operators are available to assist the visitors in the Brand online content and when no one is available to assist in the Brand offline content.

 Display company logo in the homepage

You can also display the company logo in the chat widget to make it a part of your branding.
  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Homepage >  Display company logo.
  2. Enable the toggle button to add the company logo in the homepage of the chat window.
Notes
The logo you upload in the company profile section will be displayed here. 

How to customize the color of your chat widget and chat window color?

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Customize.
  2. You can pick a color for your chat widget & window and check how it will appear on your website in the preview window. You can blend the chat widget with your website color or have a contrast yet a color that goes well with your website for the visitors to spot where they should head for help. 

Display company logo  in the chat window

You can also choose to display the company logo in the chat window to make it a part of your branding.
  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Customize and enable the Display company logo option to display the logo in the chat window.
Notes
The company logo uploaded in the company section will be displayed here. 

How do you customize the appearance of your chat widget?  

The float live chat widget is a handy way to attract visitors' attention throughout your pages without intruding into their on-page experience. It "floats" along with your visitors' browsers, even as they scroll down. You can customize the coin float widget to suit your website and business requirements.

Hide widget message 

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Chat widget > Hide widget message.
  2. You can hide the message displayed along with the widget and display only the coin if you think it interrupts the flow or want to maintain a subtle presence.

Custom Sticker 

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Chat widget > Custom sticker.
  2. You can also display a custom sticker instead of the coin widget. It can be any image of the mentioned dimension, but before you use a custom sticker, choose a sticker that blends with your brand and also demonstrates help to visitors when they need it. 

Widget message - Online 

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat widget > Widget message - Online.
  2. You can display a message that complements your website content and lets visitors know that your operators are available to help them with their queries. 

Widget message - Offline 

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat widget > Widget message - Offline.
  2. You can display a message to let website visitors know that they are visiting the site outside business hours and that the operator is unavailable. 

Include operator image 

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Chat widget > Include operator image.
  2. You can also display the operator's image on the coin so that visitors know whom they're talking to. 

Hide widget on mobile browser 

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat widget > Hide widget in mobile browser.
  2. You can enable this option if you wish to hide the widget on the website if visitors access it from a mobile browser. 

Hide widget when offline 

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat widget > Hide widget when offline.
  2. You can also choose to hide the widget from the website outside of business hours.  

Widget position on website  

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Chat widget > Widget position.
  2. You can set the widget in two different positions on your website: Left-down corner and Right-down Corner. Choose whichever position increases your website's visibility.   

How do you customize the appearance of your Chat Window?   

Seasonal theme in Chat window

The seasonal themes section allows you to customize the chat window appearance based on the festival, making it more lively during the festive season. 
  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat widow > Seasonal Theme
  2. You can choose a theme and mention the start and end dates for it to be displayed in the window.
 

Choose a theme for your chat window

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Chat widow > Choose a theme for your chat window.
  2. You can choose a theme and click Save.

Choose the size of your chat window  

  1. You can choose the size of your chat window that best fits your website design.
  2. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat widow > Choose a size for your chat window.
  3. You can choose your chat window size between Medium  & Large according to your website needs.
Notes
Choosing the chat window size does not apply to mobile browsers. The chat window size on mobiles is based on the screen size.

Display operator profile picture on connecting

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Chat widow > Display operator profile picture on connecting.
  2. You can choose to display the profile picture of the operators in the chat window while they connect with the visitors to give a personal touch. 

Allow visitors to mute sound notification

  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Chat widow > Allow visitors to mute sound notification
  2. By enabling this option, you can restrict the sound notifications actions like muting the sound notification of the visitors in the chat window. 

Use Customized CSS to change the appearance of the chat window  

  1. To change the appearance of the chat window with your Custom CSS file.
  2. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Chat widow > Upload custon CSS
  3. Select Old or new,( If you are using the old chat window then choose Old, If you are using the new chat window choose New) and click Save.
  4. You can get a live preview of your CSS on the preview chat window on the right-hand side.
NotesRefer to our Custom CSS guide and try customizing your chat window.

Personalizing self-service knowledge base

A Knowledge Base comprised of helpful support articles and FAQs (Frequently Asked Questions) allows visitors to search for and access relevant content to address their needs. By displaying your Knowledge Base in the chat window, visitors can quickly search the available resources for answers without waiting to chat with an operator, significantly reducing demands on your customer support team and increasing satisfaction.

Configuring Articles  

By configuring and personalizing your Knowledge Base, you can provide a tailored self-service experience for your visitors. Displaying relevant resources in the visitor's language of choice and optimizing discoverability through categorization helps ensure that visitors can quickly find answers to their questions, reducing demands on your support team and elevating customer satisfaction.
To display articles on your knowledge base:
  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Knowledgebase > Articles
  2. Now, you can personalize your articles section in your visitor chat window.
    1. 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.
    2. Set up default language for articles: When no articles are available in the visitor's language, articles from the default language will be displayed to the visitor. If disabled, when no articles are available for the visitor's language, the articles section will be hidden.
    3. Author info: Display the author's name and profile picture to the visitor when viewing the article.
    4. Article Feedback: Enable visitors to provide feedback on knowledge base articles.
    5. Combine departments: Group articles by department in the chat window. Once visitors switch to the Knowledge Base section, they will see the different public departments in your SalesIQ portal.
    6. Categorize articles: Display the articles based on the categories. This helps users find required resources more efficiently.

Configuring FAQs

To display FAQs on your knowledge base:
  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call > Knowledgebase > FAQs.
  2. Now, you can personalize your articles section in your visitor chat window.
    1. 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.
    2. Set up default language for FAQs: When no articles are available in the visitor's language, articles from the default language will be displayed to the visitor. If disabled, when no articles are available for the visitor's language, the articles section will be hidden.
    3. Author info: Display the author's name and profile picture to the visitor when viewing the FAQs.
    4. Article Feedback: Enable visitors to provide feedback on added FAQs.
    5. Combine departments: Group articles by department in the chat window. Once visitors switch to the Knowledge Base section, they will see the different public departments in your SalesIQ portal.
    6. Categorize FAQs: Display the FAQs based on the categories. This helps users find required resources more efficiently.

Change the chat window Language/Font  

Language

By default, your website chat window will use the language available on your website. You can change the language for the chat window here as you require. This option will be helpful if you have multiple websites for different countries with different languages.
  • Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Language/Font.
  • Select a language from the drop-down and click Save.
  • If you do not find the language you want or wish to change it to match your website, choose the Website Language option at the top of the drop-down menu.

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  

Like Language, the chat window uses the website font by default. However, you can also change the font to match your preference.
Select your desired font in the Language/Fonts tab under the Chat Window Font section and click Save.

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:
  1. Arabic
  2. Hebrew

Arabic

To get Arabic language display for the chat window on your website,
  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Language/Font
  2. Under 'Choose a language for your chat window', choose Arabic. Click on Save to save the settings.

  1. 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,
  1. Navigate to Settings > Brands > Choose a brand > Personalization > Chat & Call  > Language/Font
  2. Under 'Choose a language for your chat window', choose Hebrew.
  3. Click on Save to save the settings.


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




      Create. Review. Publish.

      Write, edit, collaborate on, and publish documents to different content management platforms.

      Get Started Now


        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 CRM Training
            Redefine the way you work
            with Zoho Workplace

              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 CRM Training

                Create, share, and deliver

                beautiful slides from anywhere.

                Get Started Now


                  Zoho Sign now offers specialized one-on-one training for both administrators and developers.

                  BOOK A SESSION







                              Quick LinksWorkflow AutomationData Collection
                              Web FormsEnterpriseOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceAccessible Forms
                              Digital FormsMarketingForms for Small Business
                              HTML FormsEducationForms for Enterprise
                              Contact FormsE-commerceForms for any business
                              Lead Generation FormsHealthcareForms for Startups
                              Wordpress FormsCustomer onboardingForms for Small Business
                              No Code FormsConstructionRSVP tool for holidays
                              Free FormsTravelFeatures for Order Forms
                              Prefill FormsNon-Profit
                              Intake FormsLegalMobile App
                              Form DesignerHRMobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic Forms
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsEncrypted Forms

                              Secure Forms

                              WCAG

                                      Create. Review. Publish.

                                      Write, edit, collaborate on, and publish documents to different content management platforms.

                                      Get Started Now






                                                        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.




                                                            Manage your brands on social media

                                                              Use cases

                                                              Make the most of Zoho Desk with the use cases.

                                                               
                                                                

                                                              eBooks

                                                              Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho Desk.

                                                               
                                                                

                                                              Videos

                                                              Watch comprehensive videos on features and other important topics that will help you master Zoho Desk.

                                                               
                                                                

                                                              Webinar

                                                              Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                                               
                                                                
                                                              • Desk Community Learning Series


                                                              • Meetups


                                                              • Ask the Experts


                                                              • Kbase


                                                              • Resources


                                                              • Glossary


                                                              • Desk Marketplace


                                                              • MVP Corner

                                                                Zoho Sheet Resources

                                                                 

                                                                    Zoho Forms Resources


                                                                      Secure your business
                                                                      communication with Zoho Mail


                                                                      Mail on the move with
                                                                      Zoho Mail mobile application

                                                                        Stay on top of your schedule
                                                                        at all times


                                                                        Carry your calendar with you
                                                                        Anytime, anywhere




                                                                              Zoho Sign Resources

                                                                                Sign, Paperless!

                                                                                Sign and send business documents on the go!

                                                                                Get Started Now




                                                                                        Zoho TeamInbox Resources





                                                                                                  Zoho DataPrep Demo

                                                                                                  Get a personalized demo or POC

                                                                                                  REGISTER NOW


                                                                                                    Design. Discuss. Deliver.

                                                                                                    Create visually engaging stories with Zoho Show.

                                                                                                    Get Started Now









                                                                                                                        • Related Articles

                                                                                                                        • Customize your SalesIQ Chat window with new Personalized 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 ...
                                                                                                                        • Sample CSS for SalesIQ Live Chat [New]

                                                                                                                          Overview of Custom CSS From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalization, you will have plenty of customization options for your SalesIQ chat widget and window without touching a line of code. If you are a ...
                                                                                                                        • Introduction to Custom CSS in SalesIQ Live Chat

                                                                                                                          Every business has its own unique brand identity, reflected through specific colors, fonts, and layouts. To maintain consistency and enhance the customer experience, you can customize the CSS of the SalesIQ live chat widget to match your business ...
                                                                                                                        • 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 ...
                                                                                                                          Wherever you are is as good as
                                                                                                                          your workplace

                                                                                                                            Resources

                                                                                                                            Videos

                                                                                                                            Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                            eBooks

                                                                                                                            Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                            Webinars

                                                                                                                            Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                            CRM Tips

                                                                                                                            Make the most of Zoho CRM with these useful tips.



                                                                                                                              Zoho Show Resources