X

The Visual Builder Cloud Service Blog

Integrating Chatbots into VBCS Applications

John Jullion-Ceccarelli
Product Manager

Chatbots are integrated into VBCS using the Chatbot Web SDK. The hardest part is that you need to "configure" the SDK libraries to hardcode the URL of where the libraries will be deployed into the library JavaScript itself. This means you can't just add the libraries to the /resources directory of your application, since that URL changes depending on whether the application is in development, staging, or live mode. You also can't add it to another VB project, since its /resources directories are generated into randomly named directories when they are published. You therefore need to configure and stage your SDK to some other external location then point to it from the VBCS pro

Note that there is no HTML component for the chatbot that you drag and drop from the component palette. You just add the JavaScript to the pages where you want the chatbot to appear and the libraries inject the elements into the DOM at runtime.

Creating a Channel for the Bot

We won't get into how to create a bot here. There are plenty of resources on that. Once it's created, you need to create a web channel for the bot.

  1. Open the chatbot in your Mobile Cloud/Digital Assistant UI
  2. Click the Settings tab on the left.
  3. Click Channels at the top and click New Channel
  4. Name the channel, set the type to Web Channel, and make it enabled.
  5. Copy the App Id property for the channel.

Configuring and Staging the Chatbot Web SDK

Download the OMCe Bots Client SDK for JavaScript from OTN and unzip it in a directory. Follow the instructions in the readme to configure and host it on a publicly available location.

Embedding the Chatbot in Your Application

Like we said, there is no HTML code or CCA to drop into a page. Instead you add the JavaScript to the PageModule and AppModule Javascript for your app. If you wanted the chatbot to only be available in one flow of your application, you would add the code to the FlowModule instead of the AppModule.

  1. Create an application called ChatbotClient and in that Web App called i.e. FlowerStore. (My chatbot allows you to order flowers; that's why I called it FlowerStore.)
  2. Open the application editor of FlowerStore by clicking the top-level FlowerStore node in the Web Apps tab.
  3. Open the JS tab of the editor and enter the following code in the the AppModule function - Make sure to replace XXX at the last line with your actual bot-sdk project URL:
    define([], function() {
      'use strict';
    
      var AppModule = function AppModule() {
    
        ! function(e, t, n, r) {
          function s() {
            try {
              var e;
              if ((e = "string" == typeof this.response ? JSON.parse(this.response) :
                  this.response).url) {
                var n = t.getElementsByTagName("script")[0],
                  r = t.createElement("script");
                r.async = !0, r.src = e.url, n.parentNode.insertBefore(r, n)
              }
            } catch (e) {}
          }
          var o, p, a, i = [],
            c = [];
          e[n] = {
            init: function() {
              o = arguments;
              var e = {
                then: function(t) {
                  return c.push({
                    type: "t",
                    next: t
                  }), e
                },
                catch: function(t) {
                  return c.push({
                    type: "c",
                    next: t
                  }), e
                }
              };
              return e
            },
            on: function() {
              i.push(arguments)
            },
            render: function() {
              p = arguments
            },
            destroy: function() {
              a = arguments
            }
          }, e.__onWebMessengerHostReady__ = function(t) {
            if (delete e.__onWebMessengerHostReady__, e[n] = t, o)
              for (var r = t.init.apply(t, o), s = 0; s < c.length; s++) {
                var u = c[s];
                r = "t" === u.type ? r.then(u.next) : r.catch(u.next)
              }
            p && t.render.apply(t, p), a && t.destroy.apply(t, a);
            for (s = 0; s < i.length; s++) t.on.apply(t, i[s])
          };
          var u = new XMLHttpRequest;
          u.addEventListener("load", s), u.open("GET", r + "/loader.json", !0),
            u.responseType = "json", u.send()
        }(window, document, "Bots", "XXX");
    
      };
    
      return AppModule;
    });
    
  4. Open the page editor for main-start. Open the JS tab of the editor and enter the following code in the PageModule function, replacing your-app-id with the App Id of your bot:
    define([], function() {
      'use strict';
    
      var PageModule = function PageModule() {
    
        Bots.init({
          appId: 'your-app-id'
        });
    
      };
    
      return PageModule;
    });
    
  5. Run your app and click the chatbot icon that appears on the page.

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.