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

    • API (v2) Search Criteria using CONCAT

      With API I can search for a contact using First_Name and Last_Name. However, when I need to search the Contact Module using a full name — and because CRM does not provide an API for full name — I am not finding a way to do this in the traditional way

    • Explication sur comment mettre en place des règles d'affichage ou "layout Rules"

      J'ai passé plus d'une heure hier avec le support et je n'ai rien compris !! Je suis lecteur assidu des guides (je "RTFM") qui ne sont absolument pas orienté "client" chez Zoho, et je tiens à le rappeler ici . Dans la documentation on m'indique un cas

    • Kiosk Studio wrap-up | How our community used kiosks in 2024

      Hello, everyone! Happy new year! The end of 2024 has been busy, and 2025 promises to be bigger and better. As we ring in the new year, let's rewind and look at Kiosk Studio, our no-code customization tool. The past 300 days have seen the CRM community

    • Zoho and Hostaway webhok integration.

      I want to receive data coming from hostaway webhook and receive it in zoho crm to create or update record in a module based on conditions. The hostaway webhook sends data every time a reservation is created or modified or cancelled. The hostaway sends

    • Allow us to disable the Reopen Ticket button after a ticket is closed

      Disabling the Reopen Ticket will allow us to have more control over the ticket's flow. According to support, this is currently not possible. Please add this to let us, the customers, mold the ticketing system into something that we can use for our business

    • Function 56: Automatically enable the option for customers to pay via bank account

      Hello everyone and welcome back to our series! One of the key features of Zoho Books is its integration with multiple payment gateways, allowing you to receive online payments for your invoices. This ensures faster payments, automates payment tracking

    • Connect multiple Facebook ad accounts to Zoho Social

      Hi there. I'm doing the Facebook Ads and Zoho Social integration to automate the leads that come from Potential Customer campaigns on Facebook to Zoho CRM. I have a company (1 fanpage, 1 brand), but within the business or brand on Facebook, I manage several

    • Custom service report or Zoho forms integration

      Hello, So far the experience with Zoho FSM and the integration with Books has been good, however there are limitations with service reports. As with my business, many organisations send technicians to different types of jobs that call for a different

    • Creation of Path and subpath

      In order to improve the structure of the website for better organization, I would like to consider that when publishing a page, it can be within a section and sub-section. For example, if I have an events option in the menu, I can put past events and

    • Execution failure when fetching a Name field from another app

      In creator I have one app [Employee Directory] with a form [Employees]. One of the fields is a name field called [Name]. Here is a sample that works, if executed from the Employees app: test_Employee = Employees[Name.first_name == "Alex"]; info test_Employee.Name;

    • Assign task owner using Deluge

      Use Case: Each task is a document development task wherein once the developer has completed the first draft, the next step in the process is for the document to be QA-ed by the project's assigned auditor. Thus, I am currently working out a blueprint where

    • Using AVG in SQL Query

      My current SQL Query is: SELECT "Client Info", avg("Revenue") FROM "Funded Deals" GROUP BY "Client Info" The current table that this is creating: Client Info avg(Revenue) Previous 4175 1st - New 3411 1st - Old 3013 Renew 3069 While this works as I had

    • The Next Chapter for CRM for Everyone: Moving from Early Access to Phased Rollout for Customers

      #CRM25Q1 Hello Everyone, Until now, CRM for Everyone has been available in early access mode exclusively for users who opted to try the new version. We are now transitioning to a phased release, starting with the basic edition. We are thrilled to announce

    • Meta and Facebook data report discrepancy

      I have been currently gathering manually facebook follower data thru meta. In zoho marketing plus the social media reporting only allows for page likes, and so there is a discrepancy with the data. please the difference in files attached. Is there way

    • Links in Instagram

      Hi there, I have been using Later for a while now but keen to come back to Zoho Social as Later doesn't offer tagging of pages on Facebook but they offer something Zoho doesn't. You can add a link to your bio which opens up your profile feed where images

    • Sort By Date - Deluge

      I have the following code, which normally works to sort calls by created time. Every once in a while, it doesn't work and something sneaks through in the wrong order and I can't figure out why. calls = zoho.crm.searchRecords("Calls","(Owner:equals:" +

    • How to Enforce Mandatory Fields (Category/Sub-category) Before Closing a Ticket?

      Hi, I'm currently using Zoho Desk and encountering an issue where agents are able to close tickets without filling out mandatory fields, specifically Category and Sub-category. I’ve already set them both as a mandatory field, but it can still be bypassed

    • If I turn off the Task Prefix & ID in the Portal Configuration section, will it remove the dependencies in my projects?

      Hi all, basically the title, I am new to zoho projects and trying to get my head around some basic principles. Unfortunately I have not found this information via the search option and after deleting yesterday some Phases I had created in the Phases tab,

    • Admin Control for Default Email Templates in Zoho Desk

      Hi Zoho Desk Team, We would like to request a feature enhancement related to default email templates. Currently, agents can select and set their own default email templates when replying to tickets. However, we believe this setting should be managed centrally

    • Enter dates in tasks with just "tue" or "+10" or "5d" ???

      Is there any way to enter due dates in tasks without typing the whole date or making time consuming clicks in the calendar? I don't see anything online in the help or third party videos.

    • Zoho takes too long to load...

      I am based in Europe and in the last couple of weeks, Zoho CRM takes minutes even to load modules. Is there a specific reason this is happening? Is this happening to other people?

    • How can the direct link to a ticket be created from ticket #?

      Our agents will be using ZDesk but we will have to create direct link to tickets in another ERP by providing the Desk Ticket # Is there a way to create the direkt links from the ticket # alone? Do we have to use the API to get the direct links?

    • Modules are continuously loading

      Hi! We are not able to open the task modules, it keeps continuously loading

    • Zoho Desk : Field for 'Layout'

      I have many different layouts on my helpdesks and I want to be able to identify the stats for each one, however I can not find the field in the raw data from the Zoho Desk datasource. I thought it might be in the "Tickets" table but there is nothing.

    • Customize Zoho One Dashboard and URL?

      Hi everyone, Is there a way to customize my Zoho One URL to be different from the default portal URL? The current portal URL is: one.zoho.com/zohoone/[organization] I want to map it to its own standalone domain that we own. eg) domain.com instead of one.zoho.com/zohoone/[organization]

    • Enable Sending Direct Messages to Self in Zoho Cliq

      Hi, I would like to request a feature enhancement for Zoho Cliq to allow users to send direct messages to themselves. Currently, Zoho Cliq does not have the option to send a direct message to oneself. While creating a channel with just one member (the

    • Guidance on Making Zoho Desk Connections Available for All Data Centers

      Hi Team, I’m currently developing an application using Zoho Desk connections to manage OAuth for my third-party products. Could you please advise on the steps required to make it available across all data centers? Looking forward to your thoughts on

    • Emailing lookup field but placing this as an ID or number rather than text

      Hi there, First time poster and have been a user of Zoho Creator for approx 6weeks so forgive my ignorance as I learn to code. We have a need to send an email to a specific email address with some of the fields triggered by the submission of a form. In

    • JOB Sheet can not send PDF as service rapports and more info needed other topic

      Goedendag, - Jullie hebben nu job sheet erin gedaan en dar is echt super goed, enkel kunnen we de werkbon ( JOB sheet) nu niet verzenden als PDF als een service rapport naar onze hoofdaannemer hoe we dat nu doen als bewijs van de levering van het werk

    • Tax Deduction at Source (TDS)

      I issued a sale invoice outside UAE , the customer apply TDS on the invoice , i checked my Zoho ( professional version ) i couldn't find the option of Enable TDS to let it appear while posting the incoming payment , please how to make it and how to configure

    • UNAPPROVED record management

      When the unapproved list of duplicates is long, one needs the some tools to manage them - when this list has over 1500 records, we cannot manage it without some tools, such as: 1. The ability to apply a filter - ie similar to creating a CREATE a NEW VIEW

    • Zoho mail filter Add to WorkDrive doesnt't work

      Hello, We have a problem with using the filter in the email. So, we want that when a bulk payment confirmation from the online store arrives, this email is automatically saved in HTML format on the drive using the action 'Add to Zoho WorkDrive -> Email

    • Introducing Zia GenAI: Zoho's Native Generative AI for Zoho Desk

      Hello everyone, Zia GenAI is available on Early Access for Zoho Desk Enterprise subscribers. Kindly fill out this Registration Form to request early access. We are excited to announce the Beta release of Zia GenAI in Zoho Desk, now available through our

    • Add blueprint buttons to listview and kanban

      Hello, just started to use the Blueprints feature - really useful. I have one suggestion to help this work even better - can there be transition buttons that appear on the top of listview & Kanban? Maybe an option as well - "Blueprint transitions appear

    • Deleted message in SPAM

      In one of my gmail accounts (getnickifit@gmail.com) I had an email from PayPal in the SPAM folder. I thought I was moving the message to the inbox from the zoho mobile but it looks like it was deleted. It is no where to be found--inbox, trash, etc. Can it be restored?

    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

    • Multiple Facebook Pages under Single Brand

      Hi everyone, I'd like to know if there is a possibility of connecting multiple Facebook pages under a single brand on Zoho? At the moment, there are different Facebook pages of a single brand and would want to keep under the same brand on Zoho as we

    • Zoho Books Estimate to Zoho CRM quote?

      I'm not sure why this isnt automatic, but maybe I'm missing something. When we create a quote in zoho books we have a custom function that pushes the contact into a deal within the CRM. I can not for the life of me figure out how to push an estimate from

    • Zoho Developer Hangout (ZDH) – Episode 17 | Optimizing Organizational Processes through Automation

      Hey developers! Running a business can get quite overwhelming especially when juggling multiple tools like those in the Zoho ecosystem. Although integrating most of them is a piece of cake, manual intervention is needed at times. Being able to automate

    • User Emails Blocked

      Community: I keep running into issues where our users stop receiving notifications from CRM because their email addresses get blocked in on the backend some how. I reach out to support, they confirm, they fix, and we carry on, but then it happens again.

    • Next Page