Style the look and feel of Chat to customize how it looks on your website, allowing you to create a unique and personalized experience for your Customers. By adjusting various design elements, you can ensure that the Chat seamlessly integrates with your site's overall aesthetic and branding.
Widget icon
The Chat code samples provide web developers with examples of how to style it as it appears on a web page.
CSS
You can manage the colors and font of Chat, as well as its left-right positioning on the Chat configuration page, which provides a user-friendly interface for customization. While applying additional, custom CSS to the Chat is not officially supported, an experienced web developer may attempt to use custom CSS to achieve a more personalized look and feel. However, Gladly cannot support any issues or undesired results arising from these customizations, as they fall outside the scope of the official support provided. Proceed with caution and understand that any modifications made through custom CSS could lead to unexpected behavior or conflicts within the application.
Understanding the above, adding custom CSS to a Chat can require a trial-and-error approach. The Chat is designed to avoid unintended styles being applied from the pages on which it is embedded, and many of its constituent elements are dynamically generated. However, most elements and attributes can be styled with the right selector.
Most selectors should start with #gladlyChat_container. For example":
#gladlyChat_container {
top: 10%;
}
#gladlyChat_container .message_customer:first-child {
color: magenta !important;
}Note that this can require some creativity! For example, one can’t style bottom because it is already styled by default with !important on a Chat — so instead use the inverse value with top.
Chat API
Check out Chat API for information about events, JavaScript, and more.