The chat widget has the option of providing a persistent menu of options. This menu appears next to the chat input and can contain any number of options you wish.

In this example we have a single option which will return the user to the Menu if clicked on.

Configuration of the persistent menu is currently done by WBB staff. When requesting a menu you will need to provide a list of the menu items, including translations into any other languages you support, and the associated block ID that you wish this menu item to go to. The block ID is found in the settings tab of a block, you will have to check the Advanced tick box to see it as in the image below.

The LogicDialog Chat plugin is a small component that can add web chat functionality to any HTML site. Using a few simple lines of JavaScript you can instantly add new functionality that can help users get the answers to their queries, and all kinds of other questions.

The widget is very customisable to accommodate all kinds of different brands, colours, sizes and fonts. Information in this guide will help you setup the widget in the way you need.

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.

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

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 .

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

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.

There are many situations where you might want to show a different message to the user when they start a conversation. For example, this might be on a particular day of the week, or based on the page they are currently viewing. Both IntelAgent and the chat widget support this use case and enabling it is very simple.

Just as you would pass other Configuration options, there is a startBlock option which can be set to change the initial block sent to a user. This can be used as follows :

window.addEventListener('wbb_plugin_loaded', function(event) {
  new window.WBBChatPlugin({
    // Other settings here...
    
    // Starting Block
    startBlock: getQueryParam("startBlock") || "intro"

The startBlock parameter shown is either the Block ID of the block you wish to trigger or the title of the block.

In this example, setting startBlock to either 5c62ead3ab358c3780bb60dc or intro will trigger the same block.

Conditional logic

While there may be lots of scenarios where you want to trigger different blocks, one such example might be based on the URL the user is currently on. The following example will show you how to add some code to the way you load the widget so that you will get a different block each time.

Note that by using the getQueryParam option as well we can also allow the starting block to be changed based on the URL the user has clicked on. For example, the following URL could open a page and specify a specific block to load.

We recognise that different people may want to interact with your bot in different languages and because of that we offer both static and dynamic language translation that can be triggered at any point in the conversation.

As you can see from this example, here we are getting responses in English first, but then after typing "I need help" in Welsh we then start to get responses from the bot in that language.

Providing Translations

The first option for this is around providing static translations for the bots responses. These are provided inside IntelAgent and you'd provide an alternate response for every bot response or training phrase.

Along with the configuration of the bot, you can also change the text shown to the user in various places, such as the button that opens the chat window, or the title.

These settings are specified in the within logicdialog. If you have multiple languages enabled, you will see an input box for each language that you support.

Changes made in this page are effective immediately.

The WBB Chat plugin makes use of a single browser cookie. This cookie, is called wbb-user-api and is used to authenticate the user and retrieve their session for situations where they close the browser, or refresh the page. No sensitive information is stored within this cookie, it is only used to hold a unique session ID. The cookie is valid for 1 week and after that will expire automatically within the browser.

The simplest way to create the chat plugin is through some JavaScript. This JavaScript needs to be hosted somewhere that your webpage can access. Typically this is with other files that your site depends on.

Once you are able to store a JavaScript file, we can start building it out.

First we need to wait for the page to finish loading. To do this we listen for the load event that the browser will trigger when the page is loaded.

window.addEventListener('wbb_plugin_loaded', function(event) {
  console.log("Window has loaded");
} )

In this example, you should see Window has loaded in the browser console if you have successfully added this code to your page.

Next we need to load the code for the chat plugin. This consists of a JavaScript file for the application logic, and a CSS file for the look and feel. We host this code for you and so all you need to do is add a reference to this file on the page. This can be done using JavaScript with the following code, inserted instead of line 2 in the example above.

If this code has worked successfully you should see Chat plugin loaded in the browser console.

Now that we have all the relevant files loaded, we now need to instantiate the chat plugin. This is done by creating an instance of the WBBChatPlugin class, and passing it some options. An example of this is shown below.

This code would be placed instead of inside the event listener which we created at the start. These are the default and minimum options for the chat plugin and following the completion of this task you should see a chat widget added to the page.

In the example above the client parameter on line 2 is the only piece you need to change. This references the bot you wish to connect to with this widget.

The full example is below :

For more information about the configuration options, please see the .

CORS stands for Cross Origin Resource Sharing and is a standard approach that browsers use to apply some security so that only a fixed set of resources can be used for a specific page.

Lets imagine our website, which is on https://www.wbb.ai is trying to load resources from a different website, https://webuildbots.ai. Although we might know that this is okay, because the domains do not match in a lot of cases this will be blocked by the browser. If it is blocked you will get an error in the browser console and anything provided by that resource won't be present.

If you get an error in the browser, it'll look something like this :

Fortunately, if you see an error like that there is an easy way of fixing it.

From the settings page in Logicdialog there is a Web Plugin section and within this you'll see a section for CORS Settings. This list might already be populated with existing configuration values, however it may also be empty if this is a new bot.

To add a new CORS value, click on the Add URL button at the top right of the screen and enter the domain you wish to allow. In the case of the error above, the domain you'd need to add is https://www.wbb.ai . Specifically, is the domain shown after the error message says from origin. Do not include any other parts of the URL of the page, just the domain.

Once you've then saved the values, the chat plugin should work on the page. You can add any number of CORS domains to the settings for cases where you want to have your bot on multiple websites.

For more information, please see the CORS page on Wikipedia.

As well as passing the configuration options via the constructor of the WBBPlugin object, you can also pass the parameters in the page URL.

For example, if you want to have the widget load on a specific page called test.html then by adding the following code to you JavaScript you could load the page test.html?primaryColour=#443388 and see the primary colour of the widget change.

function getQueryParam(key) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i =

The code above would be added inside the addEventListener part of your code, as mentioned in the Installation guide.

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

In this example, line 10 either looks for the parameter primaryColour via the query parameters on the URL, or if it is not found, falls back to using the default value of 007FAD. You can use this same approach for any parameters you wish to be able to specify on the URL.

By only using the getQueryParam function on the parameters you want users to be able to change, you ensure that the system can't be used in ways you don't intend.

While the settings on the widget should give you the flexibility you need, sometimes there is a need to make additional changes. With that in mind the widget can also accommodate additional CSS that you want to use.

From the page select the Web Plugin option, under the Style tab you'll see a setting called Additional Styling

The value of this setting is the URL that points to an additional style sheet to load. logicdialog does not host this file and so you'll need a mechanism to host this additional CSS. Typically your existing website will have mechanisms to do so, although this will vary by platform.

Our chat plugin is loaded as an iframe and as a result is

As of June 2022 the method of installing the chat plugin is changing. This change requires a short configuration update however by moving towards this new approach it allows us to more quickly provide new features and improvements to all of our customers.

Please note, the old approach is being sunset on 1st July 2022 and so this page outlines the difference between the two approaches and how to migrate between them.

Old Method

In previous versions customers would have been provided with unique URLs for both the JavaScript and the CSS needed for the application. For example, the following <script> tag might have been used.

In this example, the URL for the resources contains monmouth-county-council. Using this bespoke URL meant that you had to provide very little other settings, and specifically you did not have to specify a client parameter, which is explained in more detail below.

New Approach

The new approach makes it much easier for us to deploy and maintain new fixes, yet still makes it simple to add the plugin to a webpage.

To migrate to the new approach there is generally two changes that you'll need to make.

• Swap over the URL to use the generic URL

• Add a client parameter to the configuration used.

These are explained in more detail below.

New URL

To make this change, simply replace any instances of the bespoke URL, with the new URL for the plugin which is https://wbb-chat-plugin.intelagent.ai. For example, if you are referencing the JavaScript file directly as in the example above, then the equivalent for this line of code would be :

You will also need to ensure that the pluginHost parameter as shown below is also updated.

Client Parameter

Once you have made the change to the URL then you now also need to provide additional information to the configuration so that it knows which application to use. This is again a simple change and only requires you to add a client parameter to the object that you pass to the WBBChatPlugin class. For example, to modify the example above it would look something like this :

In this example, we've added line 4 into the configuration. The value for the client parameter needs to be the first part of the previous URL used. For example, if your URL was previously https://monmouth-county-council-wbb-chat-plugin.webuildbots.ai then the value of the client parameter needs to be monmouth-county-council as it is the part of the url before the -wbb-chat-plugin.

Once you have made these two changes, the plugin should look and work exactly the same as it did previously.

Please refer to the installation instructions for more details.