How to Customize InstantChat.css
Articles related to customization are written for a technical audience who have experience in web development. Knowledge of HTML, CSS, and JavaScript are required.
You can customize the appearance of the Instant Chat interface using Cascading Style Sheets (CSS). By default, the Instant Chat interface is determined by InstantChat.css. You can copy and edit InstantChat.css to create custom styling or you can create your own custom CSS. If you create a custom CSS file, you need to specify the path in your html page by adding the path to your hosted CSS:
Important: A Rescue Master Administrator must allowlist the host(s) where your JS and CSS custom resources are self-hosted. For more information for Administrators, see section Administration Center Settings in Fully Customized Self-hosted Solutions.
ICLoader.HostedCSS = "http://[YourSite]/InstantChat.css";The following samples show CSS classes and the user interface elements that these classes affect. For a complete list of CSS classes, see How to Customize InstantChat.css.
Note: .ic_waitingtime only appears once per session. For example, .ic_waitingtime does not appear during reconnecting.
Note: .ic_statusicon_waiting appears throughout the session whenever the customer is waiting for the technician.
Article last updated: 27 September, 2022