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

    • Why wont Zoho Support Grammarly!! --- PLEASE VOTE FOR THIS to show Zoho we need this

      The spell check and grammar in ZOHO are so buggy and a waste of time. Please support Grammarly! I'm sure I'm not the only one — there are other CRMs that support this. If you're not planning to add this feature, Please let others know before accepting

    • Is it possible to hide Developer Space for all user in Zoho Projects

      Hello! I am Zoho admin in a company and we want to use Zoho Project to manage projects, but after a few days of testing we are not able to "hide" the Developer Space from all kind of users except the admin. To sum up, I want to hide this for all users.

    • 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

    • Weekly Tips: Stay Focused with Email Snooze!

      New Year, New Resolutions Being back at work also means being back to the constant barrage of messages from work and clients. The constant flood of incoming emails can lead to the missing of important messages, especially when you can't respond right

    • Schedule Zoho CRM reports only on Business Days

      Hello, Is it possible to schedule reports only on business days ? We currently get daily sales reports on weekend which has no value since the sales team doesn't work on weekends. Thanks

    • Zoho Payroll's Year in Review 2024

      As we roll into 2025, we'd like to pay tribute to all the milestones we hit in 2024! From releasing out new features that streamlined your workflows to updates that made payroll management smoother, we’ve had a prolific year—all while keeping you, our

    • Using tickets to train Zia

      Hi Team, I would like to know if there is any way that Zia can also learn from previous tickets in addition to the articles from the knowledge base. Since we have most of our knowledge curerently in the tickets and that this is hard to combine into a

    • Recurring Events Not Appearing in "My Events" and therefore not syncing with Google Apps

      We use the Google Sync functionality for our events, and it appears to have been working fine except: I've created a set of recurring events that I noticed were missing from my Google Apps calendar. Upon further research, it appears this is occurring

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

    • Multiplying Weight of product by Quantity

      I am facing an issue with creating a report that consolidates the total sales volume in kilograms. I have already specified the weight for each product. I have also aggregated the total sales quantity. The key question is: how can I create a report that

    • Confirmation prompt before a custom button action is triggered

      Have you ever created a custom button and just hoped that you/your users are prompted first to confirm the action? Well, Zoho knows this concept. For example, in blueprint, whenever we want to advance to the next state by clicking the transition, it is

    • Frontal interview scheduling - room availability in office using Google Workspace?

      Hi, We're using Zoho Recruit as our ATS and Google Workspace as our email, calendar and resources management. We want to use the interview feature to schedule an in-person (frontal) interview with the applicants. How can we sync the room resources availability

    • Add and Remove Agents from Departments and Groups in Zoho One

      Hi Zoho Flow Team, We hope you're doing well. Currently, Zoho Flow provides an action to add an agent to a group in zoho one, but there is no action to remove an agent from a group or a department. Another action that we find missing is the option to

    • 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

    • Introducing Hiring Pipeline for Vendor Portal

      Keeping vendors informed about candidate progress is often challenging, leading to communication gaps and repeated follow-ups. To address this issue, we've released an update to the Vendor Portal feature that lets you choose to display candidates' hiring

    • Unlocking New Horizons: A Year in Review

      As we bid farewell to 2024, let's celebrate and revisit the key highlights of the year. From adding a new edition to cross-platform enhancements, here’s a roundup of all the feature updates designed to simplify accounting, optimize financial management,

    • Free user licenses across all Portal user types

      Greetings everyone, We're here with some exciting and extensive changes to the availability of free user licenses in CRM Portals. This update provides users with access to all Portal user types for free to help them diversify their user licenses and explore

    • Address Grabber function for Zoho

      I converted from ACT to Zoho. With ACT, I used an add-on called AddressGrabber to scrape the contact information from leads that I buy and contact information contained on emails and websites and directly add it as a new lead or contact. Does anyone know

    • Integrate zoom with zoho bookings please; or add optional times in zoho meetings

      Just like events - these online meetings like zoom need to be integrated with zoho bookings, and there needs to be option for customer to book a time slot. It should not be dictated by CRM user.

    • Add Owner to deluge-created module record note

      Is it possible to include the "owner" aka "creator", of a Note when creating it via delulge? This sets "superadmin" as the Note creator. I need to override it. notemap = Map(); notemap.put("Parent_Id",program_contact_id); notemap.put("Note_Content",program_contact_data.get('Note'));

    • Directly Edit, Filter, and Sort Subforms on the Details Page

      Hello everyone, As you know, subforms allow you to associate multiple line items with a single record, greatly enhancing your data organization. For example, a sales order subform neatly lists all products, their quantities, amounts, and other relevant

    • Custom "Filter By" in Client Portal

      Currently our client portal only shows items for that specific person that is logged on to the portal, we want the current logged user to see all items for that user's company. An example would be invoices, so the current user would see all invoices for

    • Unique and Random IDs in Zoho Forms: Organize and Secure Your Data Efficiently

      When it comes to form submissions, organizing and identifying entries effectively is crucial. Zoho Forms offers two versatile ID generation options for submissions: Unique ID and Random ID. Each serves distinct purposes, providing flexibility to meet

    • 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:" +

    • Webhook when estimate is refused is not firing

      Hello, I use a workflow through make that sends estimate with zoho books (I paid books and sign). -Those estimates when accepted are firing the webhook that I create in zoho sign (photo 1) -However when refused they are not firing the webhook that I created

    • Iteration through a list - Coming up against a "Failure to update function" error

      Hi there! I've been attempting to get a deluge script working and am running into an error that I have been unable to resolve. The error I am getting is Failed to update function Error at line :18. Improper Statement. Error might be due to missing ';'

    • Error 403: Forbidden When Updating Email Signature via API

      Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 Forbidden

    • Can you modify "Last Activity Time" in deluge? If so what's the field name?

      I need to perform some bulk modifications on records in the Leads module, but I need to avoid changing the "last activity time" or "date modified" because I am using those fields to filter and sort leads for follow-up action. I cannot find an answer anywhere

    • How do I define a weekend

      I noticed the default for weekends does not seem to include Saturdays. How can i define weekends to include both Saturdays and Sundays? Thank you.

    • 【Zoho CRM】ポータル機能のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中からポータル機能のアップデートをご紹介します。 今回の機能アップデートにより、CRMのポータルへのログインがより簡単にできるようになりました。 【目次】 SAMLベースのシングルサインオンについて ポータルへのアクセスリンク送付について 今回のアップデートにより、アイデンティティプロバイダー（IdP）を利用している組織において、SAMLベースのSSO（シングルサインオン）を有効化できるようになりました！

    • Getting error during inserting a record in form of zoho people using zoho api

      import requests import json # Set your access token and Zoho People API base URL access_token = '1000.XXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXXXXX' api_base_url = 'https://people.zoho.in/people/api/' # Set the form name and data to be inserted form_link_name

    • UI Arabic

      can i change the member portal UI to arabic in zoho community?

    • Resume template to include profile photo

      Hi, We would love the Resume Template to be able to include their profile photo. How can this be done? Miriam

    • Marking a form as 'done'?

      Hi! I've got a form that staff fill in when moving stock from location to location. I see the entries they've sent across and I input them into my stock control system. Is there a way to mark a form as 'done'? So that I know which entries I've input,

    • Zoho CRM - best way to search an account and assign to a deal

      Hi Everyone I am looking for some advice. I want to find the best way to complete the below steps. We have a deal and once it reaches a certain stage we need to allocate a supplier / vendor to this deal along with the salesperson. I want to add (ideally

    • How to easy change layout in existing records in Deals?

      Hello, So far i have used only 1 layout in Deals. I have about 1000 records. Now i want to make new layout. So i have 2 layouts: Layout Old (1000 records) Layout New (0 records) How to easy change layout from Layout Old into Layout New for existing records?

    • Zoho Rating

      When I close a ticket, the zoho system automatically sends an email to the customer for them to leave a rating. When they leave a rating, the ticket re-opens and I have to close it again. When I close it again, the zoho system sends the customer an email

    • Zoho GC Flow is not showing in IM Channels

      I have added my social IM channels in zoho desk. Created a GC Flow to automate conversations. But Guided conversations are not showing in any platforms I have chosen; WhatsApp Instagram Messenger Web (Business Messaging) In the flow I mentioned these

    • Sharing Knowledge Base articles across multiple departments

      It would be useful to share some Knowledge Base articles across multiple departments where they are applicable, rather than having to go into other departments to find the article you're looking for. For example. Our reception uses the 'Admin' desk whereas our IT guys use the 'Support' desk, however both divisions would find KB articles about our company intranet useful. Reception does not have access to the support desk, so cannot see articles created in the Support KB. Perhaps you could install

    • Contacts marked as Spam are shown as Contacts in tickets.

      Hi Zoho, If a ticket is marked manually as Spam you get an option to set the contact as Spam as well. It would be great if there was another option to delete this Contact. This would be based on the understanding that it wouldn't be marked automatically

    • Next Page