Configuring the Web Client display (version 2 deprecated)

Note: Version 3 is now available. We recommend that you use version 3 for all new Web Clients, and that you upgrade any existing implementations to this version as soon as possible.

You can configure the way that the Web Client displays on your web page. This includes display properties such as the title, button icons and labels and other effects such as the fade in time. You can also call custom methods.

For example set the display options like this:
$(function() {
    var options = {
         host: "https://designer.converse.ces.pitneycloud.com",
         container: "#chatbot",
         showCloseButton: true,
         title: "This is my chatbot.",
         placeholder: "Enter text here...",
         serverUserImage: "https://designer.converse.pitneycloud.com/public/img/pb-circle-mark.png"
     };
     newChat = new converseChat(options);
})

Display options

The display options are:

Option Description Default
host Mandatory string. Sets the domain URL where the bot is hosted. For bots deployed for production use, this is always: "https://designer.converse.pitneycloud.com"
container Mandatory string. The ID of the HTML div tag that holds the chat window.
title Title displayed at the top of the chat window.

Accepts a string value.

Chat
placeholder Text initially displayed in the message box.

Accepts a string value.

Type a message...
serverUserImage Mandatory image URL. This image is displayed next to the bot message. The recommended image ratio is 1:1, minimum size 40px by 40px.

Value should be URL of the image you intend to use. Accepts a string value.

EngageOne circle icon
FADE_TIME Length of time to animate the fading in of the chat window. Accepts a number, in milliseconds. 10 milliseconds
EDATE_TIME How often the date/time banner is redisplayed in the chat window. Accepts a number, in minutes. 10 minutes

Changing which buttons are displayed

Button options Description Default
showCloseButton Toggles the visibility of the close/hide button. Set this to false if you do not require this button. true
hideIcon Icon to use as the button for closing or hiding the chat window. Accepts a glyphicon icon, in string format. For example:

hideIcon: "glyphicon-remove"

For accepted icon names, see: https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

glyphicon-minus
showSettingsButton Toggles the visibility of the Clear Chat button. Set this to false if you do not require this button. This button always uses the icon glyphicon-cog. true
hideSendButton Toggles the visibility of the send button. Set this to false if you do not require this button. true
sendButtonTitle Label of the send button. The maximum number of characters depends on the width of the container div.

Accepts a string value.

Send
showToolbar Toggles the visibility of the Attachments button . false

Options for calling custom methods

Callback option Description
sendCallback Use this to call a custom method whenever a message is sent from the Web Client to the bot. For example if validation is required when messages are sent.
receiveCallback Use this to call a custom method whenever a message is sent from the bot to the Web Client. For example if you want the bot to notify the user in some way.
hideCallback Use this to tell the bot that the user has hidden the chat window. The bot can then respond by changing the style of the chat window.