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 developer, however, you might prefer to write your own CSS instead of using our custom design controls. In this case, you can upload your Custom CSS file in the brand settings. From your SalesIQ dashboard, navigate to Settings > Brands > Select the brand > Personalization > Chat Window > Upload Custom CSS > Select "New" and upload the CSS file. It will apply to your chat window.
Here, we have broken down all of the structural elements of the module and given you the field names and their CSS. Using which, you can apply CSS to individual parts of the module. For example, you could apply custom CSS directly to a header, or create your own footer in the Chat window using this CSS.
Note: The below sample CSS is for the new SalesIQ live chat.
Homepage
You can change the homepage color by adding a picture or patterns.
Example
- seasonal-home-bg {
- background-image: url(https://img.freepik.com/premium-vector/vector-gradient-blue-colored-sale-banner-sale-banner-discount-promotion-blue-background-concept_497837-1635.jpg?w=2000) !important;
- background-size: cover !important;
- }
Conversation page
You can default picture of conversation page.
Example
- .widget_offline, .widget_online {
- width: 360px;
- height: 260px;
- background-image: url(https://img.freepik.com/premium-vector/free-shipping-all-orders-tag-banner-design-template-store-marketing-background-modern-graphic_624773-45.jpg);
- background-repeat: no-repeat;
- background-size: cover;
- }
Chat window Header
You can change the look and feel of the chat window header.
Example:
- .siqcw-header {
- --header-height: 100px !important;
- }
Company Logo
You can use your company logo in the chat window header using this CSS. You can also customize the height and width of the logo to suit the chat window.
Example:
- .embed-prof-cont {
- border-radius: 15px !important;
- }
Chat attender name
You can change the display, font and color of the Chat Attender name using this CSS.
Example:
- [data-zsqa="header_title"] {
- color: #eba845 !important;
- }
Chat attender description
You can change the display, font and color of the chat attender description using this CSS.
Example:
- [data-zsqa="header_desc"] {
- color: #eba845 !important;
- }
Chat window - closing icon
You can change the look and feel of the chat window closing icon using this CSS.
Example:
- .chat-win-close:before {
- color: #eba845 !important;
- }
Chat window footer
You can change the style, appearance, color of the chat window footer using this CSS.
Example:
- .footer-tab {
- background-color: #eba845 !important;
- }
Message Sending button
You can customize the message sending button according to your website design and needs using this CSS.
Example:
- .siqico-send {
- background-color: #eba845 !important;
- }
Subscribing to Newsletter section
You can reform the section related to setting up the subscribe checkbox for subscribing Newsletters in the chat widget.
Example:
- [data-zsqa="Newsletter subscription"] {
- background-color: #eba845 !important;
- color: #fff !important;
- }
Messaging area
Modify the messaging area in the chat window. You can change the appearance of the text, include color to the text, font, font-size and much more using this CSS.
Example:
- [data-zsqa="message_window"] {
- background-color: #eba845 !important;
- }
Visitor text message typing area
Modify the visitor text typing area in the chat window using this CSS.
Example:
- .scroll-txtarea {
- background-color: #eba845 !important;
- }
Messaging area - Menu
You can change the appearance of the messaging area - menu in the chat window using this CSS.
Example:
- .siqcw-drpdwn-list {
- background-color: #eba845 !important;
- }
Visitor chat ending button
You can modify the messaging area - visitor chat ending button using this CSS.
Example:
- [data-zsqa="endchat"] {
- background-color: #eba845 !important;
- }
Emojis section
You can modify the emojis and smileys section in the text message area of the chat window using this CSS.
Example:
- .emoji_wrapper {
- background-color: #eba845 !important;
- }
Emoji icon
You can change the appearance of the messaging area - emoji icon in the chat window using this CSS.
Example:
- .siqsy-cont {
- box-shadow: 0 0 1px !important;
- border-radius: 5px !important;
- }
Visitor input area
You can change the visitor input area or components such as the drop-down, text box and more here.
Text box - Visitor input area
You can change the appearance of the text box field in the visitor input area using this CSS.
Example:
- .siqcw-input-cont {
- background-color: #eba845 !important;
- }
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:
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 ZeptoMail?
Zoho DataPrep Resources
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
Personalize your SalesIQ Chat window with new custom 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 ...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 ...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 ...SalesIQ for Zoho Forms
Zoho forms is a software solution that let's you create visually appealing forms easily with a no-code online form builder, for all your data collection needs. Integrating Zoho SalesIQ with Zoho Forms will allow you to receive the data collected on ...
New to Zoho LandingPage?
Zoho LandingPage Resources