Introduction to Custom CSS in SalesIQ Live Chat
Every business has its own unique brand identity, reflected through specific colors, fonts, and layouts. To maintain consistency and enhance the customer experience, you can customize the CSS of the SalesIQ live chat widget to match your business theme perfectly.
In SalesIQ, the live chat widget is composed of two main components:
- Chat Widget (Float/Button) - The icon or button users see on your website.
- Chat Window - The full chat interface that opens when a visitor clicks the chat widget.
Customize the CSS for the Chat Widget
To modify the appearance of the chat widget (float/button):
- From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalization > Stickers and you will many of customization options for your SalesIQ chat widget.
- However, if you want to customize the widget with CSS, add your custom CSS directly to your website's stylesheet.
- These changes will apply to the widget as it appears on your website.
Customize the CSS for the Chat Window
To customize the look of the chat window (the chat interface that opens after the widget is clicked):
- From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalization > Appearance and you will many of customization options for your SalesIQ chat window.
- However, to edit the chat window with custom CSS, upload your CSS file in the Appearance section of SalesIQ.
- Once uploaded, the changes will automatically apply to the chat window.
Click here to refer the sample CSS to customize the chat window.
Using the broswer developer tools, you can easily change or add custom CSS and preview them. Then, you can save this as a .css file and upload them in the brand settings.
Steps to Customize Chat Window Styles Using Browser Developer Tools
Each browser will have it's own set of developer tools to edit/customize the CSS. Here are the steps to add custom CSS for the Google chrome and Safari browser.
Google Chrome Browser
- Open the live chat widget and right-click (or double-tap on the touchpad) to access the menu.
- Click Inspect to access the browser's developer tools, this will open the developer tools panel, allowing you to interact with and modify the web page's elements.
- In the developer toolbar, click the mouse pointer icon to enable select an element.
- Hover over the chat widget and click to highlight the specific element you want to modify.
- Once selected, you'll see the element's attributes, such as data-zsqa="elementname", its class (class="...styling"), and ID (id="...functionality").
- Copy the attribute (data-zsqa="elementname") or class for use in your custom styling.
- In the Styles tab, click the plus (+) icon to create a new style rule.
- Replace the default styles with copied attribute or class in the previous step and write custom CSS. Here are some common CSS to change the colour include:
- background-color: red !important; – Changes the background color.
- color: red !important; – Changes the font color.
- font-size: 10px !important; – Adjusts the font size.
- display: none !important; – Hides the element.
Note: Always use `!important` to ensure your custom styles override existing styles.- On the right side of the dev tools, find and click on inspect-stylesheet under the Sources tab.
- Click on it to open the stylesheet, where you can add additional CSS to customize the chat window further.
By following these steps, you can personalize the chat window's look directly from your browser.
Safari Browser
- In the developer toolbar, click the mouse pointer icon to enable select an element.
- Hover over the chat widget and click to highlight the specific element you want to modify.
- Once selected, you'll see the element's attributes, such as data-zsqa="elementname", its class (class="...styling"), and ID (id="...functionality").
- Copy the attribute (data-zsqa="elementname") or class for use in your custom styling.
- Click the plus (+) icon in the bottom to create a new style rule.
- Replace the default styles with copied attribute or class in the previous step and write custom CSS. Here are some common CSS to change the colour include:
- background-color: red !important; – Changes the background color.
- color: red !important; – Changes the font color.
- font-size: 10px !important; – Adjusts the font size.
- display: none !important; – Hides the element.
Note: Always use `!important` to ensure your custom styles override existing styles.- On the right side of the dev tools, find and click on inspect-stylesheet under the Sources tab.
- Click on it to open the stylesheet, where you can add additional CSS to customize the chat window further.
By following these steps, you can personalize the chat window's look directly from your browser.
After completing your changes, upload the final .css file in the Brand Settings section to apply them.
Predefined CSS Templates
To help you get started, we’ve provided sample CSS templates for both the new and old versions of the SalesIQ live chat.
- Make sure to select the appropriate version for your chat widget.
- Use the corresponding CSS code to begin your customization process.
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Zoho FSM Video Tutorials
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho CPaaS?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Customize your SalesIQ Chat window with new Personalized Widgets (Beta)
Note: This feature is still in beta version. If need be, changes will be made to the JS API code/format for further refinement of the widgets. Additionally, the widgets JS API will work only on the new SalesIQ live chat. If you are using the older ...Sample CSS for SalesIQ Live Chat [New]
Overview of Custom CSS From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalization, you will have plenty of customization options for your SalesIQ chat widget and window without touching a line of code. If you are a ...Sample CSS on Zoho SalesIQ [Old]
Custom CSS - an Overview From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalisation, you will plenty of customization options for your SalesIQ chat widget and window, without touching a line of code. If you are a developer, ...Integrating Zoho Bookings with Zoho SalesIQ
Zoho Bookings in SalesIQ Zoho Bookings is an online tool that your customers can use to book appointments with your experts and specialists to avail your services. When you publish your services on Zoho Bookings, your customers can access this ...Desktop apps for SalesIQ
The SalesIQ Desktop apps are available on the App Store on Mac as well as the Microsoft store on Windows. These can be downloaded from the respective stores to get the the SalesIQ experience right to your desktop. Mac Downloading the SalesIQ app from ...
New to Zoho LandingPage?
Zoho LandingPage Resources