WebChat Tease Messages

Introduction

The webchat can display a tease message after a certain timeout or after the user has scrolled a certain percentage on the page. This is a message that is shown next to the webchat button to entice a customer to use the WebChat.

Configuration

This tease message can be configured with the following settings:

interface TeaseMessageSettings {
    message: string,
    showAsMessage: boolean,
    onScrollPercentage: number,
    onTimeout: number
}

These values can be set as follows:

• message: this is the message to be displayed, as html

• showAsMessage: a Boolean that indicates whether the message should be displayed in the message list of the webchat or only as a teaser

• onScrollPercentage: when defined, this will indicate the percentage a user must scroll until the teaser is shown

• onTimeout: when defined, this will indicate how much time must pass (in milliseconds) before the teaser will be shown

When both onScrollPercentage and onTimeout are defined, the first trigger will show the teaser. When neither is set, the teaser will be shown immediately.

Example

Below an example script that can be loaded into your website's html. In this example we loaded a webchat with a tease message:

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 = {
        available: {
            teaseMessageSettings: {
                message: {
                    'en': 'Hi\nHow can I help?',
                    'nl': 'Hoi\nKunnen wij u helpen?'
                },
            showAsMessage: true,
            showAsTeaser: true,
            onTimeout: 5000
            },
            state: 'Enabled'
        },
        away: {
            teaseMessageSettings: {
                message: {
                    'en': 'Hi\nWe are away right now.',
                    'nl': 'Hoi\nOp dit moment zijn we afwezig.'
                },
            showAsMessage: true,
            showAsTeaser: true,
            onTimeout: 5000
            },
            state: 'Enabled'
        }
    };
WebChat.load(config);
};
</script>

Previous Webchat 2.0 Config.

Copy

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript" src="webchat.bootstrap.js"></script>
<script>
window.onload = function() {
    const config = {
        teaseMessageSettings: {
            message: {
                'en': 'Hi\nHow can I help?',
                'nl': 'Hoi\nKunnen wij u helpen?'
            },
        showAsMessage: true,
        showAsTeaser: true,
        onTimeout: 5000
        }
    };
WebChat.load(config);
};
</script>