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 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

    • Zoho One not working

      I'm having several issues accessing Zoho One. Some pages don't load (for example, Zoho Directory) and the labels are all messed-up (oz.account.directory.display.shorname, oz.settings...., etc.)

    • Apple Messages for Business in Omnichannel communications?

      Hello, Apple launched "Apple Messages for Business" but Zoho CRM or Zoho Desk don't appear in the list of possible integrators. Zoho already promotes https://www.zoho.com/crm/omnichannel.html Omni Channel integration, but Apple Messages does not yet appear.

    • Kaizen #140 - Integrating Blog feed scraping service into Zoho CRM Dashboard

      Howdy Tech Wizards! Welcome to a fresh week of kaizen. This week, we will look at how to create a dashboard widget that displays the most recent blog post of your preferred products/services, updated daily at a specific time. We will leverage the potential

    • Schedule meeting monthly on a particular day

      Suppose I wanted to schedule HR meeting every month on the first Tuesday with each employee separately for 20 minutes each. How could I automate these type of meetings? And if Sunday occurs on the first Tuesday I would like to shift that meeting on next

    • In ZohoCRM Dashboards - Editing Shown Columns on Drilldown of Components

      Hello! I'm working with some Dashboards inside of ZohoCRM. When creating a component (In this case, specifically a KPI Ranking Component), I'd like to customize which fields show when trying to drilldown. For example, when I click on one of the sales

    • Added Domain but SSL is not being set properly

      We added a Domain for our landing page and it pushed an SSL cert to it. The Cert is generated by LetsEncrypt, but it doesn't match our subdomain (i.e., it's just pointing to zohosites.com). How do we get the cert properly setup there?

    • Zoho CRM Widget not displaying 2 related lists (JS)

      Okay so I basically have 2 relatedLists that I want to get and render: ZOHO.CRM.API.getRelatedRecords({ Entity: data.Entity, RecordID: data.EntityId, RelatedList: "Notes", page: 1, per_page: 200, }) ZOHO.CRM.API.getRelatedRecords({ Entity: data.Entity,

    • KPI widget with percentage

      I'm trying to create a KPM widget that displays current performance as a percentage - something like the picture below. I've tried following the instructions at https://www.zoho.com/analytics/help/dashboard/kpi-widgets.html#chart but nothing ends up being

    • Canvas List View Not Saving

      Hi, I am trying to edit a list view to look different depending on the tags. Everything worked well and saved well with multiple views, but when I have gone back in to make some small changes like moving one of the icons it comes up with the error message

    • QR code image is not exported in PDFs

      The new QR code field works fine when I include it in a report template and I choose the print option: https://creatorapp.zoho.com/<username>/<app_link_name>/record-print/<report_link_name>/<record_ID>/ But when I try to save the document to a .pdf file

    • QR codes in templates

      I'm excited about the new QR code generator. I have included a QR code that contains the record ID setting "${ID}" as input data. In the report detail it works perfectly but when printing it in a template the code is not shown.

    • This mobile number has been marked spam. Please contact support.

      Hi Support, Can you tell me why number was marked as spam. I have having difficult to add my number as you keep requesting i must use it. My number is +63....163 Or is Zoho company excluding Philippines from their services?

    • Zoho CRM search not working

      The search bar is not showing any results in our CRM installation. We have a lot of items and can not search them by using the navigation each time. Can someone please check this asap.

    • Reload page with widget

      Hi all, I hope I can find some help here. I developed a small widget for Creator that is integrated into a page as a component. The page contains other content as well. When the widget is sent, the entire page should be reloaded to apply the changes to

    • Tip of the week #37 - Manage all your Telegram business conversations directly from your shared inboxes.

      Tired of switching between multiple apps to manage your business conversations? With Zoho TeamInbox's multichannel inboxes, connect your Telegram channel to a shared inbox. This way, your teams can easily handle c View, reply, and collaborate on them

    • Tags on notes aren't syncing correctly on Android

      I've created notes on the desktop version that have several tags assigned, but on both my Android devices those notes only have ONE of those tags instead of all of them, despite the actual content of the note being correctly synced, and I'm also starting

    • Reports - custom layout - duplicate report

      Do you also have this problem and what is the possible solution? I duplicate a report that has a "custom layout". Unfortunately the custom layout is not duplicated. To be improved for a future release by Zoho. I export the custom layout and import it...

    • How to map a global picklist from one module to another

      Hi there, i currently have a new field that is called sales office which we use for permission settings between our different offices located in different countries. It is a global set picklist with three different options: MY, SG and VN. I want to be

    • Pageless mode needed to modernise Writer

      When we switched from GSuite to Zoho, one of the easiest apps I found to give up, was Docs. In many ways, Writer has always been more powerful than Docs, especially in terms of workflows/fillable forms/etc. However, I went back into Docs because I notice

    • Changing the Logo Size on Zoho Sites

      My company logo incorporates both an image and text, and I would like it to be much more prominent on the page than is currently allowed by the small logo box in the template.  Is there any way to hide the page name and then make the logo box much bigger since my company name and logo are connected / are all in one file?  Thank you. 

    • Is it possible to Select Item Serial Numbers from a Sales Order?

      Our accepted estimates are converted to Sales orders for our warehouse staff to pick.  How can my warehouse staff select the serial numbers for an item when editing a Sales Order?  Logically when staff pull an item and have the serial in front of them they update the Sales Order and select the serial. I understand a serial can be added when creating an invoice but how can accounts team know the serial if the warehouse staff can't select it! A basic flaw!

    • MORE BUGS: Client Script, Deluge and Widget JS SDK don't work as expected when trying to retrieve a record that has been "rejected" as part of an approval process.

      Client Script $Page.record is null when accessing a record that has been "rejected" as part of an approval process. Deluge zoho.crm.getRecordById(moduleName, recordId) returns {"status":"failure"} when recordId is a valid, but rejected record. OK... I

    • Zoho CRM Widget not displaying 2 related lists (JS)

      Okay so I basically have 2 relatedLists that I want to get and render: ZOHO.CRM.API.getRelatedRecords({ Entity: data.Entity, RecordID: data.EntityId, RelatedList: "Notes", page: 1, per_page: 200, }) ZOHO.CRM.API.getRelatedRecords({ Entity: data.Entity,

    • Zoho Books and Zoho Projects Task Status Update

      How can we create an automation using custom functions for the following scenario. When our zoho books invoice status changes to paid. I want a task in Zoho projects to change to completed.

    • Assigning Tasks and Requests to Groups... how do I?

      Guys, I've spent many hours exploring Zoho Support and we are generally satisfied with the system.  I'm trying to understand how a system that has so much to offer can be missing GROUP assignment and queue functionality.  I am hoping that there is a way

    • Parsing of SQL query failed. Please check the SQL syntax.

      I am trying to have Zoho Analytics recognize that if the a Deal is in Stage "Need Docs" it should also be counted as a Deal in the Stage "New Lead" /*New Lead*/ SELECT "ID" 'New Lead' AS "Stage" From "Deals" Where "Stage" = 'Need Docs' Union All Error

    • Where is the setting to enable/disable 2FA?

      The following links show where enable/disable 2FA is supposed to appear, but neither appear for me: https://help.zoho.com/portal/en/kb/zohosites/faq/account/articles/how-do-i-enable-or-disable-two-factor-authentication-for-my-account shows Security >

    • How to Assign Record Ownership in a Custom Form via API?

      Hello everyone, I’ve created a custom form in Zoho People and I’m using the API to manage its records. I would like to know how I can assign ownership of these records to specific users via the API. Is there a specific parameter or field in the API request

    • Customer Statement Template not matching when sending

      Hi everyone! So when I send statements to our customers via Zoho Books, the message that appears by default does not match what I have written on the template Under settings -> email notifications -> sales -> customer statement We have a single default

    • Peppol Malaysia API

      Hi Zoho Books, my country Malaysia will going to implement "Peppol" (E-Invoicing), starting 1 Jul 2025 for all businesses. The government intends to provide API for accounting app. The workflow involves creating an invoice from accounting app, triggers

    • Re-emitir facturas con nueva dirección de facturación

      Hola, necesito saber si es posible que las facturas ya emitidas, pueden ser re-emitidas con el cambio de dirección de facturación, realizado el día de hoy 02-01-2025, para efectos contables. Espero su ayuda, Gracias

    • Zoho Learn vs. Trainer Central

      Hi, I'm currently using Zoho One with a WordPress-based website and WooCommerce to manage my online courses. I would like to know what is the difference between Zoho Learn and Trainer Central and if it's possible for these two platforms to replace WP

    • Map Plan to Different Income Account for Some Subscriptions via API

      We have a plan that has a default Plan Account of "Sales". Can we override the account for a specific subscription via API? In some instances the same exact plan should map to a different income account. When we create stand-alone invoices in Zoho Books,

    • Flow with CRM

      Hello, I have a simple flow that uses a web hook to enter data into a Sales Order. I have the web hook sending Flow data which has a PO field. If the PO has a special character like - or / or \ the task fails. How can I get the flow to be okay with the

    • Chrome browser issues. Anyone else?

      I am suddenly having multiple issues with Chrome browser interpreting the Zoho Mail interface.  Anyone else?  Any known problems? Thanks, Todd

    • Zoho Payroll US?

      Good morning, just reaching out today to see if there's any timeline, or if there's progress being made to bring Zoho Payroll out to be available to all states within the USA. Currently we're going through testing with zoho, and are having issues when

    • Set up multiple IMAP email addresses

      Hi, I just started using CRM and its great, but I just found out I can only add one imap email address for incoming mail in the included salesinbox ...this is ridiculous. All companies have different email such as sales@domain, info@domain , personal@domain

    • Function 58: Custom calculation in item table of invoices (2 fields)

      Hello everyone, and welcome back to our series! In Zoho Books, the Item Amount in invoices is calculated by multiplying the Quantity and Rate fields. Previously, we shared a function to include a custom field in this calculation. Today, we are taking

    • Next Page