Sample CSS on Zoho SalesIQ [Old]

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

Warning
Note: The below sample CSS is for old SalesIQ live chat. 

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


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







                              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

                                        What's new
                                        Help Guide
                                        Blogs
                                        Forums
                                        Webinars
                                        API
                                        Developers
                                        Build Extensions

                                      Create. Review. Publish.

                                      Write, edit, collaborate on, and publish documents to different content management platforms.

                                      Get Started Now




                                        Zoho Campaigns Resources



                                                    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


                                                              • 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


                                                                      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

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

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

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

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

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