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 Links Workflow Automation Data Collection
                                Web Forms Enterprise Begin Data Collection
                                Interactive Forms Workplace Data Collection App
                                CRM Forms Customer Service Accessible Forms
                                Digital Forms Marketing Forms for Small Business
                                HTML Forms Education Forms for Enterprise
                                Contact Forms E-commerce Forms for any business
                                Lead Generation Forms Healthcare Forms for Startups
                                Wordpress Forms Customer onboarding Order Forms for Small Business
                                No Code Forms Construction RSVP tool for holidays
                                Free Forms Travel
                                Prefill Forms Non-Profit

                                Intake Forms Legal
                                Mobile App
                                Form Designer HR
                                Mobile Forms
                                Card Forms Food Offline Forms
                                Assign Forms Photography
                                Mobile Forms Features
                                Translate Forms Real Estate Kiosk in Mobile Forms
                                Electronic Forms

                                Notification Emails for Forms Alternatives Security & Compliance
                                Holiday Forms Google Forms alternative  GDPR
                                Form to PDF Jotform alternative HIPAA Forms
                                Email Forms
                                Encrypted Forms
                                Embeddable Forms
                                Secure Forms
                                Drag & drop form builder
                                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


                                                              • Desk Community Learning Series


                                                              • Digest


                                                              • Functions


                                                              • Meetups


                                                              • Kbase


                                                              • Resources


                                                              • Glossary


                                                              • Desk Marketplace


                                                              • MVP Corner


                                                              • Word of the Day


                                                              • Ask the Experts


                                                                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 ...
                                                                                                                        • Desktop apps for SalesIQ

                                                                                                                          The SalesIQ Desktop apps are available on the App Store on Mac as well as the Microsoft store on Windows. These can be downloaded from the respective stores to get the the SalesIQ experience right to your desktop. Mac Downloading the SalesIQ app from ...
                                                                                                                          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