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.



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


    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


            Get started with Zoho Sign

            in a few quick steps!

            Download Help Guide





                        Still can't find what you're looking for?

                        Write to us:  support@zohoforms.com


                              




                            

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



                                                    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











                                                                                      • Related Articles

                                                                                      • Integrating Whatsapp Channel with SalesIQ

                                                                                        Integrating WhatsApp business with your SalesIQ helps you handle all the chat conversations in your SalesIQ dashboard. Let your visitors contact you from the convenient channel, and your operators can handle the chat from their SalesIQ chat window ...
                                                                                      • Getting started with Zoho SalesIQ

                                                                                        Zoho SalesIQ is a simple, quick-to-implement, efficient tool that allows you to chat with your website visitor. You can actively engage with your website visitor proactively and reactively using live chat widgets, triggers, and much more. SalesIQ has ...
                                                                                      • Integrating Zoho Analytics with SalesIQ

                                                                                        Overview What is Zoho Analytics? Zoho Analytics is a self-service BI and data analytics software that lets you visually analyze your data, create stunning data visualizations and discover hidden insights in minutes. Zoho Analytics in SalesIQ When you ...
                                                                                      • HIPAA compliance with Zoho SalesIQ

                                                                                        The Health Insurance Portability and Accountability Act (including the Privacy Rule, Security Rule, Breach notification Rule, and Health Information Technology for Economic and Clinical Health Act) ("HIPAA"), requires Covered Entities and Business ...
                                                                                      • Integrating Zoho Desk with Zoho SalesIQ

                                                                                        Zoho Desk in SalesIQ Zoho Desk is a customer service software that uses the power of customer context to improve agent productivity, promote self-service, manage cross-functional service processes, and increase customer happiness. When integrating ...
                                                                                      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