1. Chat Widget (Float/Button) - The icon or button users see on your website.
2. Chat Window - The full chat interface that opens when a visitor clicks the chat widget.
   

Customize the CSS for the Chat Widget

1. From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalization > Stickers and you will many of customization options for your SalesIQ chat widget.
2. However, if you want to customize the widget with CSS, add your custom CSS directly to your website's stylesheet.
   
3. 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):

1. From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalization > Appearance and you will many of customization options for your SalesIQ chat window.
2. However, to edit the chat window with custom CSS, upload your CSS file in the Appearance section of SalesIQ.
3. Once uploaded, the changes will automatically apply to the chat window.
   

Click here to refer the sample CSS to customize the chat window. 

Steps to Customize Chat Window Styles Using Browser Developer Tools

Google Chrome Browser

1. Open the live chat widget and right-click (or double-tap on the touchpad) to access the menu.
2. 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.
   

1. In the developer toolbar, click the mouse pointer icon to enable select an element.
   

1. Hover over the chat widget and click to highlight the specific element you want to modify.
2. Once selected, you'll see the element's attributes, such as data-zsqa="elementname", its class (class="...styling"), and ID (id="...functionality").
   

1. Copy the attribute (data-zsqa="elementname") or class for use in your custom styling.
   
2. In the Styles tab, click the plus (+) icon to create a new style rule.
   

1. 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:
1. background-color: red !important; – Changes the background color.
2. color: red !important; – Changes the font color.
3. font-size: 10px !important; – Adjusts the font size.
4. display: none !important; – Hides the element.

Note: Always use `!important` to ensure your custom styles override existing styles.

1. On the right side of the dev tools, find and click on inspect-stylesheet under the Sources tab.
   
2. 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

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.

1. In the developer toolbar, click the mouse pointer icon to enable select an element.
   

1. Hover over the chat widget and click to highlight the specific element you want to modify.
2. Once selected, you'll see the element's attributes, such as data-zsqa="elementname", its class (class="...styling"), and ID (id="...functionality").
   

1. Copy the attribute (data-zsqa="elementname") or class for use in your custom styling.
   
2. Click the plus (+) icon in the bottom to create a new style rule.
   

1. 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:
1. background-color: red !important; – Changes the background color.
2. color: red !important; – Changes the font color.
3. font-size: 10px !important; – Adjusts the font size.
4. display: none !important; – Hides the element.

Note: Always use `!important` to ensure your custom styles override existing styles.

1. On the right side of the dev tools, find and click on inspect-stylesheet under the Sources tab.
   
2. 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.