Style the look and feel of Glad App 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 Glad App seamlessly integrates with your site's overall aesthetic and branding.
Widget icon
The Glad App 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 Glad App, as well as its left-right positioning on the Glad App configuration page, which provides a user-friendly interface for customization. While applying additional, custom CSS to the Glad App 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 Glad App can require a trial-and-error approach. The Glad App 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 , eg:
#gladlyChat_container {
top: 10%;
}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 Glad App — so instead use the inverse value with top.
Glad App API
Check out Glad App API for information about events, JavaScript, and more.