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

      • Sudden Layout Issue After Last CSS Update for ZML (Temporary Fix Inside)

        Hi, Our clients have noticed today that every section laid out with ZML suddenly shows an unwanted top padding/blank space that interrupts the user screens. It appears that Zoho has changed the default CSS for the .zcp-col.zcp-panel-rowtype-auto element.

      • Customer paid excess. How do I record payment?

        A customer has paid me Rs. 7150 which is in excess. The amount due is Rs. 5388 I owe them Rs. 1762 back which I will be transferring to their account tomorrow. How do I get this entered into Zoho Books? I'm a little lost. :) Rishi

      • Tabular View Report | Scale To Fit Screen

        Please add the option to scale Tabular View reports to fit the screen. I constantly have to adjust the column size of Tabular View reports to fit various screen sizes and it just looks messy. You can see in the screenshot below there is a blank gap after

      • Why Server error in creatiing Landing Pages

        Hi Zoho Team, pls see my screenshot and tell me, what's wrong. Thx

      • Tip 31: How to make a field in a Zoho Creator form mandatory based on criteria

        Hi folks,   I'm sure most of you are familiar with the Mandatory property available in our form builder. It enables you to ensure that your users enter an input in a required field. If they don't enter an input in that field, they'll be unable to submit

      • Bulk update account type when adding a bill

        Hi I've only been using Zoho Books for a short while but I'm impressed so far, keep up the great work. One minor issue I'm coming up against is when creating a new bill from a scanned document (supplier invoice). In some cases, the supplier invoice could

      • How to start fresh after many years of using Zoho Books without deleting everything and creating a new organisation?

        Hi, I have used Books since 2016, but never reconciled with my bank account. I was thinking of trying to go back and fix that, but I don't just don't have the time it would take. Instead, I'd like back up my old records and start anew. What is the best

      • How do I modify the the incoming/current call popup? I can modify other call pages but not that one.

        I want to modify the incoming and active call popup on the crm to include customer relevant information, such as purchase history or length of relationship. Under modules and fields, I don't seem to see active call as a choice to modify, only the main

      • Canvas: Add Sections to Detail View

        Currently it is only possible to add fields to a canvas detail view. This makes Canvas hard to maintain, because everytime we add a field to our system, someone needs to go into the canvas view and add it there as well. This leads to additional work and

      • Automation#32:Auto Add New Portal Users to the Help Center User Groups

        Hello Everyone, Introducing a custom function that automates the process of adding new portal users to Help Center user groups, making user management effortless! By default, Zoho Desk allows you to assign new portal users to groups manually. But with

      • Cannot delete old accounts

        Hello, I try to delete old accounts from CRM, but it won't permit, saying documents are still linked to them. I searched in CRM and BOOKS, found some documents and deleted them, but still CRM won't delete them. Any idea how to do that ? I have a lot of

      • Offline mode on Android TV app?

        Hello! Is there a way to use Zoho Show offline in the Android TV app? I have an Android TV based projector, and I travel with it, and don't want to have to rely on a steady internet connection when giving a presentation.

      • Choice-based Field Rules on Global Lists

        Hi, The new Choice-based Field Rules should also be able to work with Global Lists not just local lists. Thanks Dan

      • Tip #36- How to use Survey in Zoho Assist to capture valuable feedback from remote sessions- 'Insider Insights'

        The survey feature allows technicians and customers to share their valuable feedback, contributing to the improvement of remote service quality. After the completion of a remote session, technicians and customers are prompted to fill out a survey form,

      • Narrative 3 - Comprehending User Management

        Behind the scenes of a successful ticketing system - BTS Series Narrative 3 - Comprehending User Management User management in a ticketing system includes important aspects of how administrators oversee user access, roles, and permissions. This process

      • Product Details's Description is lost

        Hi CRM lost its description in Product details subform. Can you make some test before deploy any update?

      • Sent items with shared folders

        Hello, this is in some way in between a problem and an idea.  When sharing folders (which is actually not any close to a shared mailbox...) the person which the folder has been shared with can access that folder and can send emails when delegation is

      • Zoho Bookings Issues We are facing

        Hi team, Here are list of issues we are facing with Zoho Bookings when migrating from other platforms. Sorry there is a lot but the bookings app need to be functional and practical for people to actually use it and not-cause MORE problems by being so basic and not customisable to each business.  1: SMS reminders for staff  There should be time limits on these reminders to make them useful. EG. if a new booking comes in more than 4 hours from now we don't really need to get a reminder, however if

      • Run workflow on data import in Creator 6

        How to run a workflow on data import in Creator 6?

      • Multi Day booking for resources

        I have following business-case: Rental for Tablets. Customer should be able to select how many device for how many days he'd like to rent. Same as a car rental for multiple days. Is this possible with Bookings on the current version?

      • Add Usage & Voting Analytics for Knowledge Base Articles in Zoho SalesIQ

        Dear Zoho SalesIQ Team, We appreciate the current integration between Zoho Desk and Zoho SalesIQ that allows knowledge base articles to be synced and displayed to users directly within the SalesIQ chat interface. One valuable feature already available

      • Real-Time Alert or Status Indicator for WhatsApp Connection Issues in SalesIQ

        Hi Zoho Team, We’d like to request a feature enhancement in Zoho SalesIQ related to WhatsApp integration stability and visibility. Recently, we encountered a critical issue where our WhatsApp bot stopped responding to messages without any warning or alert

      • Customization of Chat Transcript Emails in Zoho SalesIQ

        Hi Zoho SalesIQ Team, I hope you're doing well. We would like to request the ability to customize the email template that is sent to clients when they request a chat transcript from SalesIQ. Currently, when a client clicks the button to receive their

      • Import from Linkedin

        Please provide a way to enable importing contact information for Contacts and Companies from Linkedin? Thanks

      • The ability to format text fields, ie when data is number or currency

        Hello, I have spent some time trying to determine how to accomplish this but it appears to be impossible. I want to merge a currency field from CRM into a PDF document. The CRM data shows $1,234, but when zSign gets the data it shows 1234 in the text

      • Tip of the Week #64– Customize your sidebar for a more focused workflow.

        When your shared spaces start filling up with too many views, it gets a little harder to zoom in on what really matters. You find yourself scrolling more than working, and the things that need your attention? They’re often buried down below. Custom sidebar

      • Zoho Social - Queries about GST invoices and subscription

        Hi, I am going to purchase the Zoho Social tool with a yearly subscription. So, can you please help me with my below queries: 1. How I get the monthly GST Invoices? 2. What is the process of subscription? 2. How to cancel a subscription?

      • Sales IQ needs to capture both first and last names

        Sales IQ chat only has one field for name. When this then syncs with Campaigns, the field populates the "last name" field in Campaigns. However most people fill in the "name" field of Sales IQ with either their full name or their Christian name. This

      • Multi-Card Selection and Cross-Zobot Copy-Paste Functionality

        Dear Zoho SalesIQ Team, We’d like to suggest a productivity-enhancing feature for the Zobot builder in Zoho SalesIQ: the ability to select multiple cards (modules) at once using a selection area, and then copy-paste them either within the same canvas

      • Personal Link / Meeting ID

        with zoho meetings do I have my own personal link to my 'meeting space' ? I have an email template in Zoho CRM which confirms people's appointment with me, I would like to include the link to my Zoho Meetings so that they have it in advance. How do I

      • Ability to Initiate WhatsApp Template Messages in Zoho SalesIQ Without Preexisting Chat

        Hi Zoho SalesIQ Team, I hope you're doing well. I understand that with the WhatsApp integration in SalesIQ, clients can contact us via WhatsApp, and we can use WhatsApp templates to send messages outside of the 24-hour window by reopening an existing

      • Making money out of Zoho Sheets - How?

        Hello, Suppose I come up with a brilliant Zoho Sheet that I want to sell to other people, can I do this? How? Thanks.

      • Mobile Display Issues on Zoho Sites After Recent Update

        Hello! I’m currently facing an issue with my Zoho website that I created for my small business. After the recent updates, I’ve noticed that my site is not displaying correctly on mobile devices. Specifically, the layout appears distorted, and some elements

      • Can i set per-client hourly rate in Zoho Desk and not to correct the calculation on invoice?

        We use Zoho Desk to run one ticket per client per month. All time entries go to the ticket, we have to enter hourly rate manually and then correct it when we do the invoicing at the end of the month. So, our workflow is as following: I worked for 30 minutes,

      • Unable to add Agents

        I am trying to add agents to my account. While filling the details and sending invitation, the system mentions that invitation is sent. But no email is received on the user side. I have tried this multiple times and have also checked Spam and other

      • How to add new widgets?

        Searched and searched and cannot find anywhere. Why is everything so hidden in zoho! Why is there not a button right here that allows me to create a new one, why is it buried somewhere else! Zoho's UI is so infuriating

      • Submit Ticket from Custom Form on Website

        Hi I would like to create new tickets from our custom form on our website including some custom fields like serial number. I would prefer PHP to create the ticket. I know there is the Zoho webform but we would like to create our own. I have now read into the API and with AuthToken this would work with PHP but it is deprecated  and will not be supported any more in the future, so this not an option. OauthToken on the other hand needs an interaction from the ticket creator (customer) which we would

      • Customising Sign Up Page in Zoho Help Centre Sandbox

        Hi, I would like to customise the Sign Up page in my Help Centre Sandbox Environment but when I try to access it I get this message: What setting or permission do I need to achieve this? Many thanks, Kunal

      • Sort data in Pivot Table

        Is it possible to sort by a data field. I can gruop and filter, but I culdn't find how to sort the results. Tank You.

      • How to interact webhooks with Creator?

        How can I interact webhooks from external websites with Zoho Creator?  I'd like to get notifications from external websites (Stripe, Zoho Subscription, etc.) These notifications are coming as HTTP POST request from those servers, on maybe daily, monthly or based on any events.  How should I prepare my app in creator to receive these requests? Where and how to should I program in Deluge if I'd like to add some part of the JSON/XML data to my form?  Thank you BR, Balazs

      • Next Page