Adding Chat Bot To A Website Using SAP Web IDE – Part One

Over the last few months I have become more interested in chat bots and how they can serve customers.  After a bunch of research and testing I decided to start a project in order to learn about bots.

This is the first of 2 articles that I have planned.  In this article, I explain what a chatbot is and show how to get started using SAP Web IDE.  In the follow up article I will finish the integration to a chatbot.  I am planning on using Amazon Lex at the moment, however that may change.

Web IDE For The Front End

I decided to use SAP Web IDE to develop the front end to the project, as Web IDE allows fast yet robust development of sites that can be deployed easily.  Web IDE was the perfect fit for this learning projects as I could simply log into the web based IDE from any location and work on the project.

What Are Chatbots?

Make no mistake, when a person is chatting with a bot it is simply a conversation with a computer.  The chatbot is an automated response system that may initiate a conversation and or may , respond to your questions.  B or perform tasks.

Chatbots communicate with a person in 1 of 2 methods  First is using a text based interface where the person is typing messages and reading responses, secondly, the user may use a voice based system like Siri or Alexa to communicate with the bot.

Natural language processing(NLP) is used by bots to parse the question presented by the user. The concept NLP has been around since the 1950s, and in use since the 1970s.  However, only recently has NLP become mature enough for companies to put it in front of their customers.

What Can Chatbots Do?

Bots can do 2 basic functions, answer questions and perform automated tasks.  

Many websites are using bots to automatically answer customer questions.  For instance, a health food site may implement a bot on their site. Visitors to the site will be able to ask the bot questions, such as “Show me 5 tasty recipes with kale as the main ingredient”.  The bot will use NLP to process the request, returning a relevant answer or possibly a list of recipes for the user to view.

There are an unlimited number of applications for bots, two that may become popular quickly are banking and shopping.  For instance, banks can add bots to the user experience allowing users to simply ask “what is my account balance” or “how much did I spend on food last month”.  For shopping, the store will have a bot that will allow you to ask questions like “when will my shoes arrive” or “order more laundry detergent”.

Where Can People Use Bots

Bots are(or will be) accessible  on any channel where you interact via text or speech such as a web browser, phone app, Siro, Alexa or Google Assistant.  Each channel will have the ability for you to choose which bot you would like to access, once the bot is chosen, you can they start typing to speaking.

For bots that access sensitive information , you will need to connect your channel(phone, computer etc) to the bot.  For instance, if you are using Alexa on your Amazon device, you will have the ability to find the bot for your bank and connect to is using a command like “connect to the [my bank name] bot”. Alexa will then find the appropriate bot and ask go through an authentication procedure before the connection is established.  One the channel is connected to your banks bot, you will be able is ask questions and initiate actions.

Creating A Shell Application With Web IDE

Here I will explain the basics of getting started with Web IDE and creating the shell application.  If you don’t already have a SAP account, you will can follow these instructions to open your account. If you do have a SAP account, log in to the account.  Once you have an account and are logged in follow these instructions…

1) Hover over “Developer”, then clock “SAP Web IDE”

2) Click “Sign up for free” then follow sign up instructions

3) Click “Launch SAP Web API”

4) Click “Quick Start with Layout Editor”

5) Double click the index.html file to open it for editing

6) We will not be accessing any data or sample data in this app, so we can remove the sample data section from the index.html file – highlight this script and delete it.

7) Your index.html file should now look like this

7) Add a H1 tag to identify the page – this also lets us see that the changes we are making in the html page are reflected when the project is ran

8) Run the project – Note that your web browser may be blocking the popup

9) Here we have the application running, the shell is now created for adding Chatbot functionality

Whats Next

At this point we have discussed what a Chatbot is and how people can interact with bots.  We have also created a simple shell application that we will build the bot functionality on.  In the next article, we will build the bot and integrate the bot into the shell application.

UPDATE 5/1/2018 – After looking at a bunch of bot technologies, I decided on https://recast.ai/ which is owned by SAP.  I also decided to use the next article to build the bot, as the build process will require some explanation.  So the next article will not be about the integration, but the bot build.