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

      • Custom Statuses - Can You Do Anything With Them?

        As far as I can tell, one really cannot do much with custom statuses. I created a new custom status for sales orders called "Customizing / Hold". This is for sales orders that have the Confirmed status. The use case here is that, as an e-commerce company,
      • Price Book in foreign currency

        We have many customers who buy in foreign currency (USD), where our base currency is our local currency (AUD). It would be normal (it is in Zoho Books, Zoho Inventory etc.) to assign a currency to a price book, but I cannot find this option in Zoho CRM
      • How to disable option to search (In Advanced Field > Matrix Choice > Dropdown)

        In Advanced Field > Matrix Choice > Dropdown I don’t want the option to search or type to fill in words. How can I disable or remove this function?
      • Layout rules in Zoho FSM

        As titled, is there an item in the pipeline or an ETA for the implementation of layout rules in Zoho FSM? Similar to how they work in Zoho CRM https://help.zoho.com/portal/en/kb/crm/customize-crm-account/customizing-page-layouts/articles/create-conditional-layouts
      • Marketing Tip #45: Use WhatsApp to engage customers and drive more sales

        Email is great. Social media is useful. But when it comes to getting a message actually read? WhatsApp wins. In general, open rates on WhatsApp messages are significantly higher than email, and the conversation feels personal rather than promotional.
      • Client Script also planned for Zoho Desk?

        Hello there, I modified something in Zoho CRM the other day and was amazed at the possibilities offered by the "Client Script" feature in conjunction with the ZDK. You can lock any fields on the screen, edit them, you can react to various events (field
      • View Answer Bot conversations?

        We are trialing Zia and are experimenting with Answer Bot on our knowledge base. So far so good! Management asks me if it is possible to view Answer Bot conversations, the purpose being to look over its shoulder and confirm that it is working as des
      • Add Comment workflow action delayed by 1–2 minutes in Zoho Desk

        Hello Zoho Support team, We are experiencing an issue with a workflow in Zoho Desk. The workflow is triggered when the Quote ID field is updated and performs two actions: A standard Field Update An Add Comment custom action When the Quote ID field is
      • Zoho CRM Layout Rules: Nine New Actions, Profile-Based Execution, and Interactive Preview

        Hello everyone, Availability: This feature is now available for customers in the JP and SA DCs. It is planned to be released for other customers in soon. We’re excited to announce powerful new enhancements to Layout Rules in Zoho CRM - a feature built
      • Zoho Books and TRAINING SALES receipt label for eTims?

        Hi, Can Zoho Books implement TRAINING SALES receipts and push them to eTims for test? In other words how can we send to Zoho or even create in Zoho training mode invoices and TEST the workflow POS>Zoho Books>eTims and back without actually registering
      • Reporting Tags and COGS

        Is there any way to get COGS recorded against reporting tags? The use cases seems very straightforward to me. If I'm running a P/L report against a specific reporting tag (I use mine for customer type, but it could be used for regions, etc.), the revenue
      • Hide Custom Fields for Customers or Vendors

        For whatever reason, all custom fields added to the Customer module also get added to the Vendor module. This leads to a clunky experience for users, as many custom fields we add only apply to one or the other. There should be a "hide" option to hide
      • Onboarding process

        I urgently need onboarding support. My account still shows trial period.
      • Detailed General Ledger - Display Transaction Description in Reports

        Hi Zoho Team, I'm currently using Zoho Books and have a question regarding the Detailed General Ledger report. When we enter a description or narration in transactions (Bills, Journal Entries, Expenses, etc.), the report does not display this description.
      • Which Zoho CRM tasks would you want an AI assistant to handle?

        I’ve started delegating my Zoho CRM work to AI – and many tasks now take me half the time. It has been so useful that we’re now working to make it available to everyone. Instead of clicking through records and tabs, I simply describe what needs to be
      • Zoho Mail Does Not Integrate with Analytics

        Hello everyone, Just wanted to make a quick post about the problem with zoho mail. Currently it does not connect to Zoho Analytics, which I think is crazy considering both of these applications have existed for a long period of time. Even zoho voice a
      • Net ##th Terms (e.g. due on the following 15th)

        I have a client who pays me twice monthly per our contract. It would be helpful to have terms on my invoices where the invoice is due on the 15th or the 30th of the same or the following month.
      • Project status update visibility within a project

        Currently the only place within Zoho projects to see status updates for a given project is actually not in the project it's self it's in the Collaboration section and then by searching for a given project and clicking on the status tab. It would be great
      • Using custom CRM fields

        I have created a series of fields in the Deals module that need to be linked to fields in a contract I have customized. I can only see how to map standard fields, not the custom ones. How do I do this?
      • Como limitar o Zia Agent?

        Geralmente quando estamos criando um agente de IA no ZIa Agent Studio, colocamos o que ele deve fazer, utilizando as instruções que colocamos no Knowledge Base. Mas como colocamos limites que não devem ser ultrapassados? Para isso utilizamos os Guardrails,
      • An important update for Zoho Cliq desktop users

        The latest version of the Zoho Cliq desktop app (v1.8.0) will no longer be supported on macOS 10.15 Catalina and earlier versions. This is because the framework we use (Electron) no longer supports some older macOS versions. If you’re using macOS 10.15
      • Zoho Flow - Zoho Desk trigger "Ticket created or updated" overrides Department

        Just in case anyone else has this issue. We had a Zoho Flow with the Zoho Desk trigger "Ticket created or updated". In the trigger I had selected a Department (Sales). What happens is that the Department ID (Sales) is submitted as part of the request
      • 2026 Product Roadmap and Upcoming Features

        This is your guide to what is coming in Zoho Vertical Studio throughout 2026. We’ll update this post throughout the year as items move from development to release, and as and when new initiatives are added. Once a feature is released, it will be reflected
      • Introducing Canvas templates: Design once, apply everywhere

        Greetings all! We're happy to introduce Canvas templates, a Forms view enhancement that enables you to design form layouts just once and apply them seamlessly across multiple modules. Imagine you use five CRM modules (Contacts, Deals, Leads, and more),
      • Why cant i see the Campaigns module in my Zoho app

        I am on the ZOHO CRM Standard edition. I can clearly see and use the Campaign module when viewing the ZOHO CRM desktop. When I switch to my phone, the Campaign Module does not show. I have gone through all the settings I can think of, but I still can't
      • 📣 Ask the team behind Zoho SalesIQ: Summer '26 Q&A

        Hi everyone! Following our recent webinars, Summer '26 Release: What's New in Zoho SalesIQ—where we walked you through all the new features, what they do, and how they work—and Driving the AI Evolution: Building Smarter Customer Experiences with Zoho
      • Always display images from this sender – Is this feature available?

        In Zoho mail, I had my "Load external images" setting set to "Ask me", and that's fine. That's the setting I prefer. What's not fine though is I always need to tick "Display now" for each email I get, regardless if I've done that multiple times from several
      • Set Custom Icon for Custom Modules in new Zoho CRM UI

      • Displayed sample tracking for multi branch setup.

        We have multiple branches and one of the biggest challenges for us to be able to track if a particular item is in display or not. I am shooting in the dark but I am wondering if there is a solution for the following : Each product used for display is
      • How do I migrate from Office 365 to Zoho Mail?

        Check out Advik Email Migration Wizard, this software is specially developed to move mailboxes from Office 365 to Zoho Webmail. In addition you can migrate from Gmail, Yahoo, Rediffmail and 80+ webmail servers to ZOHO MAIL. Isn't it amazing? This is an all in one email migration solution. Steps to export emails from Office 365 to Zoho Webmail are as follows; Run Advik Email Migration Tool in your system. Select Office 365 as source and enter its login credentials. Select mailbox folders and choose
      • Connection Issues

        Morning. Seems like a few of my colleagues that are offsite are having issues with connection to cliq, even when their internet is working perfectly fine and only 1 person onsite has issues. Can you please explain? Thanks
      • Backorder process review - Automating Removal of Sales Order from "On Hold" When PO is Received

        Hello Zoho Inventory Team, Currently, sales orders in On Hold status are released only when the bill for the purchase order is created. In our workflow, it would be much more efficient if the sales order could automatically move out of On Hold as soon
      • Which Is the best online store to buy office furniture in Australia ?

        The most important part of your office is the office furniture. Your office is not complete when you have not put the required furniture in place. You need a furniture in your office so that you and your employees have desks, tables, and chairs which
      • Add "Product Code" as available column and search criteria for Assemblies

        Hi Zoho Community. For product (item) assemblies, it would be helpful to be able to create a custom view search criteria that limits the view by product code or perhaps product category. Currently, Product Code is not an available option to display as
      • What's New - July 2026 | Zoho Backstage

        Hello everyone, We hope you’re having an expectation-exceeding event experience! We’ve been hard at work bringing you a bunch of enhancements designed to make event management even easier. Let’s take a look at what’s new in Zoho Backstage. Export delivery
      • Delete Field that is used in a Zoho Flow connection

        I'm trying to delete a Field used in a Webhook created by Zoho Flow with CRM Connection and i get the following alert: When going to the alert i get to the following issue, can't edit it since its been deployed by a pluggin But yes i have here the prompted
      • Q3 USA ZUG Meetups - Build AI Agents with Zoho

        Hi everyone! What if you could build your own AI agent from scratch in just one session? That's exactly what we're going to do at the upcoming ZUG Meetups across the United States, where you'll get hands-on experience with Zia Agents and explore how AI
      • Data Export is forcing Creation/Modified date just like reports

        The data export now forces you to select a created or modified date. There is not an All-Time option. This severely cripples the whole function of data export for audit purposes. If the data export (or reports for that matter), requires a date, there
      • Default ticket template in helpcenter

        Hello, I have a web form and a ticket template created. How can I make that my default ticket template? If an user clicks New ticket or create a ticket, I want that template to be the default one. Thank you for the time and info.
      • Valid characters for use in email addresses using Zoho's apps/APIs

        We have found an issue with the + sign character in zoho subs - we are allowed to create a customer with an email address that has a plus sign but the API doesn't allow the + so the billing portal is not created. We are going to prevent users from using
      • Next Page