How to Change your Live Chat Widget Colors

Customize your Live Chat Widget with custom colors to match your website branding a color scheme.  To do this, simply go to the live chat widget that you want to customize from within Microsoft Teams or directly on our website.

Customize Chat Widget Colors in Microsoft Teams

To customize the live chat widget colors from Microsoft Teams, first, go to your Live Chat settings in your personal workspace.  If you don't see the Live Chat app icon, simply search on our Live Chat app in the Teams marketplace.

Then click on the Live Chat Settings tab in the Live Chat widget app settings.

Here you'll see the Tab Color text field.  Enter the new hex color code you'd like to use for your chat widget live chat button as well as the background color and button colors in the pre-sales page.  This setting applies to both of these colors.

If you want to use different colors for the chat button on the website and the header color, you can also customize the CSS styles using the Custom CSS & Javascript Tab.

You can use this CSS to override the header CSS:

.title-bg {
background-color: #333333 !important;
}
.si-msg-profile {
background-color: #333333 !important;
}<br>

Customize Chat Widget Colors in the Web Dashboard

To customize your live chat widget button and header colors for Slack Live chat or for our web live chat, simply login to your Social Intents account and head over to the apps link.

Then select the Tab Color field and enter your new hex color to update the chat button and chat widget header and button colors.