Embedding the Web Client

To embed the Web Client on your web page, copy the JavaScript snippet that's preconfigured for the bot and paste it into the HTML of the web page. The snippet will contain your tenant ID and the bot ID. This snippet will only work when installed on a web page with the correct dependencies (see Web Client dependencies).

To copy the snippet:

  1. Open the bot in Designer.
  2. On the Designer tool bar, click Config and go to the Integration tab.
  3. On the Integration tab, expand Web Client to display the JavaScript snippet. Copy the snippet. It will contain your tenant ID and the ID of the current bot.

For example:

<script type="text/javascript">
    $(function() {
        var options = {
            placeholder: "Type a message...",
            host: "[CONVERSE SERVER]",
            converseHost: "[CONVERSE SERVER]",
            container: "#chatcontainer",
            showToolbar: true,
            reConnectDelay: 10000,
            tenant: "sa9299b",
            botId: "95d69a2d-10c3-4cf8-a9c4-93a9ad00a2a6",
            title : "Chat With Us",
            hideIcon: "fa-times", // See: https://fontawesome.com/icons?d=gallery&m=free
            startPhrase: "welcome",
            user: {
                id: "TT00001",
                first_name: "Friend",
                last_name: "Any",
                full_name: "Customer Any"
            }
        };

        var webClient = ConverseWebClient.init(options);
        webClient.show();
    });
</script>

The Web Client is an instance of the converseChat class where:

  • host is the domain URL where the bot is hosted.
  • container is the id of the HTML div tag that will display the Web Client. For more details, see Adding a container for the Web Client.
  • startPhrase sets the word or phrase that triggers the bot to send the first message as soon as it is displayed in a browser. See Configuring the Web Client display.
  • showtoolbar is an example of one of the display options.
  • user passes in any user information captured by the bot (see User details).
Alternatively you can pass these options in when you instantiate the bot. For example like this:
var options = {
    host: "https://designer.converse.pitneybowes.com",
    container: "#chatContainer",
    showCloseButton: false
};
var newChat = new converseChat(options);

For more details, see Configuring the Web Client display.