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:

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.