Configuring the Web Client display

You can configure the way that the Web Client displays on your web page. Display properties for the Web Client include 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: "[CONVERSE SERVER]",
         converseHost: "[CONVERSE SERVER]",
         container: "#chatbot",
         title: "This is my chatbot.",
         placeholder: "Enter text here...",
         showSettingsButton: false,
     };
     newChat = new converseChat(options);
})

Mandatory host and container options

Option Description Default
host

Mandatory. The URL of the web channel. For bots deployed for production use, this is:

https://webchat-designer.converse.pitneybowes.com/

converseHost Mandatory. The URL of the server. For bots deployed for production this is:

https://designer.converse.pitneybowes.com/

container Mandatory string. The ID of the HTML div tag that holds the chat window.

Display options

The display options are:

Option Description Default
title Title displayed at the top of the chat window. Chat
placeholder Text initially displayed in the message box. Type a message...
startPhrase The word or phrase that will trigger the bot to run when displayed in a browser. If used, set this to the value in the first interaction's When we receive field. Leave this blank if you want the bot to wait until the user sends their first message. There is no default.
disabledPlaceholder Text that will be displayed in the message box when text entry is disabled for one of the Question interactions.
Note: You will need to add this to the options section of the Web Client code that you copy from the Integration tab.
Please choose one of the above answers
disconnectedText When the user is disconnected, a red icon is shown at the top of the chat window. This text displays when the user hovers over the icon. Disconnected - trying to reconnect
serverUserImage This image is displayed next to each message sent by the bot. The recommended image ratio is 1:1, minimum size 40px by 40px.

Enter the URL of the image you intend to use. For example:

http://myserver/images/myuser.png
/pb-circle-mark.png
clientUserImage This image is displayed next to each message sent by the user. See serverUserImage for details.
FADE_TIME Length of time to animate the fading in of the chat window. Accepts a number, in milliseconds. 10 milliseconds
REDATE_TIME The number of minutes to wait before re-displaying the date/time banner in the chat window. 10 minutes

Buttons and attachments

Button options Description Default
showCloseButton Hides (false) and shows (true) 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 Font Awesome icon, in string format. For example:

hideIcon: "fa-times"

For accepted icon names, see: https://fontawesome.com/icons?d=gallery&m=free

fa-times
showSettingsButton Hides (false) and shows (true) the Clear Chat button. Set this to false if you do not require this button. true
hideSendButton Hides (true) and shows (false) the Send button. Set this to true if you do not require this button. false
sendButtonTitle Label of the Send button. The maximum number of characters depends on the width of the container div. Send
showToolbar Hides (false) and shows (true) a toolbar at the bottom of the chat window. Currently there is only one tool available: the Attachments button. false
showBrowseButton Hides (false) and shows (true) the Attachments button . This is only displayed when showToolbar is also true. false
downloadText The alt text that appears on the button to download the file types that are not images. (Available in version 3.1 and later.) download
downloadErrorText The error message that is displayed if the attachment can't be processed. You can access the filename of the attachment using the variable ${name}. (Available in version 3.1 and later.) Invalid extension or size [${name}] can't send attachment

Displaying HTML messages

Option Description Default
allowHTML Set this to true to use HTML formatted messages.

For example, if you configure an interaction to send the message <b>Hello</b>, and you set allowHTML:false, then the user sees <b>Hello</b>. If you set allowHTML:true then the user sees Hello in bold.

Note: You can only use HTML formatting in interactions if the bot is to be used with the Converse Web Client. Other channels such as Facebook ignore HTML formatting.

The Live Preview tab does not show the HTML formatting.

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 by clicking the close button. The bot can then respond by changing the style of the chat window.