A default theme of colors, styles, and fonts is applied to the widget out-of-the-box. These are defined utilizing CSS variables which you can override with your brand styles. You can pick and choose what you override, you don't need to modify all the values.
Theming
To use CSS variables you'll need to add variables to your stylesheet or <style> tag in your HTML document. In the examples below we’ve used <style> tags. Add the style tag to the <head> of your document.
Changing the font
There are two types of fonts you can use, web-safe fonts and custom fonts. Web safe fonts are ones that are already included on most computers. They do not require any font installation. Custom fonts will require you to install the font. You can list multiple fonts, it will try and use the first one defined and fall back to the others.
Usage
Font Change impact on Greeting Message
Palette
The widget uses the following colors for control buttons, backgrounds, and content cards.
Palette customization options for UI buttons
Palette customization options for UI buttons
Box shadow
We've used four different shadow levels, sm, md, lg, and xl.
Usage
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article