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

    • Is it possible to update multiple work items at once?

      Hi, Is it possible to update the statuses/release tags of multiple work items at once? I came across this thread that says it's not possible at the moment, but it was related to the Sprints mobile app. Does this feature not exist in the website as well?

    • Custom Module Missing from Roles & Permissions List

      Hi Zoho Community, I created a new Custom Module in Zoho Expense. The module is fully built and I can see it in the Module Builder (Settings > Customization > Modules). However, I am unable to deploy this to my users because the module does not appear

    • Pivot Report Formula - using a today() variable

      Is it possible for me to use a value of today() in a formula on a pivot table? I'm trying to identify where the end date of a project is greater than the current date if("10. Projects (Zoho Projects).End Date" > today(), 'Yes', 'No') I get the error that

    • Custom view inconsistencies

      Why is "is not" missing from criteria, along with other comparison operators ??? It makes it almost impossible to build required custom views, I don't want "void" invoices listed & why on earth would "Void" invoices be showing when the criteria includes

    • Not receiving New Ticket Emails

      Hello! The company I work for uses the Zoho ticketing system, however, I've noticed I'm not receiving email notifications when new tickets are published. I have admin rights to see these tickets on Zoho Desk and respond to them, but am not receiving the

    • Need Customer Item Inward Module along with QC

      Need Customer Item Inward Module along with QC 1. Using Transfer Orders hit the item balance sheet 2. Items without inventory it becomes difficult for tracking purpose. 3. Custom Modules become tedious to capture multiple items, item subforms are not

    • Zoho CRM Quotes – Subform and PDF/Writer Limitations

      Hello, I am encountering the following limitations in Zoho CRM Quotes: Custom product images cannot be uploaded in the subform – the image upload field cannot be added; only the file upload field is available. File upload placeholders cannot be used in

    • Apple Messages for Business in Omnichannel communications?

      Hello, Apple launched "Apple Messages for Business" but Zoho CRM or Zoho Desk don't appear in the list of possible integrators. Zoho already promotes https://www.zoho.com/crm/omnichannel.html Omni Channel integration, but Apple Messages does not yet appear.

    • Possible to Turn Off Automatic Notifications for Approvals?

      Hello, This is another question regarding the approval process. First a bit of background: Each of our accounts is assigned a rank based on potential sales. In Zoho, the account rank field is a drop-down with the 5 rank levels and is located on the account

    • Enable Free External Collaboration on Notecards in Zoho Notebook

      Hi Zoho Notebook Team, I would like to suggest a feature enhancement regarding external collaboration in Zoho Notebook. Currently, we can share notes with external users, and they are able to view the content without any issue. However, when these external

    • Will be possible to create a merge mail template for products?

      Hi, we would need to create a mail merge template for products (native) module. Will be possibile? or do you have a smart solutions to merge products data with a mail merge? thanks Chris

    • Maximum incoming email (attachment size) limit

      I see that the maximum size of received emails can now be set to 20MB, however I'd still like to see it be larger. It's embarrassing when a client sends me an email with a large attachment and I can't receive it. 50, even 100 MB seems reasonable these

    • [Free Webinar] Learning Table Series - Multi-currency management in Zoho Creator

      Hello everyone, We’re excited to invite you to another edition of the Learning Table Series webinar. As you may already know, we've moved to a purpose-based approach in the Learning Table Series this year. Each session now focuses on how a Zoho Creator

    • LESS_THAN_MIN_OCCURANCE - code 2945

      Hi I'm trying to post a customer record to creator API and getting this error message. So cryptic. Can someone please help? Thanks Varun

    • Ranking by group in report

      Dears, I am new to Zoho Analytics and I would like to ask you guys help to creating a ranking column. Report type: Pivot Matter: I want to create a ranking column on the right of Percentage. This ranking is group by column Type, and ranking by Final Score/Percent.

    • How do I add a project template to a pre-existing project?

      Help....How do I add a project template to a pre-existing project? Right now I have to delete the old project, make a new one and add the project template at the time of creating the new project.

    • How to add line breaks in zoho.cliq.postToUser(...) message?

      In a CRM function using Deluge I'm sending this message and attempting to add some line breaks but they are ignored. Is there another way to add these breaks? My message: message: New urgent task\nDescription \nThis is a fake description.\n A new line?

    • Passing the image/file uploaded in form to openai api

      I'm trying to use the OpenAI's new vision feature where we can send image through Api. What I want is the user to upload an image in the form and send this image to OpenAI. But I can't access this image properly in deluge script. There are also some constraints

    • Users may not pick the fields to be shown as columns in the Choose Account window when creating a new Deal record

      Hi there, by talking with other users I found out that I, as an Admin, am the only one who can pick fields to be shown as columns in the Choose Account window when creating a new Deal record. In fact, if other users click on the "Add Column" symbol on

    • {Action Required} Re-authenticate your Google Accounts to Continue Data Sync

      Hello Users! To align with Google’s latest updates on how apps access files in Google Drive, we’ve enhanced our integration to comply with the updated security and privacy standards, ensuring safer and more reliable access to your data. With this update,

    • Why is the ability Customize Calls module so limited?

      Why can't I add additional sections? why can't I add other field types than the very limited subset that zoho allows? Why can I only add fields to the outbound/inbound call sections and not to the Call Information section?

    • Report Template - How to remove page break after each record?

      Hi, We have report template for a list report. It looks good at screen. But when printing, it creates a page break after each record. How to remove the it? So we can print multiple records in same page. Please look at the attached screenshots. Report Template Report Print Preview

    • Calendar report with order options and more quick view templates

      I think many of us regularly work with calendar-style reports. It would be great to be able to customize the quick view with new templates and have options to sort the entries for each day of the calendar by different criteria. I think this is an interesting

    • Sender Email Configuration Error.

      Hello Team, Hope you are all doing well. We are in the process of creating the Zoho FSM environment in the UAE. When we try to add the sender email address “techsupportuae@stryker.com”, we receive the error message: “Error occurred while sending mail

    • Shall we play a game?

      Presenting the very first game created using ZOHO Creator: Tic-Tac-Toe (or noughts and crosses) I made this to challenge myself and employ some of the new features of ZOHO Creator. I must admit that the code is very literal and not too elegant. There are plans to improve on the machine AI and streamline the code over time. Currently the code makes extensive use of functions for the machine "AI" - there are 12 of these.   The machine AI can be tricked, so to counteract that I made it exceedingly arrogant

    • Career site URL - Suggestion to modify URL of non-english job posting

      Hi, I would like to suggest making a few modification to career sites that are not in english. Currently, the URL are a mix of different languages and are very long. It makes for very unprofessional looking URLs... Here is an example of one of our URL

    • CRM notes

      I want to be able to add notes to a task that do not necessarily get rolled up into an account or contact.   For example, I tasks to work on a Court Order for John Doe divorce account.  There might be lots of updates (in the form of notes) that employees

    • Confluence export to zoho learn

      Hello Is there any known way to export Confluence spaces to zoho learn ?

    • Zoho People API, Inactive users

      Hi, I would like to export using the Zoho People API using Fetch Leave Records API V2 | Zoho People API. However it only pulls active user's leaves. I want all users, active and former employees records.

    • Unified Notes View For Seamless Collaboration

      To facilitate better coordination among different departments and team members, the notes added to a record can now be accessed in all its associated records. With this, team members, from customer service representatives to field technicians, can easily

    • Empty folders are now appearing in the sidebar...

      ...and the folder list is now auto-collapsed by default with no way to change. Neither of these recent updates are useful or user-friendly. ==================== Powered by Haiku https://www.haiku.co.uk ====================

    • Client Script | Update - Client Script Support For Custom Buttons

      Hello everyone! We are excited to announce one of the most requested features - Client Script support for Custom Buttons. This enhancement lets you run custom logic on button actions, giving you greater flexibility and control over your user interactions.

    • Zoho CRM for Everyone's NextGen UI Gets an Upgrade

      Hello Everyone We've made improvements to Zoho CRM for Everyone's Nextgen UI. These changes are the result of valuable feedback from you where we’ve focused on improving usability, providing wider screen space, and making navigation smoother so everything

    • Create custom rollup summary fields in Zoho CRM

      Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

    • Monthly Webinar - Getting Started with Zoho LandingPage

      Are you building your first landing page and want a little guidance? Join our monthly Getting Started with Zoho LandingPage webinar and learn how landing pages fit into your marketing strategy, drive lead generation, and improve conversions. Here’s what

    • View all email threads directly from record's History and Interactions

      Greetings all, We've introduced the ability to view complete email thread conversations directly from records' History and Interactions sections, along with email delivery status and sentiment insights on the Interactions page—which makes it easier for

    • Marketing Tip #22: Check website and navigation for broken links

      Do you inspect your online store frequently? If not, here's your reminder to do it now. Broken links frustrate customers and make your store feel unreliable. Whether it’s a missing product page, an outdated menu item, social media accounts, or a broken

    • Is there a way to show contact emails in the Account?

      I know I can see the emails I have sent and received on a Contact detail view, but I want to be able to see all the emails that have been sent and received between all an Accounts Contacts on the Account Detail view. That way when I see the Account detail

    • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

      The address field will be available exclusively for IN DC users. We'll keep you updated on the DC-specific rollout soon. It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition. Latest update

    • Custom function return type

      Hi, How do I create a custom deluge function in Zoho CRM that returns a string? e.g. Setup->Workflow->Custom Functions->Configure->Write own During create or edit of the function I don't see a way to change the default 'void' to anything else. Adding

    • Next Page