WebChat Theming

By default, the webchat has a light and a dark theme. The colors used in these themes can be altered and new themes can be added as needed.

Customizing themes

In the Configuration.templates.colors object a new color theme can be set. This should be a JavaScript array of Theme objects. A theme object looks as follows:

interface Theme {
    themeName: string,
    textColor: string,
    textColorLight: string,
    iconColor: string,
    backgroundColor: string,
    borderColor: string,
    primaryColor: string,
    hoverColor: string,
}

Each of these themes should have a themeName, which is unique. When light or dark is used as a name, the theme will take the default light or dark theme and replace the colors in it with those provided in the theme. When a new name is used, the colors from the light theme are used combined with the new theme. These themes can be used to switch to using the toggleStyle command (see the next chapter: “Switching themes”).

Example

Below an example script that can be loaded into your website's html. In this example we loaded a webchat with the light and dark theme altered:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript" src="webchat.bootstrap.js"></script>
<script>
window.onload = function() {
    const config = {
        templates: {
            themes: [
                {
                    themeName: 'light',
                    primaryColor: '#0080ff',
                    backgroundColor: '#f7f7f7',
                    borderColor: '#e2e2e2',
                    iconColor: '#031546',
                    textColor: '#031546',
                    textColorLight: '#8089a2',
                    hoverColor: '#0058cc'
                },
                {
                    themeName: 'dark',
                    primaryColor: '#0080ff',
                    backgroundColor: '#121212',
                    borderColor: '#4D4D4D',
                    iconColor: '#F7F7F7',
                    textColor: '#F7F7F7',
                    textColorLight: '#898989',
                    hoverColor: '#0058CC'
                }                             
            ]
            }
        };
WebChat.load(config);
};
</script>

Switching themes

The currently used theme can we changed as follows:

WebChat.toggleStyle(themeName);

Where themeName is a string and either 'light' or 'dark' when using the default webchat theming, or one of the theme classes added in a custom colors configuration. When only the dark and light theme are used, a theme button will be shown giving the user the ability to switch themes on the fly. In this case the webchat will also automatically switch between the light and dark theme according to the user’s device settings.

Loading custom themes by default

After configuring your theme, you can load it by default on the  "WebChatLoaded" event, see: WebChat Loaded Event

Example loading custom theme names pink: 

window.addEventListener('WebChatLoaded', function() {
    WebChat.toggleStyle("pink");
});

Browser restrictions

Theming is only supported on browsers that support css variables. For older browsers, like internet explorer, only the first theme in the themes configuration is used. By default this will be the light theme. The theme button will not be visible in these browsers and no automatic theme switching will occur.