Introduction to Custom CSS in SalesIQ Live Chat

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

In SalesIQ, the live chat widget is composed of two main components:
  1. Chat Widget (Float/Button) - The icon or button users see on your website.
  2. Chat Window - The full chat interface that opens when a visitor clicks the chat widget.

Customize the CSS for the Chat Widget

To modify the appearance of the chat widget (float/button):
  1. From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalization > Stickers and you will many of customization options for your SalesIQ chat widget.
  2. However, if you want to customize the widget with CSS, add your custom CSS directly to your website's stylesheet.
  3. These changes will apply to the widget as it appears on your website.

Customize the CSS for the Chat Window

To customize the look of the chat window (the chat interface that opens after the widget is clicked):
  1. From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalization > Appearance and you will many of customization options for your SalesIQ chat window.
  2. However, to edit the chat window with custom CSS, upload your CSS file in the Appearance section of SalesIQ.
  3. Once uploaded, the changes will automatically apply to the chat window.
Idea
Click here to refer the sample CSS to customize the chat window. 


Using the broswer developer tools, you can easily change or add custom CSS and preview them. Then, you can save this as a .css file and upload them in the brand settings. 

Steps to Customize Chat Window Styles Using Browser Developer Tools

Each browser will have it's own set of developer tools to edit/customize the CSS. Here are the steps to add custom CSS for the Google chrome and Safari browser. 
Google Chrome Browser
  1. Open the live chat widget and right-click (or double-tap on the touchpad) to access the menu.
  2. Click Inspect to access the browser's developer tools, this will open the developer tools panel, allowing you to interact with and modify the web page's elements.

  1. In the developer toolbar, click the mouse pointer icon to enable select an element.

  1. Hover over the chat widget and click to highlight the specific element you want to modify.
  2. Once selected, you'll see the element's attributes, such as data-zsqa="elementname", its class (class="...styling"), and ID (id="...functionality").

  1. Copy the attribute (data-zsqa="elementname") or class for use in your custom styling.
  2. In the Styles tab, click the plus (+) icon to create a new style rule.

  1. Replace the default styles with copied attribute or class in the previous step and write custom CSS. Here are some common CSS to change the colour include:
    1. background-color: red !important; – Changes the background color.
    2. color: red !important; – Changes the font color.
    3. font-size: 10px !important; – Adjusts the font size.
    4. display: none !important; – Hides the element.
AlertNote: Always use `!important` to ensure your custom styles override existing styles.

  1. On the right side of the dev tools, find and click on inspect-stylesheet under the Sources tab.
  2. Click on it to open the stylesheet, where you can add additional CSS to customize the chat window further.

By following these steps, you can personalize the chat window's look directly from your browser.

Safari Browser
  • Open the live chat widget and right-click (or double-tap on the touchpad) to access the menu.
  • Click Inspect to access the browser's developer tools, this will open the developer tools panel, allowing you to interact with and modify the web page's elements.

    1. In the developer toolbar, click the mouse pointer icon to enable select an element.

    1. Hover over the chat widget and click to highlight the specific element you want to modify.
    2. Once selected, you'll see the element's attributes, such as data-zsqa="elementname", its class (class="...styling"), and ID (id="...functionality").

    1. Copy the attribute (data-zsqa="elementname") or class for use in your custom styling.
    2. Click the plus (+) icon in the bottom to create a new style rule.

    1. Replace the default styles with copied attribute or class in the previous step and write custom CSS. Here are some common CSS to change the colour include:
      1. background-color: red !important; – Changes the background color.
      2. color: red !important; – Changes the font color.
      3. font-size: 10px !important; – Adjusts the font size.
      4. display: none !important; – Hides the element.
    AlertNote: Always use `!important` to ensure your custom styles override existing styles.

    1. On the right side of the dev tools, find and click on inspect-stylesheet under the Sources tab.
    2. Click on it to open the stylesheet, where you can add additional CSS to customize the chat window further.

    By following these steps, you can personalize the chat window's look directly from your browser.

    After completing your changes, upload the final .css file in the Brand Settings section to apply them.

    Predefined CSS Templates

    To help you get started, we’ve provided sample CSS templates for both the new and old versions of the SalesIQ live chat.

    • Make sure to select the appropriate version for your chat widget.
    • Use the corresponding CSS code to begin your customization process.



        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 ...
                                                                                                                          • Sample CSS on Zoho SalesIQ [Old]

                                                                                                                            Custom CSS - an Overview From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalisation, you will plenty of customization options for your SalesIQ chat widget and window, without touching a line of code. If you are a developer, ...
                                                                                                                          • Integrating Zoho Bookings with Zoho SalesIQ

                                                                                                                            Zoho Bookings in SalesIQ Zoho Bookings is an online tool that your customers can use to book appointments with your experts and specialists to avail your services. When you publish your services on Zoho Bookings, your customers can access this ...
                                                                                                                          • Whisper Chat

                                                                                                                            The whisper chat option on SalesIQ allows you to observe ongoing conversations in stealth mode and, if necessary, send private messages to operators without the visitors' knowledge. These messages or whispers provide instructions or guidance to ...
                                                                                                                            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