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


            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

                                                                                                  • 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 ...
                                                                                                  • Integrating Whatsapp Channel with SalesIQ

                                                                                                    Integrating WhatsApp business with your SalesIQ helps you handle your business' WhatsApp chat conversations on your SalesIQ dashboard. Let your visitors contact you from the convenient channel, and your operators can handle the chat from their ...
                                                                                                  • 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 ...
                                                                                                  • 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 ...
                                                                                                  • Payment gateways for SalesIQ-Checkout Integration

                                                                                                    The following are the list of payment gateways supported on SalesIQ. Each payment gateway has its own flow for configurations. Stripe Authorize.Net 2Checkout PayPal Forte Razorpay Paytm PayTabs Note The payment gateway list provided in the Add ...
                                                                                                    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