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

    • Fixed assets recording

      Hello there, I recorded a bill for a vendor contain (Computer) so the PC is a fixed assets, do I need to do a manual journal to include this PC under the fixed assets category (furniture & equipment)? If yes, please take me through the manual journal

    • [New Release 2024] Create and embed custom capabilities across CRM with Kiosk Studio, our latest no-code tool

      [Update | New series] We've started publishing a series of posts on Kiosk Studio. It's called Kiosk Studio Sessions and you can check out the first one here! [Update | 15 Oct} Session #2 is live! This one will look at how to create a kiosk for your call

    • Multi-Select lookup field has reached its maximum??

      Hi there, I want to create a multi-select lookup field in a module but I can't select the model I want the relationship to be with from the list. From the help page on this I see that you can only create a max of 2 relationships per module? Is that true?

    • Kaizen #168 - Incremental Authorization

      Welcome to this week's post in the Kaizen series. In this post, we will discuss Incremental Authorization. What is Incremental Authorization? Incremental Authorization is an OAuth strategy that allows a client to request specific authorization scopes

    • Zoho Analytics Pivot Table - How to compare month vs last year same month

      Hi, I had created a pivot table with setup as below: Column: - Delivery Date Row: - Customer Group Data as column - Total amount (sum > normal) (show data of the month) - Total amount (sum > % difference from previous value) (compare between this month

    • Configure Notes Title for Blueprint Transition

      It'd be very helpful to be able to configure note titles on blueprint transitions when requiring notes. This would help tie back the history of notes to the blueprint actions. We have some approval processes in our blueprint and require notes for the

    • An update to improve email delivery | Email Authentication & Relay

      Dear Zoho Recruit Community, We hope this message finds you well. This post is to inform you about an important update regarding the authentication of all email domains in your Zoho Recruit account. Effective 31st December, 2024, emails sent using email

    • Stop adding Default ID column to xls exports

      When anything is exported to xls, Zoho adds a column with an ID.  WE DO NOT WANT THIS COLUMN.  We use an automated report to a team.  We have our own tracking number.  1. This makes the report messy, it just pushes OUR data off to the right.  2. We have

    • Automation#25: Move Tickets to Unassigned When the Owner Is Offline

      Hello Everyone, Welcome to this week's Community Series! 'Tis the holiday season—a time when work often takes a brief pause. The holiday spirit is in full swing at Zylker Techfix too, with employees taking some well-deserved time off. During this period,

    • Zoho cases and remote work api

      How to use zoho cases listing api? When i try to hit the endpoint specified in the docs , i get the error : the page you are looking for does not exist with a 401.

    • Calendly does not show scheduled Meetings

      I use Calendly as my standard booking tool, but no matter what I am doing, Calendly shows any appointment as free (when in fact there already is an appointment in CRM Calendar or Zoho Calendar). Drives me nuts - cannot go away from Calendly due to various

    • 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

    • I want the currency in my account to be Mexican pesos.

      Hello, I am a Mexican citizen and live in Ukraine. When I registered to your system, it was seen that I was from Ukraine, so the default currency is Euro. This is causing me a problem. Please change the standard currency in my account to Mexican Pes

    • 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

    • Year-End Wrap: Don't rewrite - Switch to Email Templates

      As we're half-way through December, now is the perfect time to start sending out festive greetings. Whether it is to your clients or your team, it is important that every mail is tailored to the recipient and feels genuine, which allows you to make better

    • Elevating Email Security on Zoho Desk: DKIM Now Mandatory

      Hello Zoho Desk Users! It has been a wonderful journey with you on Zoho Desk. As we prepare to welcome 2025, we are strengthening our efforts to ensure a secure and seamless experience for you. To enhance email security, DKIM configuration will be mandatory

    • How to view shared mailbox in Outlook

      How to view shared mailbox in Outlook or in another software

    • Clear String field based on the value of other field

      Hello everyone, We would like to be able to clear a string field (delete whatever has been written and make it empty) when another field (picklist) is changed to a specific value. While I can empty other types of fields, I noticed that I can't do this

    • Necesito el código ZB para mi cuenta

      Hice cambio de servidor y no encuentro el codigo unico de cname.

    • Privacy error

      Privacy error on Chrome for all embedded forms and reports, this is a huge issue: "Your connection is not private Attackers might be trying to steal your information from creator.zohopublic.com (for example, passwords, messages, or credit cards). NET::ERR_CERT_COMMON_NAME_INVALID"

    • Email with attachments saving attachments into Zoho CRM from Zoho Mail

      Hi, I get a lot of emails from prospective clients asking if we would bid their project. Those projects usually have many documents associated with them that I link to.  I would like to have those documents be saved as an attachment in my Potential or Contact or Account. I don't see a way to do that that isn't multi-step. As of now I do the following: 1.) Open email 2.) If email sender isn't in my Zoho CRM database I enter them creating a Potential 3.) I download the attachment and save it to a different

    • Bug - OTP (email) and No Duplicates

      Scenario: Form with an email field, Validation: "No Duplicates" (because I want to ensure 1 entry per email). Embedded form into website (JS option). Enabled email based OTP. 1st test (via my website) - entered my email address - sent OTP - entered pin,

    • Customise Search Bar in CRM

      Is there a way to customise this search bar in the CRM to add fields?

    • Counting downloads of a file

      Hello Could anyone help me, I would like to use a custom script to count how many times a file contained in a record has been downloaded. Is that something that is possible in Creator? Thanks Estelle

    • Is there any way to prevent emails from being sent from zoho crm without pressing email opt out?

      When I left my desk yesterday I excitedly thought I had fixed my problem, by making use of the "Inactive" field ... However after contacting the support chat, they have advised to stop emails being sent I need to update the "Email Opt Out" field - which

    • New Search Function

      Hey Team, The search function updated in our CRM about a week ago, so I assume it was an automated update across Zoho. It no longer displays leads/deals etc in Chronological order so that the most recently created or updated is the first to display which

    • New permissions for accessing emails sent via Zoho CRM

      Last modified on Nov 4, 2024: Permissions for accessing emails sent via Zoho CRM have now been extended to the IN DC. With this rollout, the feature is now available to all users across all DCs. Resources: Data sharing for emails, Configuring email compose

    • Mind Mapping

      Will Zoho consider a mind mapping application? I have seen some discussions that are some 10 years old. What is the status now?

    • is it possible to add more than one Whatsapp Phone Number to be integrated to Zoho CRM?

      so I have successfully added one Whatsapp number like this from this User Interface it seems I can't add a new Whatsapp Number. I need to add a new Whatsapp Number so I can control the lead assignment if a chat sent to Whatsapp Phone Number 1 then assign

    • Unable to send emails

      I have this email parth@mrcolumbus.in, but I couldnt send outgoing email. Can you please help?

    • Request for Alerts on Workflow and Function Changes.

      I want to get an alert whenever a new workflow or function is added or an existing workflow or function is edited. Is there any way to do that? I need to log all changes whenever updates are made or new ones are added.

    • Overwrite Option for custom modules

      Hi Team, I noticed that the overwrite option is unavailable in Zoho Books when importing data for custom modules. This limitation makes it challenging to bulk update old data, as the only option is the 'bulk update' feature, which is restricted to 25

    • Transfer Amount from One Vendor to Another Vendor

      One of the vendors, who has a balance with us, has closed the business and has started a new business; Now he wants me to transfer the outstanding from the old account to the new Vendor Account. I am trying to do this using Payment Settlement a/c, But

    • Been getting this error, every now and then "Get count limit exceeded, please try again after 3 mins"

      it is really annoying.

    • How to make Branch compulsory in Zoho Books invoice?

      How I make Branches compulsory in Zoho Books invoice?

    • Regarding GST Report Issue in Zoho Books

      Hi, Right now, the very important point from my end is this Zoho Books issue. Here, you can see that we have created the invoice with the items of account sales and expenses. The journal is also correct. The profit and Loss statement is also correct.

    • Function #57: Automatically group items in invoices based on categories

      Hello everyone, and welcome back to our series! As a business expands and new product lines are launched, it becomes important to organize the items for better inventory management. The Category field in Zoho Books helps here by allowing you to add and

    • Fixed asset management

      I want to know if there is any individual module for fixed assets management

    • Suppress "spreadsheet will not be saved" message on published sheet

      I have published a sheet and have one column on that sheet that the user can edit (a dropdown picklist where the user can select the status for each line). Is there a way to suppress the Zoho Sheet message "Any changes made to this published spreadsheet

    • Zoho Forms Unable to Save Account Numbers with a Leading Zero

      We are using Zoho Forms to for rental applications. It is working well, except for one thing:  when a user enters their bank account information, and that account number actually starts with a ZERO (like 00123456) the Zoho form will return the value without

    • Next Page