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

        • "notes"-field in a task to full width?

          Hi, Is there someone that can tell me how to adjust the "notes"-field in a task, to full width? I already played around with 1 or 2 columns, but this has nu effect on the standard width. Thx in advance for your help. Cheers, Ralph.

        • How to download Job Sheets in Zoho FSM?

          Hello, I'd like to download copies of completed job sheets as PDF's for upload to a workdrive to keep an audit record of completed Job checkout sheets. I do not see download of this file type as an option - any help is appreciated!

        • [Webinar] Zoho Writer for law firms and legal professionals

          Are manual processes slowing down your legal practice? Are you ready to simplify document management and free up more time for your team to focus on what truly matters? Join us on January 16, 2025, for an exclusive Zoho Writer webinar designed specifically

        • Introducing Bin Locations In Zoho Inventory

          Hello users, We are excited to let you know that your wait for the Bin Locations feature has now come to an end! Yes, you heard us right! We are here to introduce the much-awaited Bin Locations now in Zoho Inventory. But before we dive into the feature

        • How to send mail with js SDK

          Hell o I'm using https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js, for my widget in CRM (built with sigma) Is it possible to send email from js file, I try ti use that ZOHO.CRM.API.sendMail({ "Entity": "Accounts", "RecordID": sharedVariableEntityId,

        • Cannot add Zoho Forms link to LinkedIn

          Hello, We have encountered a problem where we are unable to share a Zoho Forms link on LinkedIn. This is what we got from LinkedIN, but we have not heard back from Zoho Support as yet, and we are meanwhile stuck... "It seems the URL does not scrape the

        • Feature request - pin or flag note

          Hi, It would be great if you could either pin or flag one or more notes so that they remain visible when there are a bunch of notes and some get hidden in the list. Sometimes you are looking for a particular name that gets lost in a bunch of less important

        • i keep see there is a connetion issue connecting 3rd party api on zoho when using zia

          hi there , i have set up open ai api to zoho zia (copied and pasted to zoho zia) but I keep getting notificaiton "there is a connetion issue connecting 3rd party api on zoho" when using zia on top when click zia and try to type in word there

        • SendMail in CRM Deluge function rejects a validated email address

          In a CRM Deluge function, the email address is considered invalid. Is there another method by which it can be validated? It's unacceptable in my current situation to use either the zoho.loginuserid or adminuserid as the From address.

        • how do i remove a specific Zoho Service from my account

          I no longer need Zoho CRM, ZRM Assist nor ZRM BugTracker. How do I remove them from the list of apps for my account?

        • Link project tasks to tasks in CRM and/or other modules.

          Hello, I have created and configured a project in Zoho Projects with a set of tasks. I would now like to link these tasks (I imagine according to the ID of each one) to actions in the CRM: meetings, tasks, analytics). The aim is to link project tasks

        • Introducing 'Queries' In Zoho CRM

          Hello everyone! We are here with an exciting feature - Queries in Zoho CRM! A little context before we dive right into the feature specifics :) In today’s fast-paced business environment, immediate access to relevant data is essential for informed decision-making.

        • Build custom AI solutions with Catalyst’s QuickML capabilities in CRM

          Hello everyone, We’re thrilled to announce an improvement for our Zoho CRM Enterprise users: the ability to create custom AI solutions using Catalyst’s QuickML directly from Zoho CRM. As you may already know, Zia, Zoho CRM’s AI-powered assistant, offers

        • Unveiling Cadences: Redefining CRM interactions with automated sequential follow-ups

          Last modified on 01/04/2024: Cadences is now available for all Zoho CRM users in all data centres (DCs). Note that it was previously an early access feature, available only upon request, and was also known as Cadences Studio. As of April 1, 2024, it's

        • Pay Contractor Timesheets

          I have contractors that fill out a timesheet. Each hour must be assigned to a current client. I need the easiest way to get the contracts paid. They are paid on an hourly bases. How can this be done?

        • Set up slack alert based on a field changing from one option to any other

          Hi, I'm trying to set-up a workflow to send a slack alert if a field changes from one option to any other. I've set-up a workflow to trigger on Edit and when a specific field gets modified but the only option I have 'is modified to' when really it should

        • Better UI more user friendly

          Hello everyone, I think all finance apps, especially Zoho Books, would benefit from the following suggestions/ notes: 1. Grouping Fields in Zoho Books: Unlike Zoho CRM, Zoho Books does not seem to have an option to create sections or group fields. This

        • Chronicles of 2024: The Year in Retrospect

          As we close out 2024, let’s take a moment to highlight the new features and updates that have enhanced Zoho Invoice in 2024. Among the exciting enhancements, we have launched a new AI-powered chatbot designed to assist you in understanding the app's features

        • Power of Automation :: Automatically archive your inactive Projects

          Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

        • 554 5.1.8 Email Outgoing Blocked

          HELP!!!!! My e-mail marymariya@zoho.com is blocked. Error: 554 5.1.8 Email Outgoing Blocked The third day I am writing to the forum, but zohosupport is not responding. Why? What is the problem? I ask to help solve the problem, because I can not communicate with my customer base.

        • Zoho Inventory: Rewinding 2024

        • Custom Modules Now available for Standard and Professional Editions with Expanded Limits across all editions

          #CRM25Q1 Hello Everyone, We are here with an exciting update to Custom Modules in Zoho CRM. Custom modules will now be available to Standard and Professional Edition users, with expanded support across all editions. The standard modules offered in Zoho

        • Assistance with Custom Attendance Report in Zoho People

          Hi, I created a custom report in Zoho People 5.0 to track employee attendance according to our specific needs, as the existing reports do not include all the required details. However, I’ve noticed that the report doesn’t update continuously or on a daily

        • Zoho analyticsでのタブを跨いだ集計

          Zoho analyticsまたはCRMレポートなどを用いて、 見込み客タブと商談タブで共通するユニークキー(リード管理番号)を軸に、「共通選択リスト」で設定した項目別の集計を行うことは可能でしょうか？ ・要望 ①リード管理番号をキーに、見込み客テーブルと商談テーブルを結合したRAWデータを作成したい ②具体的には下記表のように「共通選択リスト」項目(サービス)別のマーケ数値を一表にしたい 　※リード＝見込み客タブ　商談・成約＝商談タブ 　　　　　リード数　商談数　成約数 サービスA　　　10　　　5　　　2

        • Key Highlights of 2024: Recalling a Year of Progress and Advancements!

          As we step into 2025, we’re excited to share the progress and developments we’ve made to simplify and streamline your travel and expense management in the past year. Let’s take a look back at some of the key updates and enhancements that have helped us

        • How to refresh the page by widget in related list?

          Hello, ZOHO.CRM.UI.Popup.closeReload method does the thing I need. But in my case, I'm not using popup. I have a widget in related list and I want to refresh the page when I'm done with it. I searched for it but I wasn't able to find it. Is there an any

        • your phone line in the uk doesnt work i need help now

          i need to speak with customer service urgently

        • Top Menu Disappeared from Blog Page

          Hi, Our top menu disappeared at Blog Posts page. However, it's still visible any other page on the website. I attached two screenshots, so it can be understood clearly. How can we bring back top menu? Thanks, K.

        • Missing phone numbers

          yesterday I have noticed that most contacts' phone numbers are missing. At first I thought it is a synchronisation problem with my Android phone but as I have found later, numbers are missing on Zoho. I have tried to reimport contacts from a backup but

        • Customise 404 page in Zoho Sites 2.0

          Is it possible to customise the 404 page in Zoho Sites 2? You use to create a new 404 page and that became the default 404 page, but this does not seem to work anymore? Any pointers/suggestions/support appreciated :)

        • [Important announcement] Zoho Writer will mandate DKIM configuration for automation users

          Hi all, Effective Dec. 31, 2024, configuring DKIM for From addresses will be mandatory to send emails via Zoho Writer. DKIM configuration allows recipient email servers to identify your emails as valid and not spam. Emails sent from domains without DKIM

        • Create workflow rules based on notes

          Last modified on 17/04/2023: Creating Workflow rules based on notes is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. As of April 13, 2023, it is rolled out for al Zoho CRM accounts.

        • Workflow sync between zoho books and zoho inventory

          Hello, While the custom fields, validation rules and even custom buttons are sync'd between zoho books and zoho inventory, the workflow rules do not. Not sure if this is an intentional purpose of zoho team for some good reason or if it's in the development

        • HOW TO USE ZOHO

          IDK

        • Item sales account via api

          Hey everyone, I’m making an invoice using the create invoice endpoint on the api. Is it possible to set a sales account in the line_items attributes?

        • Zoho Please change your ways

          I started using Your new Zoho bookings in earnest 3 days ago. What a mistake.  Once again, everything is backwards and upside down.  I had to spend 5 hours testing how the thing works in order for me to understand how to acutally use it.  When i started using google calendar years ago.  it took seconds to figure out how it works. Why is that. bc they put everything in places where it makes sense.  Today, I needed to add an appointment as well as a time off.  Stupid me i added the time off first,

        • Make a ticket visible in the Community

          Hi there, It is possible to have a conversation with a customer via a ticket and eventually the proposed solution isn't possible yet. Therefore you want to add it as an idea in the Community, available and open to everyone that is in the community, so

        • Zoho email folders gone

          Hi, All my email folders are gone, i cant found any email, except sent. Also before folder rulesas was changed and i didnt fixed them, could you please check it?

        • Pause/Resume Subscrtiption API

          I don't see the option to Pause/Resume a subscription using the API, is it in the pipeline?

        • Update Department on Ticket (with applied Blueprint)

          Hello, Is it possible to update the Department of a ticket which is dictated by a blueprint, e.g. I would like to change departments at different states in the Blueprint. I do not see this is an option in workflow rules or blueprint transition actions,

        • Next Page