Recently I have been working on a customer chatbot project. Although it was not a direct requirement, I decided to look into embedding the chatbot in a web application too. You will never know what the future brings. It struck me that is I could not find any blogposts related to this topic. The only thing is a youtube video by Oracle PM (see resources below) describing how to do this.
There can be several reasons as why this has not been blogged about:
There can be several reasons as why this has not been blogged about:
- Nobody is doing chatbot integration in a Javascript UI yet.
- Oracle Documentation is clear enough.
- It is very simple so why bother blogging.
What do you need?
For this solution to work, you need to have an instance to Oracle Mobile Cloud Enterprise (OMCe), or Autonomous Mobile Cloud Enterprise (AMCe) in order to use the chatbot functionality. I have access to AMCe and can use the sample CrCPizzaBot. This bot is an example that ships with AMCe (and OMCe ?) Note that the solution described below works with any Oracle Cloud Chatbot.
Step one: Download the SDK's
To download the SDK's you need to click the downloads link in your Cloud Environment. This will take you to the page that contains all the downloads for Oracle Autonomous Mobile Cloud Enterprise (AMCe).
After accepting the License Agreement, you can download the sdk: Bots Client SDK for JavaScript v18.2.3.0 Note the the version might be confusing. I am currently on 18.2.5 but the file that I downloaded is 18.2.3. It turns out to be the correct file even though the filename suggest differently.
Note that the SDK (after being unzipped) has a readme file with all of the steps in this blogpost. So you might want to read up on that one too.
Step two: Configure the SDK
After downloading the SDK, you need to unzip it. This can be done at the download location. After unzipping, the SDK is ready to be configured. Configuring is rather easy. Simply invoke ./configure in the location where you unzipped the SDK. Add the location of your webserver where you will be hosting the static content. In my case I use a local glassfish server running port 8080.
./configure http://localhost:8080/chatbot-blogpost-demo/static/
Step three: Create a simple JET application to hold the chatbot
For this you can use the Oracle JET command line interface, and issue ojet create:
ojet create chatbot-blogpost-demo --template=navbar
It will create a simple JET application called chatbot-blogpost-demo.
The only thing to do in the JET application is to add a couple of lines of javascript code embed and initialise the chatbot.
First of all you need the a piece of code towards the end of the `head` section on your page. This piece of code is also in the readme file (near line 50) . Make sure to replace `sdk-folder-url` with the URL where the SDK is hosted. In the case of this demo that is:
- http://localhost:8080/chatbot-blogpost-demo/static/
After copying the code the index.html of the JET application, it would look like this:
After changing the it looks like this:
Finally you need to initialise the bot by adding the Bots.init towards the end of the body of your page.
In this piece the app-id needs to be changed with the app-id of the chatbot's web channel. This is what we will create in the next step.
- http://localhost:8080/chatbot-blogpost-demo/static/
After copying the code the index.html of the JET application, it would look like this:
After changing the it looks like this:
Finally you need to initialise the bot by adding the Bots.init towards the end of the body of your page.
In this piece the app-id needs to be changed with the app-id of the chatbot's web channel. This is what we will create in the next step.
Step five: Adding a new WebChannel to you bot in the Mobile Cloud
In order to use the bot in your JET application, the Bot needs to be exposed over a web channel. Such a web channel can be created in Mobile Cloud. Give the channel an appropriate name and make sure to select WEB from the dropdown.
After creating the web channel you need copy the value of the app-id and provide it in the Bots.init javascript code.
Step six: Deploying the JET application
I will run the JET application (and the chatbot SDK code) as static content on my glassfish server which I happen to have ready on my development machine. I simply put all stuff (the configured SDK files, and the web folder of my JET application) in the docroot of my glassfish server. It suits the purpose of this blogpost.
NOTE: You can also choose to run all as a node application and deploy it somewhere to the cloud.
So after 'deploying' my docroot contains a folder 'chatbot-blogpost-demo'. In that folder I have the web folder of my JET application, and a folder called 'static' where I copied all files that were prepared in step 2 (so just the files, not the folder).
A movie showing this is hosted on youtube:
NOTE: You can also choose to run all as a node application and deploy it somewhere to the cloud.
So after 'deploying' my docroot contains a folder 'chatbot-blogpost-demo'. In that folder I have the web folder of my JET application, and a folder called 'static' where I copied all files that were prepared in step 2 (so just the files, not the folder).
Step seven: Running the chatbot in the JET application
Now when you navigate in a browser to the URL that hosts your application, you will see a tiny chatbot icon in the lower right corner of the page. When you invoke that icon, you can use the bot.A movie showing this is hosted on youtube:
Conclusion
Embedding a chatbot in an oracle JET application (or any javascript application) is really easy. It just takes two replacements in code snippets, and you are good to go. I might post something on how to configure the embedded bot a bit more, but the simple integration as described in this post is really really easy.
Resources
Oracle Mobile Youtube Channel: Adding bots to a web channel.
Developer Guide Mobile Cloud: Bots client SDK for Javascript.
Comments