Customize live chat widget and window - Zoho SalesIQ

How to customize the live chat widget and window?

You can now customize the live chat widget and the chat window to match your website's look-and-feel and choose where and how you want them to be displayed to your customers and can connect with them seamlessly.

Choose your widget type

Float Widget

The float live chat widget is a handy way to attract your visitor's attention throughout your pages without intruding into their on-page experience as it "floats" along with your visitor's browser, even as they scroll down.
You can pick your desired float widget from various float widgets available in Zoho SalesIQ. 

Changing the float widget
  1. To choose a different float widget, navigate to Settings > Brands > Your brand > Personalize, select Stickers on the left-hand side menu.
  2. Under Float, pick your desired float widget and click Save.


Button Widget

Place the live chat button in any desired location on your page that could get your customers' attention for immediate access to customer support. You can choose a button style from the many designs that SalesIQ provides out of the box.

Changing the button widget
  1. To choose a different float widget, navigate to Settings > Brands > Your brand > Personalize, select Stickers on the left-hand side menu.
  2. Under Button, pick your desired float widget and click Save.


Upload your custom sticker

If you are not satisfied with the widget designs you get out of the box or need a more personalized widget to better match your brand, you can add your custom sticker using the Upload your sticker option.
  • 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

Grab users' attention and make them engage with you by adding personalized content in your chat widget. 

Customize Online Message

In the Stickers page, scroll down to Chat Widget Message - Online, enter your custom text in the Content and Byline Message, and click Save.



Customize Offline Message

In the Stickers page, scroll down to Chat Widget Message - Offline, enter your custom text in the Content and Byline Message, and click Save.




Change Widget position

Position your chat float widget on the bottom right or left corner according to your preference or website design. By default, the widget is positioned on the bottom right corner, but if your website has important content on the right corner, you can place it on the left side. 

  • 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

The themes will come with the predefined colors out of the box. Sometimes the color might not match your website's image. So you can change the color of the chat window and widget by changing color to match your website.

  • 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

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.
  1. Navigate to Settings > Brands > Your brand name > Configurations > Channels and turn on the Knowledge base option for the desired channels.


Articles

To display articles on your knowledge base:
  • 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.

  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: 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

  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 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.

  6. Categorize articles: Display resources by defined categories in SalesIQ. This helps users find required resources more easily.

FAQs

To display FAQs on your Knowledge base:
  • 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.

  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: 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

  3. Author info: Display the author's name and profile picture to the visitor when viewing the FAQ.

  4. FAQ feedback: Enable visitors to provide feedback on knowledge base FAQs.

  5. 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.

  6. Categorize FAQs: Display resources by defined categories in SalesIQ. This helps users find required resources more easily.

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.

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

Like Language, the chat window uses the website font by default. You can change the font of the chat window as well to match your preference. 
  1. In the Language/Fonts tab, select your desired font 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. From the SalesIQ dashboard, navigate to Settings > Choose your brand > Personalisation.

  1. Click on Language/Font on the left side panel.

  1. Under 'Choose a language for your chat window', choose Arabic.

  1. 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. From the SalesIQ dashboard, navigate to Settings > Choose your brand > Personalisation.


  1. Click on Language/Font on the left side panel.


  1. Under 'Choose a language for your chat window', choose Hebrew.


  1. 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.



    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








                                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

                                      Zoho Desk Resources

                                      • Desk Community Learning Series


                                      • Digest


                                      • Functions


                                      • Meetups


                                      • Kbase


                                      • Resources


                                      • Glossary


                                      • Desk Marketplace


                                      • MVP Corner


                                      • Word of the Day


                                        Zoho Marketing Automation

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







                                                                                            You are currently viewing the help articles of Sprints 1.0. If you are a user of 2.0, please refer here.

                                                                                            You are currently viewing the help articles of Sprints 2.0. If you are a user of 1.0, please refer here.



                                                                                                  • Related Articles

                                                                                                  • 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 ...
                                                                                                  • Click to Call on SalesIQ chat window

                                                                                                    Click-to-call customer support is a convenient feature that lets website visitors initiate a phone call with a support representative by simply clicking a button within a website or chat interface. The call option on the chat window allows visitors ...
                                                                                                  • Live Chat Integration with Google Analytics

                                                                                                    Overview Integrate Zoho SalesIQ with Google Analytics and track almost all the prime Zoho SalesIQ related actions and events right away from your Google Analytics dashboard. Integrate Zoho SalesIQ with Google analytics and track how your live chat ...
                                                                                                  • 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  ...
                                                                                                    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