Customize your SalesIQ live chat with Custom CSS and blend it with your website design

Customize your SalesIQ live chat with Custom CSS and blend it with your website design

Hi everyone. Hope you all are having a great day!

SalesIQ offers various inbuilt customization choices for your chat widget and window like changes in colour, theme, font etc. Although these choices are many, sometimes they may not match with the design of your website. For such cases, we offer the Custom CSS feature which will allow you to customize, modify and change the appearance and feel of every aspect of your SalesIQ live chat widget and window on your website.
In this post, we will be talking about some necessary pointers on how you can write and implement Custom CSS for your requirements. We have also included a few tips and sample CSS for frequently asked queries.

Building your CSS

For ease of understanding, we have broken down all of the structural modules of the chat window and given the field names and their basic CSS in our detailed user guide here. Using this, you will be able to build your CSS code for individual parts of the module and then apply it, according to your specific requirements.

Where do I place the CSS code? 

There are 2 methods to carry out Custom CSS on SalesIQ. Both methods are used for varying circumstances. 

  1. Brand Personalization - The first method is by uploading the Custom CSS file in the Personalization area of the chat widget. This method is to be used when changes/modifications are to be made on the elements within the chat window. For example, changes in the messaging area, font used within the chat window, colour changes for the header or minimize button etc.

For this,

  • Navigate to Settings > Brands > Personalization > Appearance tab.
  • Scroll down to Upload custom CSS and click on Upload.


  • Choose the required CSS file from the list.
  • The preview window on the right will immediately display the result of adding your Custom CSS code to SalesIQ.
In this case, CSS for changing the header colour was added.

  1. Website Style sheet

In this method, the CSS needs to be uploaded directly to a website's style sheet. This method is used when changes are required outside of the chat window. For example, sizing changes of the chat window, position and colour changes of the chat widget etc.


In this case, a Custom CSS for changing the height and width of the chat window has been added to the style sheet.

Tips for writing Custom CSS

  1. The !important rule in CSS can be used to add more weightage to a property and override other previously added styling rules.

  2. Extra CSS weightage can be added with a body tag, which will be another way to override all previous styling rules for the element.


Frequently asked CSS formats 

We have taken note of some of the frequently asked queries and provided the custom CSS code here for your reference.

  • To change the header colour of the chat window.

  1. body header {
  2.     background: #e2bb3c !important;
  3. }

  • To change the chat window dimensions on website.

  1. body .zsiq-newtheme.siqembed.zls-sptwndw {
  2. height: 500px !important;
  3. width: 400px !important;
  4. }

  • To change the chat widget colour.

  1. body .zsiq_flt_rel {
  2. background-color: #e2bb3c !important;
  3. }

  • To change the chat window dimensions on mobile alone.

  1. @media only screen and (min-width: 100px) and (max-width: 555px)
  2. {
  3. body .zsiq-newtheme.zsiq-mobhgt.siqembed {
  4. height: 80% !important;
  5. width: 80% !important;
  6. }
  7. }

  • To move the position of the chat widget.

  1. body .zsiq_floatmain {
  2. right: 40px !important;
  3. bottom: 40px !important;
  4. }
Thank you for reading through. We hope you found this post helpful. If you have any questions, please drop a comment and our team will be happy to help you.

      • Recent Topics

      • How to change the format for phone numbers?

        Mobile phone numbers are currently formatted (###) ###-####.  How can I change this to a more appropriate forms for Australia being either #### ### ### or (#)### ### ###?

      • Unattended Access on Android without Play Store

        I'm testing Zoho Assist for remote config and maintenance of our IoT devices. The devices are running Android 8.1 and do NOT have Google Play Store installed, nor can it be installed. I've been able to install Zoho Assist on the devices and load the enrollment

      • Open Sans Font in Zoho Books is not Open Sans.

        Font choice in customising PDF Templates is very limited, we cannot upload custom fonts, and to make things worse, the font names are not accurate. I selected Open Sans, and thought the system was bugging, but no, Open Sans is not Open Sans. The real

      • Is it possible to embed Zoho Bookmarks in the Cliq sidebar?

        Is there any way that each Zoho user can access their bookmarks (that live in https://bookmarks.zoho.eu/ which is technically a part of Zoho Mail) directly within Cliq? As a widget, or an item in the sidebar? My team does not use Mail, it uses Cliq all

      • Show Attachments in the customer portal

        Hi, is it possible to show the Attachments list in the portal for the particular module? Bests.

      • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

        Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.

      • Navigate with Ease: Announcing Improvements to Your Zoho CRM for Everyone's Setup Experience

        Hello Everyone, We’re thrilled to announce new enhancements to the Setup Menu in our Zoho CRM for Everyone system, designed to simplify your workday and streamline your overall experience. What's New? Addition of a Setup Homepage Faster Search in Setup

      • Zoho Projects Webhook fails with HTTP Error 0

        Hello Zoho Community, I am pulling my hair out over this one. I have setup a very basic http(s) server that always responds "ok" and code 200 to incoming GET requests. It will accept any parameters, and any path. Really, all it does is say "ok," and log

      • ZOHO Campaignで表のカラムの幅を調整したい。

        表を作成した際、個々のカラムの幅を調整したいのですが、方法が分かりません。 どなたかご存じの方ご教示ください。

      • Auto-upload Creator Files to WorkDrive

        Hi everyone, I’m working on a workflow that uploads files from Zoho Creator to specific subfolders in Zoho WorkDrive, as illustrated in the attached diagram. My Creator application form has two multi-file upload fields, and I want—on successful form submission—to

      • Exciting Updates to the Kiosk Studio Feature in Zoho CRM!

        Hello Everyone, We are here again with a series of new enhancements to Kiosk Studio, designed to elevate your experience and bring even greater efficiency to your business processes. These updates build upon our ongoing commitment to making Kiosk a powerful

      • Kaizen #129 : Client Script Support for Blueprints

        Hello everyone! Welcome to another week of Kaizen. Today, let us discuss about how you can use Client Script during a Blueprint transtion to meet your requirements. This Kaizen post will provide solution for the post - Need non-mandatory fields in blueprint

      • Search Bar Improvement for Zoho Commerce

        Hey everyone, I've been using Zoho Commerce for a bit now, and I think the search bar could really use an upgrade. Right now, it doesn't show products in a dropdown as you type, which would make finding items a lot faster. On Shopify, for example, you

      • Making digital signatures accessible to all: Introducing accessibility controls in Zoho Sign

        Hi there! At Zoho Sign, we are committed to building an inclusive digital experience for all our users. As part of our ongoing efforts to align with Web Content Accessibility Guidelines (WCAG), we’re updating the application with support that will go

      • Account Owner Field From Accounts Module to be Displayed in Contacts module

        I have a field in the Accounts Module in the CRM called "Account Owner" i want that field to be also mapped into the Contacts Module custom single line field called "Account Manager".

      • Update a field in the ZOHO Form, basis numeric value in another field in the same form

        I am trying to create a questionnaire in ZOHO, where clients need to answer 10 questions, and basis response, values are assigned. I have created a total score field where the sum of the values is stored. But i am unable to create a rule whereby another

      • How to update "Lead Status" to more than 100 records

        Hello Zoho CRM, How do I update "Lead Status" to more than 100 records at once? To give you a background, these leads were uploaded or Imported at once but the lead status record was incorrectly chosen. So since there was a way to quickly add records in the system no matter how many they are, we are also wondering if there is a quicker way to update these records to the correct "Lead Status". I hope our concern makes sense and that there will be a fix for it. All the best, Jonathan

      • Meet up de Zoho en Bilbao

        Buenos días comunidad! Estamos estudiando hacer un Meet up en Bilbao desde zoho y varios Partners. Para que la experiencia sea excelente, queremos saber cuantas pesonas se vendrían a Bilbao al evento. Y para que sea lo mas útil posible, que temas dentro

      • Picklist reference value in REST

        picklist options can be configured to have a different reference value than the displayed one, should be helpful in things like multilanguage: https://help.zoho.com/portal/en/kb/crm/customize-crm-account/translations/articles/translations is there a way

      • In Zoho inventory Converting sales return to cerdit note from using Api from Creator Error details: {"code":-1,"message":"Invalid Sales Return ID."}

        In Zoho inventory Converting sales return to cerdit note from using Api from Creator Error details: {"code":-1,"message":"Invalid Sales Return ID."} this is button Function used in the Creator map Inventory.Create_Credit_note(int CRE_ID) { return_value

      • Marketing Tip #2: Recover lost sales with abandoned cart emails

        Did you know most online shoppers don’t complete checkout? Automated cart recovery emails are an easy way to bring them back. A simple reminder can recover sales you’d otherwise lose. Try this today: Enable abandoned cart emails in Zoho Commerce and set

      • Billing Management: #9 Usage Billing in IoTs

        We live in a world where connectivity has become a lifestyle rather than a luxury. From smart thermostats that adjust your home's temperature to GPS trackers monitoring end-to-end fleets and sensors that optimize energy grids, the Internet of Things has

      • {"code":1038,"message":"JSON is not well formed"}

        Today this began failing: sales_order_data = zoho.books.createRecord("salesorders",books_organization_ID,order_data); with this error message. {"code":1038,"message":"JSON is not well formed"} This code has been running for two years. Here is the input

      • How can I migrate Shared Mailbox from Zoho Mail to Team Inbox?

        I am unable to migrate mails from my shared mailbox in Zoho Mail to Team Inbox. I am the super admin of my Zoho One plan and yet I am getting an error saying only admins can do this? I don't understand the issue.

      • Remember all the ways we've posted?

        The world celebrates World Postal Day in 2025 with the theme “#PostForPeople: Local Service. Global Reach". The story of the “post” is a story of human connection itself, evolving from simple handwritten notes carried over long distances to instant digital

      • Can no longer upload my own Notebook cover

        I've had Notebook for over a year and have been able to create my own notebook covers, but when I tried to upload my own cover for a new notebook today, the upload feature has suddenly been starred, requiring me to upgrade my account. When did this

      • Zoho Desk - Cannot Invite or Register New User

        Hi who may concern, we encountered a problem that we cannot invite user or the visitor cannot register for a user at all through our help center portal, with the snapshot shown as below and the attachement. It always pops up that "Sorry, Unable to process

      • Custom domain issue

        I recently changed records for my support area custom domain for a few months, I then wanted to come back to Zoho, but now I can't connect it and I can't login as it's having an SSL issue. I cannot get a good response from support, as I've been notified

      • How do you generate personalized certificates and save them in dynamic folders using Writer's mail merge?

        Zoho Writer's mail merge feature can help you enhance the certificate management process. It's a great way to save time and effort! Merge certificates and maintain a well-organised repository with personalised certificates stored in separate folders for

      • Zoho Editor

        Zoho PDf Editor is not working I am clicking on EDIT PDf then it again bringing me back to the same page. again and again.

      • The present is a "present"

        The conversation around mental health has been gaining attention in recent years. Even with this awareness, we often feel stuck; the relentless pace of modern life makes us too busy to pause, reflect, and recharge. In the world of customer support, this

      • Market cap

        Market cap formula?? Kaise nikale

      • Mail and OS

        Jai Hind! Zoho is doing good by creating good software (made in india) on par with other tech giants. 🥰 Suggestion: 1. Whenever we sign up on zoho mail its asking for other mail id. It shouldn't be like that. You should ask general details of a user

      • Need Help to setup plugs along with codeless bot buidler. To send sms OTPs to users via Zoho Voice and to verify it

        Need Help to setup plugs along with codeless bot buidler. To send sms OTPs to users via Zoho Voice and to verify it. I get leads from our website and we need to make sure those are not junk. So we are using proactive chat bot and we need mobile OTPs to

      • Direct Integration Between Zoho Cliq Meetings and Google Calendar

        Dear Zoho Team, We’d like to submit the following feature request based on our current use case and the challenges we’re facing: 🎯 Feature Request: Enable meetings scheduled in Zoho Cliq to be automatically added to the host's Google Calendar, not just

      • Zoho sheet

        Unable to share zoho sheet with anyone on internet with editer option only view option is show

      • Personal account created under org account

        Hi there, I am Jayesh. We are using ME Central, and we have an account by the email ID soc@kissht.com.. Now I have created a personal account., jayesh.auti@zohomail.in, accidentally. Can you help me to remove this jayesh.auti@zohomail.in from my organization

      • Add another account

        How to add another mail account to my zoho mail.

      • Recover deleted user

        Hi by mistake i have deleted an added user and his email associated. Please help me recover it thank you.

      • No connection to the server

        Hello! I can't add a new email address to my mailbox because your server is rejecting me. Please help. I took and added a screenshot of this problem Marek Olbrys

      • Next Page