Styles
Styles
The styles
object allows you to customise the appearance of your widget by modifying icons, fonts, and applying CSS styles.
styles: {
icons: {
Close: '<Some svg code here>',
WindowMinimize: {
src: '<Some svg code here>',
size: 18
}
},
widgetStyles: {
'.dg-chat-header': {
color: '#222',
backgroundColor: '#fff'
},
},
launcherStyles: {
'.dg-chat-launcher': {
color: '#222',
backgroundColor: '#fff'
},
},
fonts: [{
fontFamily: 'Avenir Roman',
type: 'woff2',
url: 'https://chat-assets.digitalgenius.com/avenir-roman.woff',
role: 'primary',
}],
}
Customization Options
- widgetStyles: Customize the CSS for the widget elements, such as headers, body, etc.
- launcherStyles: Customize the CSS for the launcher elements (the button to open the widget).
- fonts: Define custom fonts. The role property lets you specify the primary font, which will be applied throughout the widget.
- icons: Use custom SVG icons. You can either pass an SVG as a string or use an object to define the icon and its size.
Custom CSS
You can apply custom styles to any element within the DG iframes using widgetStyles
and launcherStyles
. These accept standard CSS properties, but since they are written in JavaScript, property names must be camelCased
, and values should be strings.
When styling, use class names prefixed with dg- to ensure proper targeting. For example:
'.dg-chat-header': {
color: '#222',
backgroundColor: '#fff',
textAlign: 'center',
borderRadius: '10px!important'
}
If your styles aren't being applied as expected, try adding !important
to force them to override the default DG styling.
Supported icons
The icons
object allows you to replace the default icons used throughout the widget with custom ones. Below is a list of supported icon replacements:
Value name | Replaces... |
---|---|
Close | Close icon |
WindowMinimize | Minimize chat icon |
Image | Image attachment icon |
Upload | Chat input upload icon |
PaperClip | Upload attachment icon |
AngleRight | Carousel arrow next icon |
AngleLeft | Carousel arrow previous icon |
Send | Send message arrow icon |
ArrowDown | Dropdown arrow icon |
Launcher | Icon displayed within the launcher button |
OpenInNewTab | Open in new tab icon |
Loader | Loading icon |
FileCircleCheck | Drag and Drop icon |
StarOutline | Star icon (stars CSAT) |
Star | Star Filled icon (stars CSAT) |
ThumbsUp | Thumbs up icon (thumbs CSAT) |
ThumbsDown | Thumbs down icon (thumbs CSAT) |
FaceYay | Yay face icon (smiles CSAT) |
FaceHappy | Happy face icon (smiles CSAT) |
FaceMeh | Meh face icon (smiles CSAT) |
FaceDisappointed | Disappointed face icon (smiles CSAT) |
FaceAngry | Angry face icon (smiles CSAT) |
Download | Download attachment icon |
Preview | Preview attachment icon |
FeedbackPositive | Optional icon for positive message feedback, falls back to ThumbsUp if not provided |
FeedbackNegative | Optional icon for negative message feedback, falls back to ThumbsDown if not provided |
Checkmark | Checkmark used in checkboxes |
Styling Widget Containers
The widget injects specific containers into your page, which can be targeted using the following IDs:
- #dg-chat: The outer container for the chat application.
- #dg-chat-widget: The container for the chat dialog.
- #dg-chat-widget-launcher: The container for the chat launcher.
- #dg-chat-widget-proactive: The container for proactive chat buttons.
To style these containers, you must apply custom styles in your website CSS that targets these selectors.
Additionally, you can style the dimensions (width, height) and position of these containers via configuration. For more details, refer to the widget position & dimensions section.
Updated 9 days ago