Using Parameters in the URL

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.

Helper Function

function getQueryParam(key) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] === key) {
      return pair[1];
    }
  }
}

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

Modify the instantiation

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: getQueryParam("primaryColour") || "007FAD",
  // Secondary colour
  secondaryColour: "435061",
  // Prevent the user from sending input other that clicking buttons
  hideInput: true,
});

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.