Custom CSS on Zoho SalesIQ

Custom CSS on Zoho SalesIQ

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, however, you might prefer to write your own code instead of using our custom design controls. In this case, you can upload your Custom CSS file in the Change Chat Window Appearance with Custom CSS File section, which can be found in the Chat Window sections.

Here, we have broken down all of the structural elements of the module and given you the field names and their CSS. Using which, you can apply CSS to individual parts of the module. For example, you could apply custom CSS directly to a header, or create your own footer in the Chat window using this CSS. 


Chat window Header

You can change the look and feel of the chat window header.

CSS:
  1. header
  2. {
  3. }

Example:

  1. header {
  2. height: 80px !important
  3. }

You can use your company logo in the chat window header using this CSS. You can also customize the height and width of the logo to suit the chat window. 

CSS:
  1. .siq-company-logo
  2. {
  3. }

Example:

  1. .siq-company-logo {
  2. border-radius: 15px !important
  3. }

Chat attender name

You can change the display, font and color of the Chat Attender name using this CSS.

CSS:
  1. .siq-chat-attender-name 
  2. {
  3. }

Example:

  1. .siq-chat-attender-name {
  2. color: black !important;
  3. }

Chat attender description

You can change the display, font and color of the chat attender description using this CSS.

CSS:
  1. .siq-about-me
  2. {
  3. }

Example:

  1. .siq-about-me { 
  2. color: darkgray !important;
  3. }

Chat window - closing icon

You can change the look and feel of the chat window closing icon using this CSS.

CSS:
  1. .siq-close-icon:before
  2. {
  3. }

Example:

  1. .siq-close-icon:before { 
  2. color: black !important;
  3. }

You can change the style, appearance, color of the chat window footer using this CSS.

CSS:
  1. footer
  2. {
  3. }

Example:

  1. footer {
  2. background-color: lightgray !important;
  3. }

Message Sending button 

You can customize the message sending button according to your website design and needs using this CSS.

CSS:
  1. .siq-send-button,
  2. .siq-send-button:before{
  3. }

Example:

  1. .siq-send-button,
  2. .siq-send-button:before {
  3. color: green !important;
  4. }

Chat window - Minimize icon

You can change the look and feel of the chat window minimize icon using this CSS.

CSS:
  1. .siq-minimize-icon:before
  2. {
  3. }

Example:

  1. .siq-minimize-icon:before { 
  2. color: black !important;
  3. }

Subscribing to Newsletter section

You can reform the section related to setting up the subscribe checkbox for subscribing Newsletters in the chat widget.

CSS:
  1. .siq-newsletter
  2. {
  3. }

Example:

  1. .siq-newsletter {
  2. background: #ccc !important;
  3. }

Check box - Subscribing to Newsletter section

You can change the style, appearance, color of the subscribe to newsletter section's - check box in the chat window using this CSS.

CSS:
  1. .siq-checkbox
  2. {
  3. }

Example:

  1. .siq-checkbox {
  2. color: cadetblue !important;
  3. }

Label - Subscribing to Newsletter section

You can change the style and font of the subscribe to newsletter section's - label in the chat window using this CSS.

CSS:
  1. .siq-checkbox-label em
  2. {
  3. }

Example:

  1. .siq-checkbox-label em {
  2. color: red !important;
  3. }

Messaging area

Modify the messaging area in the chat window. You can change the appearance of the text, include color to the text, font, font-size and much more using this CSS. 

CSS:
  1. .siq_content
  2. {
  3. }

Example:

  1. .siq_content {
  2. background: #dedede57 !important;
  3. }

Visitor text message typing area

Modify the visitor text typing area in the chat window using this CSS. 

CSS:
  1. .siq-message-textarea
  2. {
  3. }

Example:

  1. .siq-message-textarea {
  2. background: #eee !important;
  3. }

Operator typing status

Using this CSS, you can modify the operator typing status that will be displayed to the visitors in the chat window.

CSS:
  1. .siq-typing-message
  2. {
  3. }

Example:

  1. .siq-typing-message {
  2. color: darkgray !important;
  3. }

Messaging area - Menu

You can change the appearance of the messaging area - menu in the chat window using this CSS.

CSS:
  1. .siq-menu:before
  2. {
  3. }

Example:

  1. .siq-menu:before {
  2. color: gray !important;
  3. }

Visitor chat ending button

You can modify the messaging area - visitor chat ending button using this CSS.

CSS:
  1. .siq-end-chat-button:before
  2. {
  3. }

Example:

  1. .siq-end-chat-button:before {
  2. color: gray !important;
  3. }

Emojis section

You can modify the emojis and smileys section in the text message area of the chat window using this CSS.

CSS:
  1. .siq-smileys-section
  2. {
  3. }

Example:

  1. .siq-smileys-section { 
  2. background: #eee !important;
  3. }

Individual emoji

You can change the appearance of individual emoji in the input area of the chat window using this CSS.

CSS:
  1. .siq-smileys
  2. {
  3. }

Example:

  1. .siq-smileys { 
  2. background: #eee !important;
  3. }

Emoji icon

You can change the appearance of the messaging area - emoji icon in the chat window using this CSS.

CSS:
  1. .siq-smiley-icon
  2. {
  3. }

Example:

  1. .siq-smiley-icon { 
  2. box-shadow: 0 0 1px !important;
  3. border-radius: 5px !important;
  4. }

URL sharing section

You can modify the URL sharing section look and feel, font, font-size and much more here.

CSS:
  1. .siq-share-url
  2. {
  3. }

Example:

  1. .siq-share-url { 
  2. color: red !important;
  3. }

Visitor input area

You can change the visitor input area like the drop-down and the text box here.



Drop down - Visitor input area

You can change the appearance of the choosing department drop-down field in the visitor input area using this CSS.

CSS:
  1. .siq-dropdown
  2. {
  3. }

Example:

  1. .siq-dropdown {
  2. background-color: #d6c8c8 !important;
  3. }

Text box - Visitor input area

You can change the appearance of the text box field in the visitor input area using this CSS.

CSS:
  1. .siq-input-text-box
  2. {
  3. }

Example:

  1. .siq-input-text-box {
  2. color: darkgray !important;
  3. }

Text message field -  Visitor input area

You can change appearance, look and feel, font, and font size of the text message field in the visitor input area using this CSS.

CSS:
  1. .siq-message-area
  2. {
  3. }

Example:

  1. .siq-message-area {
  2. border-radius: 30px !important;
  3. overflow: hidden !important;
  4. }

Cancel button - Visitor input area

You can change the appearance and color of the cancel button in the visitor input area of the chat window using this CSS.

CSS:
  1. .siq-cancel-button
  2. {
  3. }

Example:

  1. .siq-cancel-button { 
  2. background-color: red !important;
  3. color: #fff !important;
  4. }

Update button - Visitor input area

You can change the appearance, text and color of the update button in the visitor input area of the chat window using this CSS.

CSS:
  1. .siq-update-button
  2. {
  3. }

Example:

  1. .siq-update-button { 
  2. background-color: green !important;
  3. }

Mandatory fields option - Visitor input area

You can modify the mandatory option in the visitor input section of the chat window using this CSS.

CSS:
  1. .siq-required
  2. {
  3. }

Example:

  1. .siq-required { 
  2. border-color: green !important;
  3. }

Rating and feedback section

You can modify the rating and feedback section look and feel, font, buttons and much more here.

CSS:
  1. .siq-feedback-section
  2. {
  3. }

Example:

  1. .siq-feedback-section { 
  2. background: #eee !important;
  3. }

Chat rating icon

You can modify the appearance of the chat rating icon using this CSS.

CSS:
  1. body .reaction_ico {}

Example:

  1. body .reaction_ico {
  2.     background-image: url (https://img.zohocdn.com/salesiq/images/reactions_36f94_.png) !important;
  3. }
  4. .sad_icon {
  5.     background-position: 0 0 !important;
  6. }
  7. .happy_icon {
  8.     background-position: -88px 0 !important;
  9. }
  10. .neutral_icon {
  11.     background-position: -44px 0 !important;
  12. }


Feedback text area

You can modify the feedback section's text area look and feel, font, buttons and much more here.

CSS:
  1. .siq-feedback-textarea
  2. {
  3. }

Example:

  1. .siq-feedback-textarea { 
  2. box-shadow: 0 0 13px #c7a8a8 !important;
  3. }

Information banner

You can change the appearance, font and color of the information banner in the chat window using this CSS.

CSS:
  1. .siq-info-banner
  2. {
  3. }

Example:

  1. .siq-info-banner { 
  2. color: red !important;
  3. }

Timer - information banner

You can change the appearance of the information banner - timer in the chat window using this CSS.

CSS:
  1. .siq-info-timer,
  2. .siq-info-timer:before {
  3. }

Example:

  1. .siq-info-timer,
  2. .siq-info-timer:before {
  3. color: gray !important;
  4. }

Info banner in the messaging area

You can change the look and feel, borders and text of the info banner that appears in the messaging area of the chat window using this CSS.

CSS:
  1. .siq-info-message
  2. {
  3. }

Example:

  1. .siq-info-message { 
  2. color: darkgray !important;
  3. }

Send e-mail section

You can change the appearance, font, font style and color of the send email section available in the menus of the chat window using this CSS.

CSS:
  1. .siq-send-email-section
  2. {
  3. }

Example:

  1. .siq-send-email-section { 
  2. box-shadow: 0 0 20px #988d8d !important;
  3. }

Send e-mail - text input field

You can change the appearance, font, font-size and color of the menu - send e-mail - text input field in the chat window using this CSS.

CSS:
  1. .siq-send-email-input
  2. {
  3. }

Example:

  1. .siq-send-email-input { 
  2. color: #7d2222 !important;
  3. }

Operator message section

You can change the look and feel, font, font-size and color of the operator message section in the chat window using this CSS.

CSS:
  1. .siq-agntmsg
  2. {
  3. }

Example:

  1. .siq-agntmsg { 
  2. background: #eee !important;
  3. border-radius: 10px !important;
  4. }

Operator name - message section

You can change the look and feel, font, font-size and color of the operator name in the message section of the chat window using this CSS.

CSS:
  1. .siq-user-name
  2. {
  3. }

Example:

  1. .siq-user-name { 
  2. color: darkgray !important;
  3. }

Operator message

You can change the look and feel, font, font-size and color of the operator message in the chat window using this CSS.

CSS:
  1. .siq-user-message
  2. {
  3. }

Example:

  1. .siq-user-message { 
  2. color: #00b3ff !important;
  3. }

Visitor message section

You can change the look and feel, font, font-size and color of the visitor message section in the chat window using this CSS.

CSS:
  1. .siq-visitmsg
  2. {
  3. }

Example:

  1. .siq-visitmsg { 
  2. background-color: #eee !important;
  3. }

Visitor's messaging time

You can modify the appearance of the visitor's message time in the messaging area of the chat window using this CSS.

CSS:
  1. .siq-message-time
  2. {
  3. }

Example:

  1. .siq-message-time { 
  2. color: #312727 !important;
  3. }

Visitor name - message section

You can change the look and feel, font, font-size and color of the visitor's name in the message section of the chat window using this CSS.

CSS:
  1. .siq-visitor-name
  2. {
  3. }

Example:

  1. .siq-visitor-name { 
  2. color: darkgray !important;
  3. }

Visitor message

You can change the look and feel, font, font-size and color of the visitor message in the chat window using this CSS.

CSS:
  1. .siq-visitor-message
  2. {
  3. }

Example:

  1. .siq-visitor-message { 
  2. color: aqua !important;
  3. }

Attachment section

You can change the look and feel, borders of the attachment section in the chat window using this CSS.

CSS:

  1. .siq-file-attach
  2. {
  3. }

Example:

  1. .siq-file-attach { 
  2. height: 100px;
  3. }

File attached in the chat window

You can change the look and feel, borders of the file attached in the chat window using this CSS.

CSS:
  1. .siq-file-icon
  2. {
  3. }

Example:

  1. .siq-file-icon { 
  2. background-color: #5d8db3 !important;
  3. }

Image attached in the chat window

You can change the look and feel, borders of the image attached in the chat window using this CSS.

CSS:
  1. .siq-attach_image
  2. {
  3. }

Example:

  1. .siq-attach_image { 
  2. filter: grayscale(1) !important;
  3. }

Image drag-drop section

You can modify the appearance of the image drag-drop section here.

CSS:
  1. .siq-dragdrop-mask
  2. {
  3. }

Example:

  1. .siq-dragdrop-mask { 
  2. background-color: #eee !important;
  3. padding-top: 8px !important;
  4. }

Image preview - comment section

You can modify the appearance of the image preview - comment section using this CSS.

CSS:
  1. .siq-comment-textarea
  2. {
  3. }

Example:

  1. .siq-comment-textarea { 
  2. background-color: #eee !important;
  3. }

Image preview section

You can modify the appearance of the image preview section using this CSS.

CSS:
  1. .siq-image-preview
  2. {
  3. }

Example:

  1. .siq-image-preview { 
  2. box-shadow: 0 0 21px #a2a2a2 !important;
  3. }

Attachment uploading in the chat window

You can change the look and feel, borders of the image/file attachment upload progressing in the chat window using this CSS.

CSS:
  1. .siq-file-progress
  2. {
  3. }

Example:

  1. .siq-file-progress { 
  2. box-shadow: 0px 0 21px #e0b8b8 !important;
  3. }


    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
        Start your free trial

          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










                                        Zoho Pagesense Resources

                                            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 Survey Resources
                                                Features
                                                Survey Templates
                                                Integrations
                                                Community
                                                iOS Mobile Surveys
                                                Pricing
                                                Android Mobile Surveys
                                                Insurvey Blogs
                                                Insight Blogs
                                                Tips & Tricks


                                                Manage your brands on social media
                                                Access Zoho Social


                                                  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


                                                            Features

                                                            Form Templates

                                                            Customers

                                                            Mobile Forms

                                                            Pricing

                                                            Integrations

                                                            Blogs

                                                            Ebooks

                                                            Tips & Tricks

                                                            Community

                                                            Terms of Use

                                                            Secure your business
                                                            communication with Zoho Mail
                                                            Get started


                                                            Mail on the move with
                                                            Zoho Mail mobile application
                                                            Go Mobile

                                                              Stay on top of your schedule
                                                              at all times
                                                              Get started


                                                              Carry your calendar with you
                                                              Anytime, anywhere
                                                              Get started


                                                                Latest Announcements


                                                                    Zoho Sign Resources

                                                                      What's new
                                                                      Help Guide
                                                                      Solutions Guide
                                                                      API
                                                                      Blogs
                                                                      FAQ's
                                                                      Legal Guide
                                                                      Forums
                                                                      Webinars

                                                                      Sign, Paperless!

                                                                      Sign and send business documents on the go!

                                                                      Get Started Now


                                                                          Zoho SalesIQ Resources


                                                                              Zoho TeamInbox Resources



                                                                                    Latest Feature Updates

                                                                                      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






                                                                                                    Latest Feature Updates



                                                                                                            Latest Feature Updates

                                                                                                              • Related Articles

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

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

                                                                                                              • Integrating Whatsapp Channel with SalesIQ

                                                                                                                Integrating your WhatsApp business with SalesIQ helps you handle your business' chat conversations on your SalesIQ dashboard. When a user messages your business on WhatsApp, you will receive that message right within your SalesIQ dashboard, allowing ...

                                                                                                              • SalesIQ for Zoho Forms

                                                                                                                Zoho forms is a software solution that let's you create visually appealing forms easily with a no-code online form builder, for all your data collection needs. Integrating Zoho SalesIQ with Zoho Forms will allow you to receive the data collected on ...

                                                                                                              • 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 ...
                                                                                                                Bootcamp
                                                                                                                Community
                                                                                                                Pricing
                                                                                                                Webinars
                                                                                                                What's New
                                                                                                                Integrations
                                                                                                                Contact Support
                                                                                                                Contact Sales
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace
                                                                                                                Workplace on mobile

                                                                                                                  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