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.
Homepage
You can change the homepage color by adding a picture or patterns.
Example
![](https://help.zoho.com/galleryDocuments/edbsn2beec8fb3ec70e332f4cd3c2ce578cad4307e46429158b3e171d65ab6209412b3df3782fb899821aae3ad4151efd6196?inline=true)
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;
- }
![](/sites/default/files/css60.png)
You can change the look and feel of the chat window header.
Example:
- .siqcw-header {
- --header-height: 100px !important;
- }
![](https://crmplus.zoho.com/sites/default/files/css1.png)
![](https://help.zoho.com/galleryDocuments/edbsn0922f4ee8100d08e36a14124bdd56c26ce00bb6e262251ede29e14dc521acb26618e3fef0a49bce25278611aeb5d9993?inline=true)
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;
- }
![](https://crmplus.zoho.com/sites/default/files/css2.png)
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;
- }
![](https://crmplus.zoho.com/sites/default/files/css3.png)
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;
- }
![](https://crmplus.zoho.com/sites/default/files/css26.png)
![](https://crmplus.zoho.com/sites/default/files/css26.png)
You can change the style, appearance, color of the chat window footer using this CSS.
Example:
- .footer-tab {
- background-color: #eba845 !important;
- }
You can customize the message sending button according to your website design and needs using this CSS.
Example:
- .siqico-send {
- background-color: #eba845 !important;
- }
![](https://crmplus.zoho.com/sites/default/files/css61.png)
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;
- }
![](https://crmplus.zoho.com/sites/default/files/css7.png)
![](https://crmplus.zoho.com/sites/default/files/css15.png)
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;
- }
![](https://crmplus.zoho.com/sites/default/files/css8.png)
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;
- }
![](https://crmplus.zoho.com/sites/default/files/css17.png)
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;
- }
![](https://crmplus.zoho.com/sites/default/files/css2.gif)
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;
- }
![](https://crmplus.zoho.com/sites/default/files/css38.png)
![](https://crmplus.zoho.com/sites/default/files/css39.png)
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;
- }
![](https://crmplus.zoho.com/sites/default/files/css55.png)
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;
- }
![](https://help.zoho.com/galleryDocuments/edbsn1b38c5ae37a718f3e3092f7e89a0694a7c152b37e7e827681c2cce0d83f5e9e344b862f4f31976d44fd62527e0daca1d?inline=true)