Configuration

This page describes configuration parameters that you can use to configure the look and feel of the widget.

As you will have seen from the Installation page, the widget is loaded by passing a few arguments to the WBBChatPlugin class constructor. An example of this is shown below.

Simple Example

new WBBChatPlugin({
    client: "wbb",
    pluginHost: host,
    fullScreen: false,
    // The min pixel width at which the popup should be used as apposed to full screen mode
    minPopupWidth: 600,
    // Client icon
    clientIcon: true,
    // Primary colour
    primaryColour: "019C8C",
    // Secondary colour
    secondaryColour: "435061",
    // Prevent the user from sending input other that clicking buttons
    hideInput: true
});

The object passed to the constructor are explained in the information below.

Required Parameters

client - This is the name of the workspace inside IA that contains your content. This value should be provided to you via WBB.

pluginHost - The HTTP url of the widget, should be https://wbb-chat-plugin.logicdialog.ai/ unless advised otherwise.

minPopupWidth - The width in pixels you would like the chat plugin to be.

clientIcon - Optionally display the avatar for the bot or not.

primaryColour - Entered as a hex value, ie 019C8C

secondaryColour - Entered as a hex value, ie 019C8C

hideInput - Removes the text input box at the bottom of the widget. Useful for button based chat projects.

Optional Parameters

typingIndicator - either true or false to turn on the typing indicator which will show to the user when an agent is typing.

persistBetweenPages - either true or false ( default true ). By setting this value to be false it will ensure that each time the page refreshes, a new conversation session will start. This will mean any previous conversation history will be no longer visible to the user.

showLeft - either true or false ( default false ). If set to true, will place the plugin on the left hand side of the page.

startBlock - configures the first message that will be shown to the user. For more information please see the configuration page.

typingIndicator - either true or false ( default false ). If set to true will show an animated typing indicator if a live agent is responding to the query.

typingBackground - Entered as a hex value, ie 019C8C - Sets the background colour for the typing indicator.

persistBetweenPages - either true or false ( default true ). If set to false then any refreshes of the page will cause a new session to start.

attentionTextEN - If set, will display an additional popup alerting the user to the user. This might be set to "How can i help you?" or something similar. Various properties then exist to set the shape size and colour of the attentionText bubble. These are as follows and each of them set the appropriate CSS properties for the element :

• attentionTextBackground

• attentionTextBorderColour

• attentionTextBorderWidth

• attentionTextBorderStyle

• attentionTextColour

• attentionTextPadding

• attentionTextFloat

• attentionTextHeight

• attentionTextWidth

In addition you can also specify the Attention Text in various languages. This is done by setting a property that starts with attentionText and includes the two letter language code as appropriate. For example, attentionTextEN or attentionTextCY.

enableSpeechToText - either true of false ( default true ). If set to false will hide the speech to text input button.

enableUploadFile - either true of false ( default true ). If set to false will hide the button that allows users to upload files.

enableEmojis - either true of false ( default true ). If set to false will hide the button allowing users to select an emoji to use in the conversation.

enableFullScreen - either true of false ( default true ). If set to false will hide the button that swaps the user to full screen mode. Note that this doesn't have any impact on the use of full screen when on mobile devices.