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

      • Zoho Recruit > Email Templates

        Dear All Background: We are using Zoho Recruit for the 4 business units under our group of company it our posting our of Job it will be done via our internal recruiter. In the Email templates, i want to be able to insert the individual business unit,

      • Zoho Voice & Zoho Recruit/CRM

        Hello, I'd love to use Zoho Voice with Recruit and CRM but it would need something very important to me, that has been a game changer to my daily routine, like Calendly has been for scheduling interview. It's call transcription with AI. I'm using Noota

      • Change start time after starting the timer

        Hello Projects Community, an amazing feature would be to change the start time of a running timer. I know this from some other time tracking softwares. Any idea about this? Best wishes Niels

      • Sending possible. Receiving not possible.

        We are not receiving mail in our company email. Could you please solve this. It has been recurring and I want it to be resolved once and for all. Please help.

      • Problema para enviar y recibir correos

        Buenos días, mi cuenta de correo secretaria@construccmauro.com presenta problemas y no me permite ni me envía ni recibe correos, me sale este error.No fue posible enviar el mensaje; Motivo: 554 5.1.8 Correo electrónico bloqueado saliente.  Aprende más., Agradezco

      • Data access tasks like 'For each record' aren't supported for 'integration forms'.

        My code is not running because i get the error "Data access tasks like 'For each record' aren't supported for 'integration forms'." I have my integration setup with Zoho CRM + Zoho Creator, the form is visible and working on my zoho creator however in

      • Zoho Reports Not Grouping from Subforms

        I have created reports from a subform. We have a budget from a standard field, and the bills added to a subform. I've summarised the bills in a field. In edit mode, the bills are joined per supplier, which is what we want. But then it converts and separates/duplicates

      • Create Automation for the Field "Mark up by"

        Hello everyone, I'm importing expenses from Zoho Expense to Zoho Books. I want to auto-calculate the "Mark up by" field based on the custom field “Discount” I created before. The trigger of the workflow will be the creation of the expense itself. The

      • Free Webinar Alert! Before vs After: Proven ROI from Zoho CRM + Workplace Integration

        Hello Zoho Workplace Community! Before: Scattered tools, lost leads, fragmented communication. Are you ready to stop the constant back and forth between tools to manage leads, emails, and team communication? After: Connected tools, streamlined processes,

      • Zoho Forms to Zoho Sign Integration - Fields Missing

        If a Zoho Form has image fields, it seems these can't be transferred to a Zoho Sign template for digital signature. Is there any way of pre-filling Zoho Form images onto a Zoho Sign template? Many thanks.

      • Is zoho SMTP slow today?

        Hi guys, Since yesterday I'm facing a slow communication over SMTP while sending emails. I already tried to use tls and ssl but nothing changes. There is anyone else experiencing related issues? I didn't find any maintenance in progress. Tested another

      • Link project invoices to sales orders

        As a business owner and project manager I create estimates with my clients which then become sales orders. When billing for project work I want to invoice against the agreed sales order. I see that I can create invoices and link them to sales orders in

      • The Urgent Need for Native Brazilian Payment Integrations: PIX and Direct Bank Connections

        Hello Zoho Team, I am writing to emphasize a critical functionality gap for Zoho Books in the Brazilian market: the lack of modern, native payment gateway integrations. The current options are insufficient. The Mercado Pago integration, for instance,

      • How to Fetch Images from Related Modules in Zoho CRM Mail Merge Templates?

        Hi team , Hope this email finds you well. I have a requirement where I need to create mail merge templates within Zoho CRM in such a way that they fetch images from a record stored in a different module. The way it works is I have one module "A" which

      • Zoho Calendar (Refresh Rate)

        Why don't the calendars refresh more than every 12 hours? That is crazy. I cannot be the only user who wants to see this change? I see and understand that I can MANUALLY update them, but need them to auto refresh either (1) whenever there is a change

      • "In Zoho CRM, during the Blueprint transition to the QC stage, I want to make the 'Packing Proof' image field mandatory."

        @Dr Saurabh Joshi @Haiku Technical Support @Ishwarya SG @Sparrow Hill President @Hugh Marshall "In Zoho CRM, during the Blueprint transition to the QC stage, I want to make the 'Packing Proof' image field mandatory."

      • Flow Error

        Hi Zoho Team, Any idea on this? This happens recently. Zoho Desk says "You are not authorized to access this resource."

      • Zoho Books/Square integration, using 2 Square 'locations' with new Books 'locations'?

        Hello! I saw some old threads about this but wasn't sure if there were any updates. Is there a way to integrate the Square locations feature with the Books locations feature? As in, transactions from separate Books locations go to separate Square locations

      • Books/Square integration with multiple bank accounts

        Hello, I need some workaround ideas! We have two parts of our business which have their own bank accounts and customers. We use 'locations' in Square to allocate the payments to the correct place and we use 'branches' in Zoho Books to define which transactions

      • Intergrating multi location Square account with Zoho Books

        Hi, I have one Square account but has multiple locations. I would like to integrate that account and show aggregated sales in zoho books. How can I do that? thanks.

      • [Webinar] Deluge Learning Series - Deluge Learning Series Built-in Functions in Deluge

        We’re excited to welcome you to the next session in our Deluge Learning Series – Built-in Functions in Deluge – Part 1. In this focused 1-hour live session, we will explore the practical use of built-in functions in Deluge scripting, with a spotlight

      • Zoho Hilfe in NRW für Kundenprojekt gesucht!

        Hallo, wir sind auf der Suche für ein Kundenprojekt, wer die Implementierung von Zoho übernehmen kann. Unsere Stärke liegt im Onlinemarketing, bzw. der Automatisierung mit Klick-Tipp und den Tools drum herum. In dem Projekt können wir dem Kunden mit dem jetzigen CRM nicht weiter helfen, bzw. ihn nicht auf die nächste Stufe bringen. Leider komme ich mit meiner Suche in Foren, SocialMedia und sonst wo nicht weiter.  Der Idealfall ist ein gemeinsamer Besuch vor Ort beim Kunden und hier eine Präsentation

      • Gaps in Core HR Functionalities in Zoho People

        Hello People team, We've been using Zoho People for quite some time now and truly appreciate its flexibility and customizability. That said, I wanted to share some feedback based on our experience implementing core HR processes within the platform. Several

      • Product and Service

        Hi guys, there is a difference between layout of product and service if Long Description field have some kind of text. Please see screenshot 1 for Service here: https://prnt.sc/7xWwPKd29nWP for Product here: https://prnt.sc/LGmtVd_U6H7q As you can see

      • Anyone Building AI-Based SEO Dashboards in Zoho Analytics?

        Hey everyone, I’m currently working on an SEO reporting dashboard in Zoho Analytics and looking to enhance it with AI-based insights—especially around AI visibility, keyword trends, and traffic sources. The goal is to track not just traditional metrics

      • Phone Number Integration

        I would like to be able to track my cell phone calls in the CRM.  So if a contact calls my cell phone number, a note of that phone call will be made in the CRM so that I don't have to remember to go back in and add the call manually. Is there a way to connect the CRM and my cell phone via a 3rd party? Such as Google Voice, Skype, etc. Its important that my clients don't have to call a new or different number and that sent calls use the same number as well. So if there is a way to connect my phone

      • Woocommerce Line Item Information

        I'd like to add each line item from a Woocommerce order to a zoho creator form record. The line items are found within the line items array, but I'm not sure how to get each item out of the array? Any help would be much appreciated.

      • Create Encrypted Zoho Forms URL for SMS Pre-Population forms using zfcrm_entity=

        Hello Zoho Forms Community and Zoho Team, I’m trying to send a Zoho Forms URL via SMS with pre-populated CRM contact data, inspired by a post from four years ago by GlennP (https://help.zoho.com/portal/en/community/topic/passing-the-crm). Our form is

      • Sales IQ - Bot Builder - Forward to Operator Action Card Improvement

        Hi team, It would be a great improvement to have an additional branch out of the Forward to Operator Action Card. I would like to allow 10 seconds for an operator to pick up the chat, if they don't or if they reject the chat I would like the Bot to continue

      • Important notice: Migration is needed from the legacy ASAP to the latest ASAP Zoho Desk flow

        We recommend upgrading to the latest version, as the older version will eventually be discontinued and will no longer receive any further enhancements or bug fixes. We are announcing an important update concerning the ASAP help widget in Zoho Desk. The

      • NFC Support

        Hi, I would like NFC Support like Zoho Creator, to pre-fill field values by scanning an RFID device. Zoho Creator NFC here: https://www.youtube.com/watch?v=F4JoMWnF82I Both on a Field's User Input (Mobile Apps), in additon to QR Code & Barcode today,

      • Live webinar: Building brand consistency using Zoho Show

        Getting people to remember your brand isn’t easy. And if your branding isn’t consistent, it becomes almost impossible. One place where consistency really matters? Presentations. Whether it’s a sales pitch, an event deck, or a team update, your slides

      • Getting an error "Not able to connect server. Verify your network connection" during proforma invoice converting to invoice.

        Getting an error "Not able to connect server. Verify your network connection" during proforma invoice converting to invoice. 

      • calendar I created in Zoho Creator not being imported to Google calendar any longer

        A calendar that I created in my Zoho Creator app is no longer updating (or showing up at all) in my google calendar. It used to export appointments I set up in my app to google calendar. I cannot figure out how to correct this.

      • Quoting Subscriptions with one Time costs

        Hello all, We sell a subscription SaaS service for which we provide one-time services for implementation and customization. Using CRM quotes i was able to create customized total fields to show the total one-time costs, monthly cost, total subscription

      • Automatisez efficacement avec le nouveau concepteur de workflows flexibles

        Auparavant, l'automatisation dans les modèles de fusion de Writer se limitait à des actions simples comme « fusionner et stocker », « fusionner et envoyer par e-mail » ou « fusionner et envoyer pour signature ». En revanche, il était jusqu’à présent impossible

      • More context, fewer tabs: View lookup modules' data within a CRM Canvas page

        Hello everyone, How often do your users juggle multiple browser tabs just to piece together the full context of a record? This update can make their lives easier. You can now add lookup modules' fields to a Canvas detail view page and a Canvas list view

      • On click of the Blueprint transition (Qualified or Not Qualified), the 'Convert' option should be enabled in the Lead module.

        On click of the Blueprint transition (Qualified or Not Qualified), the 'Convert' option should be enabled in the Lead module. console.clear(); let convertButton = ZDK.Page.getButton('convert'); let leadStatus = ZDK.Page.getField('Lead_Stage').getValue();

      • Show all items making up the composite item in transactions

        Dear Zoho, Currently, when we select a composite item in Zoho Inventory for a transaction, we do not receive a breakdown of the individual items that make up the composite. This makes it challenging for our team to accurately pick, pack, and ship the

      • Custom Roles & Granular Permission Control in Zoho SalesIQ

        Hello Zoho SalesIQ Team, We appreciate the functionalities offered by Zoho SalesIQ, but we would like to request a crucial enhancement regarding user roles and permissions. Current Issue: At present, Zoho SalesIQ provides fixed roles—Admin, Supervisor,

      • Next Page