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

    • Introducing the Employee Portal for internal job posting

      Employee referrals and internal applications are one of the most trusted hiring channels. But in many organizations, employees only hear about openings through messages, word of mouth, or after the role has already been open for a while. When employees

    • Inspection Table

      Hello Latha, We created a job sheet that includes the new table (Inspection Table) which was introduced recently. However, agents are not able to see the rows in the inspection table. Could you please investigate this issue and get back to us? Please

    • Zoho Mail is down?

      We stopped getting new emails since 8:42am EST and mail.zoho.com shows an error.

    • Forwarding without verification

      Hi, I use Tripit to keep track of all my business travel. I've recently moved over to Zoho and wanted to set up a forwarding rule to send various travel confirmation emails automatically to plans@tripit.com Obviously this is an email address I don't control,

    • Disappearing Mouse cursor in Zoho Mail / Windows 11 (Chrome + Edge)

      I'm seeing an issue when writing mails with the light theme with the mouse cursor being white and the document area also being white - making it nearly impossible to see the mouse cursor. I see the problem on Windows 11 under Chrome and Edge. (Yet to

    • Request to unblock user creation error (This user is not allowed to add in Zoho)

      Hello Zoho Support Team, I am the Super Admin of my Zoho Mail organization. When I try to create a new business email user account, I encounter the following error message: "This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com

    • Zoho Mail account blocked after malware incident – request for review and unblock

      Hi Zoho team and community, My Zoho Mail account has been blocked due to outgoing email activity that was detected as spam or unusual sending behavior. The root cause was a malware infection on my computer, which compromised several of my accounts, including

    • creating an alias

      your instructions for creating an alias are wrong. there is no add alias in my mail account. also i dont have a control panel link just a settings link how do i really make an alias

    • IP Address blocked by many servers

      hello team this is to inform you that the zoho ip address 103.117.158.51 has been marked spam and not trustworthy by outlook and many other company servers. kindly discontinue using this ip to maintain a healthy domain reputation for your clients. Regards

    • Automatically set the default VAT percentage on a quote

      Every time I create a quote, I have to manually adjust the VAT and activate the checkbox for 21%. But all of our quotes include 21% VAT. So now occasionally, it happens that the checkbox is forgotten, and the customer receives an incorrect quote (without

    • What's New in Zoho Inventory | June 2026

      Hello users, June 2026 introduces a range of exciting enhancements to Zoho Inventory. With the full rollout of the Zoho Inventory Windows application, the launch of Terminal Payments, and new tracking combinations in Advanced Inventory Tracking, you can

    • Time Zone is incorrect

      Time zone is not working properly...I've checked it twice.  I'm eastern U.S. time it's currently 12:22 pm EST.  CRM shows 3:22 pm EST.

    • Send a converted Contact or Deal back to Leads using the Restore Lead extension for Zoho CRM

      Hello everyone, This comes up more than people expect: a Lead gets converted into a Contact, and sometimes a Deal along with it, because at the time it looked ready. Then the situation changes the opportunity turns out to be much further off than expected,

    • Zoho CRM mobile updates: Reports module, record tags, dynamic formula field, and more

      Hello everyone, We've made a few updates to the Zoho CRM mobile app to enhance your mobile CRM experience and efficiency. Here's a quick look at what's new: Reports module (iOS ) Record tags (iOS) Dynamic formula field (Android) WhatsApp business deep

    • Side scroll bar missing from "new editor"

      The "new editor" simply lacks a side scroll bar. Unable to navigate long notes without using the keyboard. Bad upgrade... (using web version)

    • Zoho Desk MCP doesn't expose all functions

      Hello, I'd like to be able to draft (rather than send) ticket replies using Claude Cowork. However, the Zoho Desk MCP doesn't currently offer that, despite it being available in the API (https://desk.zoho.com/DeskAPIDocument#Threads#Threads_DraftEmailReply).

    • Zoho Community Digest - July 2026 | Part 1

      Hello everyone! Keeping up with everything across the Zoho ecosystem is a lot, so we're bringing back the Zoho Community Digest, now weekly. Each week we round up the need-to-know announcements from the Zoho Community Forums, four editions a month, so

    • Canva Integration

      Hello! As many marketing departments are streamlining their teams, many have begun utilizing Canva for all design mockups and approvals prior to its integration into Marketing automation software. While Zoho Social has this integration already accomplished,

    • Feature Suggestion for Zoho Social: Auto-reply to Comments or Keywords

      Hi Zoho team, I'd like to suggest a very specific feature that would be extremely helpful for customer engagement: the ability to automatically send a reply to comments on posts — either all comments or those containing specific keywords. For example,

    • Format of data after export to spreadsheet

      Dear Zoho, can you explain to me what is the point of a report exporting to XLSX if the format of the amounts that will be created there is in text format and not suitable for anything? Why do I need data in a sheet with which nothing more can be do

    • Bring more clarity to your blueprints with color-coded transitions

      As your hiring processes evolve, blueprints naturally become more detailed. When multiple transitions connect different stages, it can take extra effort to identify approvals, rejections, reviews, and other actions at a glance. With this enhancement,

    • Zoho CRM gets a new email compose and lot more

      Dear Customers,  [UPDATE October 21, 2021: We have started opening these features to some of the customers already. And, it will be available to all the customers before November 2nd Week, 2021. Sorry for the delay caused]  [UPDATE February 21, 2022:

    • Create modules using natural language prompts

      Hello all, We’ve introduced a new enhancement to Zia that allows you to create custom and team modules in Zoho CRM using plain language prompts. Why this enhancement? Creating a custom module traditionally involves multiple steps—choosing field types,

    • Automatic Matching from Bank Statements / Feeds

      Is it possible to have transactions from a feed or bank statement automatically match when certain criteria are met? My use case, which is pretty broadly applicable, is e-commerce transactions for merchant services accounts (clearing accounts). In these

    • How emojis shape customer conversations

      World Emoji Day is celebrated on July 17. Did you know that this date was inspired by the 📅 calendar emoji, which shows July 17 on most platforms? What started as a detail in the emoji's design has turned into a global celebration of these tiny emoticons.

    • Custom Button Creation from Layout Editor in Zoho CRM

      Hello All, Buttons in Zoho CRM act as triggers that perform a specific action when clicked. Zoho CRM includes a set of system buttons that help you carry out common actions with a single click. Beyond these, your organization can create custom buttons

    • Displayed sample tracking for multi branch setup.

      We have multiple branches and one of the biggest challenges for us to be able to track if a particular item is in display or not. I am shooting in the dark but I am wondering if there is a solution for the following : Each product used for display is

    • Using IMAP configuration for shared email inboxes

      Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configure

    • Introducing Bulk Attachment Download from List View

      We're excited to introduce an update to attachment management in Zoho Recruit that lets you download attachments associated with selected records directly from the List View page of any module. How do I download attachments in bulk? You can now select

    • Advanced Group Settings: Customize and manage your email groups in Zoho Mail

      Email groups in your organization often require more than basic configurations to function effectively. With Zoho Mail's Advanced Group Settings, administrators can configure and manage policies, notifications, and more with greater precision. This gives

    • "code":3001 ["Failed to update data."]

      I would like to seek your expertise - I might be wrong on my approach also.. I highly appreciate your advice. 1 problem remains is when a new row was added on the existing one [from another form that trigger upon Successful form submission ], it gets

    • CRM gets location smart with the all new Map View: visualize records, locate records within any radius, and more

      Hello all, We've introduced a new way to work with location data in Zoho CRM: the Map View. Instead of scrolling through endless lists, your records now appear as pins on a map. Built on top of the all-new address field and powered by Mappls (MapMyIndia),

    • Workdrive on Android - Gallery Photo Backups

      Hello, Is there any way of backing up the photos on my android phone directly to a specific folder on Workdrive? Assuming i have the workdrive app installed on the phone in question. Emma

    • Auto sync Photo storage

      Hello I am new to Zoho Workdrive and was wondering if the is a way of automatically syncing photos on my Android phone to my workdrive as want to move away from Google? Thanks

    • List of Mail Merge Templates via Deluge

      Hello, Is it possible to get a list of the mail merge templates I've created in CRM within a custom function? I want to retrieve them and put them in a dropdown list but all I get is a scopes error! Can anyone see where I'm going wrong? Is this even possible?

    • Feature Request Improve parent-child relationship visibility

      Hi team, The Parent-Child ticket feature is great, but I've struggled to see the relationship between tickets when using ticket list views. It would be a great quality of life enhancement for users if child tickets were nested under parent tickets in

    • Displaying only unread tickets in ticket view

      Hello, I was wondering if someone might be able to help me with this one. We use filters to display our ticket list, typically using a saved filter which displays the tickets which are overdue or due today. What I'd really like is another filter that

    • Is there provision to charge the attendees to join the webinar?

      We want to host some webinar of public interest and want to charge them to participate in this. Does this feature in-build in the application? Offcourse, we will be having Razor pay account activated for these purpose.

    • Pricelists

      So we have them in books but I cannot find them in commerce?

    • Desktop app doesn't support notecards created on Android

      Hi, Does anybody have same problem? Some of last notecards created on Android app (v. 6.6) doesn't show in desktop app (v. 3.5.5). I see these note cards but whith they appear with exclamation mark in yellow triangle (see screenshot) and when I try to

    • Next Page