Installation

By adding a small piece of JavaScript on the page you can benefit from all the features that the chat plugin offers.

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.

Page Load Event

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.

Including resources

var host = 'https://wbb-chat-plugin.logicdialog.ai/';

// Add the WBB styles to the DOM
var $wbbStyles = document.createElement('link');
$wbbStyles.setAttribute('rel', 'stylesheet');
$wbbStyles.setAttribute('href', host + 'wbb-chat-plugin.css');
document.body.appendChild($wbbStyles);

// Add the WBB application logic to the DOM
var $wbbPluginScript = document.createElement('script');
$wbbPluginScript.src = host + 'wbb-chat-plugin.js';
$wbbPluginScript.async = true;
document.body.appendChild($wbbPluginScript);

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.

Create chat plugin

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
});

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 :

Complete Example

var host = 'https://wbb-chat-plugin.logicdialog.ai/';

window.addEventListener('wbb_plugin_loaded', function(event) {
 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
  });
} )

// Add the WBB styles to the DOM
var $wbbStyles = document.createElement('link');
$wbbStyles.setAttribute('rel', 'stylesheet');
$wbbStyles.setAttribute('href', host + 'wbb-chat-plugin.css');
document.body.appendChild($wbbStyles);

// Add the WBB application logic to the DOM
var $wbbPluginScript = document.createElement('script');
$wbbPluginScript.src = host + 'wbb-chat-plugin.js';
$wbbPluginScript.async = true;
document.body.appendChild($wbbPluginScript);

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

pageConfiguration