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

    • Templates for Zoho Desk - Knowledge Base

      We are looking at migrating our Knowledge base into Zoho Desk. Is there a way of creating templates for article in Knowledge base. We want to be able to set templates for certain types of content. Is this possible

    • Import KB template OR Export template for zoho desk?

      Greetings. Can you tell me if there is a way to get an EXPORT of my KB articles? OR is there a template you supply for importing KB articles into my zoho desk? I am looking for a method of understanding what fields can be imported, and what their possible

    • What KPIs Do You Use to Measure Your Support Team’s Performance in Zoho Desk?

      Hi everyone, We hope you’re all doing well. We are trying to improve how we measure the performance and effectiveness of our support department, and we would really appreciate learning from the community. We assume there are several common and widely-used

    • Backorder quantity change

      New Purchase Order × Almost there, but... Quantity of items in this purchase order is greater than the quantity that can be backordered from that sales order. Why can't I change the quantity of a backorder purchase? It looks like a normal order form and I would like to use it as one because I increased the amount and added some items. 

    • How to Associate multiple contacts with deal in Sales Inbox

      Hello, I have many deals that have multiple potential customers associated with a single deal, for example an engineer and a manager. The manager is the Deal's primary contact in CRM and the Engineer is added to the deal in the "Contact Roles" Associated

    • WorkDrive and CRM not in sync

      1/ There is a CRM file upload field with WorkDrive file set as the source: 2/ Then the file is renamed in WorkDrive (outside CRM): 3/ The File in CRM is not synced after the change in WorkDrive; the file name (reference) in CRM record is not updated (here

    • "code": "500","description": "Account not exists", mail api

      I have been through all the steps and have a functioning Oath access_token etc etc... I then GET https://mail.zoho.com/api/organization And get my zoid then GET http://mail.zoho.com/api/organization/<hidden>/accounts and get the account details, which

    • RTL Support for Webforms in Zoho CRM

      Dear Zoho CRM Support Team, We are writing to request an enhancement to the webform builder functionality within Zoho CRM. Currently, to create a webform in a right-to-left (RTL) language, the entire CRM instance must be set to RTL, which can be inconvenient

    • Imported contacts succesful but contacts do not show up in Contacts

      I imported +300 contacts. I can see them in import history. When clicking on a contact in import history I see all the imported contact details for any given contact. So import seems to be successful.   However the imported contacts do not show up in the contacts tab. Not in All contacts, and not in a filtered view where they absolutely should show up. The search function also does not find any imported contact.   Help?

    • Rich Text For Notes in Zoho CRM

      Hello everyone, As you know, notes are essential for recording information and ensuring smooth communication across your records. With our latest update, you can now use Rich Text formatting to organize and structure your notes more efficiently. By using

    • Saving sent email campaign as PDF

      I'm looking to add all campaigns sent to an archive folder in sharepoint. Is there anyway to accomplish this in Zoho Flow ? I'm falling at the first hurdle ... can I automatically save a sent campaign as a PDF to a folder location ?

    • Zoho Voice lance BYOC (Bring Your Own Carrier) : intégrez votre opérateur

      Pour accompagner sa croissance, une entreprise a besoin d’une infrastructure téléphonique flexible et évolutive. Les solutions de téléphonie s’adaptent aux exigences du centre de contact, tout en intégrant aisément les opérateurs locaux de votre choix.

    • Zoho Social API for generating draft posts from a third-party app ?

      Hello everyone, I hope you are all well. I have a question regarding Zoho Social. I am developing an application that generates social media posts, and I would like to be able to incorporate a feature that allows saving these posts as drafts in Zoho Social.

    • Digest Novembre - Un résumé de ce qui s'est passé le mois dernier sur Community

      Bonjour chers utilisateurs, Avec l'arrivée du dernier mois de l'année, il est temps de résumer les activités de novembre dans la communauté Zoho France. Ce mois-ci, Zoho Webinar se dote de deux nouvelles intégrations ! La première est avec Zapier : connectez

    • How do I create an update to the Cost Price from landed costs?

      Hi fellow Zoho Inventory battlers, I am new to Zoho inventory and was completely baffled to find that the cost price of products does not update when a new purchase order is received. The cost price is just made up numbers I start with when the product

    • E-Invoicing in Belgium with Zoho Books

      Starting January 1, 2026, Belgium is introducing mandatory electronic invoices (e-invoicing) for all B2B transactions between VAT-registered businesses. This means that invoices and credits notes must be exchanged in a prescribed digital format. How E-Invoicing

    • Lead Blueprint transition in custom list view

      Hi, Is It possible to insert the Blueprint transition label in a custom Canvas list view? I am using Lead module. I see the status, but it would be great if our users could execute the Blueprint right from the list view without having to enter the detailed

    • Announcing new features in Trident for Mac (1.30.0)

      Hello everyone! We’re excited to introduce the latest updates to Trident, bringing you a more seamless, intuitive, and secure communication experience. Let’s take a quick look at what’s new. Work with PST/EML files more efficiently. You can now do more

    • Open Form in Same window as Page from embedded Report

      I have a page that has an embedded report, as shown below. When I click the + sign to add a new record, the form shows up inside the page where the report was embedded. I know that I can add a custom action to the report grid or report detail view and

    • Weekly Sales Summary

      Is it possible to generate a weekly report in Zoho Books to show -$$ amount of estimates generated -# of estimates generated by Salesperson -$$ amount of Sales Orders created -$$ amount of Invoices generated

    • Pricing Strategies: #4 Counting on Discounts

      "Is there any chance I can get a little discount on this month's service?" Maya hears this almost every time at her fitness studio. She offers monthly subscription plans for various services, including yoga, strength training, wellness sessions, and personal

    • Introducing Query Workbench in Zoho CRM

      Hello everyone! We’re excited to announce the Query Workbench, a brand-new interface designed to improve developer experience of building Queries in Zoho CRM faster, simpler, and more intuitive. In the past, constructing queries required navigating across

    • Limitation with Dynamic Email Attachment Capture

      I've discovered a flaw in how Zoho Creator handles email attachments when using the Email-to-Form feature, and I'm hoping the Zoho team can address this in a future update. The Issue According to the official documentation, capturing email attachments

    • Add Customer in Books on Creator Form Submit Params

      Hi guys, Were integrating a creator app with books however what were doing is adding a books customer on submit of creator form.  We have some parameters but some fields aren't coping, All were seeing is the contact name in books,.  Any help of the params for this would be great. below is a sample of the script... response = zoho.books.createRecord("contacts", "XXXXXXXXX", { "contact_name" : input.Name, "address" : input.Email }); 

    • Admin asked me for Backend Details when I wanted to verify my ZeptoMail Account

      Please provide the backend details where you will be adding the SMTP/API information of ZeptoMail Who knows what this means?

    • Suggestion : link KB with Accounts

      Hi Zoho teams.  I think it could be good to link KB articles with  : accounts in order to easily  find articles dedicated to some account specificities. I tried to use tags , but tags are free text with not easy way  to retrieve it directly from ticket or list article for one tag. Tickets : It would be a good way to measure usage of KB directly from ticket when we don't need to copy/paste KB in solution. And : Great Tool , keep going ! 

    • Drag and Drop in Creator Application

      Hi, I am in the planning phase of a new application and I would like to use 'Drag and Drop' in the user interface of my new Creator application that I am sketching out, but I don't seem to be able to find any reference that this is available to developers. In my instance I have table of entries and I would like to be able to allow users to move an entry to another table (much like you do in your own interface when creating a Pivot Table report. In addition, I would like the user to be able to re-order

    • Is there any way to integrate Zoho with Zapier?

      Is there any way to integrate Zoho with Zapier? I'd like to use it to create a workflow, sharing posts from our Wordpress website to all our channels.

    • Popular Articles Report

      From data to decisions: A deep dive into ticketing system reports Content management teams can use various metrics to assess the effectiveness of knowledge base articles, improve content quality, and ensure articles are regularly updated. Predefined article

    • Invoice Ref. Field

      Hello Team, Currently, the Invoice Ref. field is set to a Number type with a maximum limit of 9 digits. However, we often receive customer invoices that contain up to 12 digits. In some cases, the invoice reference includes not only numbers but also letters

    • 60 Days Into Zoho - Tiktok Branding Startup -7 Questions?!

      Wsp Everybody I co-own a TikTok Branding / Consulting Startup & have been using Zoho for the past 60 days - Am now looking to make our overall operations & processes more Efficient & Effective! Curious to know how others are using the platform & what's

    • Turning off the new UI

      Tried the new 'enhanced' UI and actively dislike it. Anyone know how to revert back?

    • XML format to import knowledgebase into Zoho Desk

      Hi, We just started to use Zoho Desk and want to import our knowledgebase from our old support system (Freshdesk) to Zoho Desk. Can anyone give us information about the format of xml file to import? There is no explanation on the related page.

    • Pushing Zoho People leave into Microsoft calendar: how to chose how "event" is shown (busy, free etc)

      Hi, how can I select how a "leave" event is pushed into Microsoft calendar? I want for leave "working elsewhere" to show as working elsewhere and NOT as busy.

    • Duplicate Accounts

      Hi There, I am looking for a solution, script, workflow or anything to solve an issue we have - in our customers section we have a rule that doesn't allow duplicates, however Zoho will allow customers with xxxxx and xxxxx PLC or LTD so effectivley we

    • Error with If formula

      I've got this super simple If formula, what is the reason for the error? If ( LEN(${Leads.Trial Slot Option}) == 3,'y','n') Syntax Error. Check the examples for any functions you're using to see if you formatted them correctly. Make sure your fields are

    • Announcing Multi-language Support in Zoho FSM

      Zoho FSM now speaks your language. The much-awaited multi-language support is now available in Zoho FSM. The following languages are supported in Zoho FSM: Dutch (Nederlands) English - United Kingdom English - United States French (français) French -

    • Creating multiple CRM leads from a Zoho Forms subform

      Hi all, We have a heavily used intake form that is used for new leads as a part of our intake. There is a subform that allows the lead to add additional team members, their titles and other basic info. That form submission creates a new Lead and the subform

    • Free webinar! Build smarter apps with Zoho Sign and Zoho Creator

      Hello, Bring the power of digital signatures to the apps you build in Zoho Creator! Connect Zoho Sign as a microservice and enable seamless e-signature workflows in your applications. This integration allows you to automate signing tasks using Deluge.

    • Restrict Addresses in Zoho Forms?

      In the address field, is there a way to restrict the addresses that auto populate (via Zoho Maps or Google Maps) to a specific state (I know it's possible with the country). Additionally, how often does the address in Zoho Maps get updated? Certain addresses

    • Next Page