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.
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,
In this case, CSS for changing the header colour was added.
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
The !important rule in CSS can be used to add more weightage to a property and override other previously added styling rules.
Extra CSS weightage can be added with a body tag, which will be another way to override all previous styling rules for the element.
![](https://desk.zoho.com:443/support/ImageDisplay?downloadType=uploadedFile&fileName=1661153746598.png&blockId=48d0a45894056572ff4c561012d4d623928a774c42068748&zgId=b54d79c69095249d&mode=view)
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.
- body header {
- background: #e2bb3c !important;
- }