Hi everyone,
Here is a simple tutorial for the SAP Conversational AI Tutorial Challenge.
In which, we will explain step-by-step how to build your own chatbot.
This tutorial will show you how to build a chatbot for:
Once, you’re logged in, you start by clicking on the button + NEW BOT in the header section, at the top right of the screen.
Then, you choose one or more than predefined skills for your bot.
After that you enter a name for your bot, here we chose “AYMAX”.
You can:
(Topics are keywords that can define your bot like “fashion”, “games” or “jobs”)
You can keep your bot public since there’s no private info involved, but you can update this setting later.
Congratulations, now you have created your first empty Chatbot.
Now, let’s dive in even further and try to understand the life cycle of a bot.
There are four important phases in the life of deployment of the bot :
Training, Building, Connecting and Monitoring.
This is the brain of our bot, where all its understanding is stored in the form of intents.
An intent is a collection of sentences that all have the same meaning, even though they can be worded very differently. When a user sends some text to our bot, the algorithm compares it to the phrases in our intents. Then it checks whether the text is close enough to one of them and decides what the intention of the message is.
Now we will create 3 intents :
We will write now our expressions ( we should write at least 30 expressions)
We will write now our expressions. ( we should write at least 30 expressions)
We will write now our expressions. ( we should write at least 30 expressions)
Now that we have filled the brain of our bot with the knowledge it needs, we click the Build tab.
The Build tab is where we find the Bot Builder, which helps us construct the conversation flow of our bot using skills.
Each skill represents one thing that our bot knows how to do. Skills can interact with each other and can be either complicated (such as managing payment by credit) or simple (such as answering basic questions).
We will go back to the Build tab and click on + Create skill on the left of the screen.
We Click on our created skill, then we go to the Triggers tab. We want to activate our skill when an expression contained in the @aymax-definition intent is present.
Now that the condition has been triggered the chatbot can now start the action.
We start by creating a new message group and apply the condition to it.
Now, let’s test our Chatbot knowledge by clicking on the chat preview:
We Click on our created skill, then we go to the Triggers tab. We want to activate our skill when an expression contained in the @aymax-domains intent is present.
Now that the condition has been triggered the chatbot can now start the action.
We start by creating a new message group and apply the condition to it.
We will test our chatbot now.
We Click on our created skill, then we go to the Triggers tab. We want to activate our skill when an expression contained in the @aymax-careers intent is present.
Now that the condition has been triggered the chatbot can now start the action.
We start by creating a new message group and apply the condition to it.
▪ A webhook is a simple HTTP call to your back end.
▪ To configure your HTTP call, click CALL WEBHOOK when defining requirements or actions in the Bot Builder.
▪ If you choose Call Webhook, the response should be in an SAP Conversational AI-specific JSON format that can be directly mapped to the user interface or will be used in the memory.
▪ This option will not be covered in this unit. For more info, please go to the Appendix.
▪ An API sends your request to the provider application and then delivers
the response back to you.
▪ To configure an API request, click CONSUME API SERVICE when defining requirements or actions in the Bot Builder. The steps to configure the authentication, header, and body are the same as the Webhook.
▪ If you choose Consume API Service, a variable called {{api_service_response}} will be created from a JSON object.
We will work now with a call webhook.
We will create now a node js application that will be deployed in cloud foundry.
The code of the application is in https://github.com/KARRAAhmed/chatbot_aymax/blob/main/TEST/Test/server.js
Check the method getJobs which will return a JSON response that contains a carousel of the available jobs in AYMAX
We will test our chatbot now.
Let s start now with our second chatbot.
We will follow the 1st step just like in the other chatbot.
We create our new intents: Aymax-coll and Aymax-cra
Next, we go to the Requirements tab and create the first requirement. Here, we’ll ask for some information that is necessary for the action to work properly. In our case, what we need is the email manager. The Requirements tab will extract the entity and save it to the bot’s memory.
Let’s create a requirement that asks the bot to save the recognized #email entity into a memory variable called email.
Now that the condition has been triggered the chatbot can now start the action.
We start by creating a new message group and apply the condition to it.
We will work with a call webhook.
Now we need to check the method getColls which return a JSON response contains a list of collaborators https://github.com/KARRAAhmed/chatbot_aymax/blob/main/TEST/Test/server.js
Let test our chatbot now.
Now we need to check the method getCRA which return a JSON response that contains a list of collaborators status https://github.com/KARRAAhmed/chatbot_aymax/blob/main/TEST/Test/server.js
Let's go back to the skill Aymax-def and try to use the call service approach
And we need to check the method getDEF in https://github.com/KARRAAhmed/chatbot_aymax/blob/main/TEST/Test/server.js
▪The Webchat channel is a light and customizable channel to fit any chatbot built for a web page.
▪We can use the default version of the Webchat.
▪ We can find Webchat on the CONNECT tab of the SAP Conversational AI platform.
▪ We can configure details like color, the title of the button, bot picture, user picture, and so on.
▪ We add the following script to our web page to get Webchat:
We will download the SAP Fiori launchpad plugin and add the chatbot script inComponent.js and we run the Component.js https://github.com/KARRAAhmed/Chatbot_plugin/blob/main/ChatbotPlugin/Component.js
Our chatbot will only be available for integration on a Facebook page – not on a personal profile. This means we must either create a Facebook page or have an existing page that we can use with our bot.
This is a page Facebook that I had created for this tutorial.
To publish our chatbot on your Facebook page, we need to create an app that connects SAP Conversational AI and your Facebook page. We do this at https://developers.facebook.com/ (make sure you are logged into Facebook).
First, we choose My Apps at the top right of the screen and then we choose + Create App. Second, we give the app a name (e.g., Aymax-chatbot) and enter your email, then click Create App ID.
1. On the left of your Facebook dashboard, we choose the plus symbol after PRODUCTS.
We now see Messenger under PRODUCTS on the left of the screen
. ▪ A login dialog asks you to confirm your account. Click Continue as ….
▪Select your Facebook page, and click Next.
▪ Click Done.
3. Back on the Settings screen, click Generate Token. Click I Understand, and copy the token, and click Done.
▪ Choose Messenger.
▪ Under Get your app secret, paste the token into the Page token field. Leave the page open.
You will soon add the secret.
On your Facebook dashboard, choose Settings > Basic. For privacy reasons, the app secret is hidden.
Click on Show.
▪ Messages
▪ Messaging_postbacks
▪ Messaging_optins
▪ Message_deliveries
Click Save.
In this post we learned how to:
Here is a simple tutorial for the SAP Conversational AI Tutorial Challenge.
In which, we will explain step-by-step how to build your own chatbot.
Solution description
This tutorial will show you how to build a chatbot for:
- The clients, the future clients and by everyone who is interested to join AYMAX to get to know the company.
- The managers of AYMAX so that they can get more informations about their teams.
- The chatbots will be deployed in Fiori launchpad and in Messenger.
Prerequisites
- An SAP Conversational AI account (It’s free)
- An SAP Hana Cloud Platform Account https://account.hana.ondemand.com/#/home/welcome
Part one: A Chatbot to help people get to know AYMAX
Step one: How to create a Chatbot
Once, you’re logged in, you start by clicking on the button + NEW BOT in the header section, at the top right of the screen.
Then, you choose one or more than predefined skills for your bot.
After that you enter a name for your bot, here we chose “AYMAX”.
You can:
- Add if you want a description of your bot.
- Select up to six topics in order to improve your bot training.
(Topics are keywords that can define your bot like “fashion”, “games” or “jobs”)
- Choose the language as your bot is multilingual, the default language is English.
You can keep your bot public since there’s no private info involved, but you can update this setting later.
Congratulations, now you have created your first empty Chatbot.
Now, let’s dive in even further and try to understand the life cycle of a bot.
There are four important phases in the life of deployment of the bot :
Training, Building, Connecting and Monitoring.
- Train – Teach our bot what it needs to understand
- Build – Create our conversation flow with our Bot Builder tool
- Connect – Link our bot to one or several messaging platforms
- Monitor – Train our bot to make it sharper and get insights into its usage!
Step two: train your bot to understand human language by creating intents
This is the brain of our bot, where all its understanding is stored in the form of intents.
An intent is a collection of sentences that all have the same meaning, even though they can be worded very differently. When a user sends some text to our bot, the algorithm compares it to the phrases in our intents. Then it checks whether the text is close enough to one of them and decides what the intention of the message is.
Now we will create 3 intents :
First intent Aymax-definition: when the user wants to get the definition of AYMAX
We will write now our expressions ( we should write at least 30 expressions)
Second intent Aymax-domains : when the user wants to get the activities of AYMAX
We will write now our expressions. ( we should write at least 30 expressions)
Third intent Aymax-careers: when the user wants to get the available jobs in AYMAX
We will write now our expressions. ( we should write at least 30 expressions)
Step three: Build and manage the conversation flow
Now that we have filled the brain of our bot with the knowledge it needs, we click the Build tab.
The Build tab is where we find the Bot Builder, which helps us construct the conversation flow of our bot using skills.
WHAT IS A SKILL?
Each skill represents one thing that our bot knows how to do. Skills can interact with each other and can be either complicated (such as managing payment by credit) or simple (such as answering basic questions).
BUILD OUR OWN SKILL
We will go back to the Build tab and click on + Create skill on the left of the screen.
The first skill is Aymax-def
We Click on our created skill, then we go to the Triggers tab. We want to activate our skill when an expression contained in the @aymax-definition intent is present.
Now that the condition has been triggered the chatbot can now start the action.
We start by creating a new message group and apply the condition to it.
Now, let’s test our Chatbot knowledge by clicking on the chat preview:
The second skill is Aymax-dom
We Click on our created skill, then we go to the Triggers tab. We want to activate our skill when an expression contained in the @aymax-domains intent is present.
Now that the condition has been triggered the chatbot can now start the action.
We start by creating a new message group and apply the condition to it.
We will test our chatbot now.
The third skill is Aymax-carr
We Click on our created skill, then we go to the Triggers tab. We want to activate our skill when an expression contained in the @aymax-careers intent is present.
Now that the condition has been triggered the chatbot can now start the action.
We start by creating a new message group and apply the condition to it.
Call Webhook:
▪ A webhook is a simple HTTP call to your back end.
▪ To configure your HTTP call, click CALL WEBHOOK when defining requirements or actions in the Bot Builder.
▪ If you choose Call Webhook, the response should be in an SAP Conversational AI-specific JSON format that can be directly mapped to the user interface or will be used in the memory.
▪ This option will not be covered in this unit. For more info, please go to the Appendix.
Consume API Service:
▪ An API sends your request to the provider application and then delivers
the response back to you.
▪ To configure an API request, click CONSUME API SERVICE when defining requirements or actions in the Bot Builder. The steps to configure the authentication, header, and body are the same as the Webhook.
▪ If you choose Consume API Service, a variable called {{api_service_response}} will be created from a JSON object.
We will work now with a call webhook.
We will create now a node js application that will be deployed in cloud foundry.
The code of the application is in https://github.com/KARRAAhmed/chatbot_aymax/blob/main/TEST/Test/server.js
Check the method getJobs which will return a JSON response that contains a carousel of the available jobs in AYMAX
We will test our chatbot now.
Part two: A chatbot that will be used by the managers of AYMAX
Let s start now with our second chatbot.
We will follow the 1st step just like in the other chatbot.
We create our new intents: Aymax-coll and Aymax-cra
First intent Aymax-coll: when the manager wants to get his collaborators
Second intent Aymax-cra: when the manager wants to get the CRA status of his collaborators
BUILD OUR OWN SKILL
First skill is Aymax-coll
Requirements
Next, we go to the Requirements tab and create the first requirement. Here, we’ll ask for some information that is necessary for the action to work properly. In our case, what we need is the email manager. The Requirements tab will extract the entity and save it to the bot’s memory.
Let’s create a requirement that asks the bot to save the recognized #email entity into a memory variable called email.
Click if #email is missing, paste the following as a text message, and click Save:
Now that the condition has been triggered the chatbot can now start the action.
We start by creating a new message group and apply the condition to it.
We will work with a call webhook.
Now we need to check the method getColls which return a JSON response contains a list of collaborators https://github.com/KARRAAhmed/chatbot_aymax/blob/main/TEST/Test/server.js
Let test our chatbot now.
Second skill is Aymax-cra
Now we need to check the method getCRA which return a JSON response that contains a list of collaborators status https://github.com/KARRAAhmed/chatbot_aymax/blob/main/TEST/Test/server.js
let test our chatbot again.
Example with call service
Let's go back to the skill Aymax-def and try to use the call service approach
And we need to check the method getDEF in https://github.com/KARRAAhmed/chatbot_aymax/blob/main/TEST/Test/server.js
Part three: Deploying on webchat (SAP FIORI Launchpad):
What is a webchat?
▪The Webchat channel is a light and customizable channel to fit any chatbot built for a web page.
▪We can use the default version of the Webchat.
▪ We can find Webchat on the CONNECT tab of the SAP Conversational AI platform.
How to use Webchat
▪ We can configure details like color, the title of the button, bot picture, user picture, and so on.
▪ We add the following script to our web page to get Webchat:
We will download the SAP Fiori launchpad plugin and add the chatbot script inComponent.js and we run the Component.js https://github.com/KARRAAhmed/Chatbot_plugin/blob/main/ChatbotPlugin/Component.js
Test the chatbot after changing and running the Component.js
Part four: Connecting to Facebook Messenger
Get your Facebook page ready
Our chatbot will only be available for integration on a Facebook page – not on a personal profile. This means we must either create a Facebook page or have an existing page that we can use with our bot.
This is a page Facebook that I had created for this tutorial.
Create a Facebook Messenger app
To publish our chatbot on your Facebook page, we need to create an app that connects SAP Conversational AI and your Facebook page. We do this at https://developers.facebook.com/ (make sure you are logged into Facebook).
First, we choose My Apps at the top right of the screen and then we choose + Create App. Second, we give the app a name (e.g., Aymax-chatbot) and enter your email, then click Create App ID.
Set up our app for use as a chatbot
1. On the left of your Facebook dashboard, we choose the plus symbol after PRODUCTS.
- Find the Messenger tile and choose Set Up.
We now see Messenger under PRODUCTS on the left of the screen
Get our Facebook page token
- On the left of your dashboard, choose Settings just below the Messenger product.
- In the Access Tokens section, click Add or Remove Pages
. ▪ A login dialog asks you to confirm your account. Click Continue as ….
▪Select your Facebook page, and click Next.
▪ Click Done.
3. Back on the Settings screen, click Generate Token. Click I Understand, and copy the token, and click Done.
- Go back to your SAP Conversational AI bot, and open the Connect tab in your SAP Conversational AI chatbot.
▪ Choose Messenger.
▪ Under Get your app secret, paste the token into the Page token field. Leave the page open.
You will soon add the secret.
Get our app secret
On your Facebook dashboard, choose Settings > Basic. For privacy reasons, the app secret is hidden.
Click on Show.
- Copy the contents of the field, and then paste them into the App secret field back in SAP Conversational AI on your chatbot’s Connect tab – in the same way as you did with the page token.
- Now that you have pasted in the token and secret, click Get Tokens.
Connect SAP Conversational AI to our Facebook Messenger app
- Go back to the Facebook dashboard and choose Products > Messenger > Settings.
- Go to the Webhooks section and click Add Callback URL.
- In the popup that now appears, enter the values for Callback URL and Verify Token, which you can copy from your chatbot’s Connect tab in SAP Conversational AI. The values were generated when you clicked Get Tokens. Click Verify and Save.
- Once your page has reloaded, click Add Subscriptions for your page. Select the first 4 fields:
▪ Messages
▪ Messaging_postbacks
▪ Messaging_optins
▪ Message_deliveries
Click Save.
Test our Facebook Messenger chatbot
Conclusion
In this post we learned how to:
- Create SAP Conversational AI chatbot
- Create intent
- Create skill
- Use requirement in skill
- Call webhook
- Call web service API
- Deploy SAP Conversational AI chatbot on SAP Fiori launchpad
- Connect SAP Conversational AI chatbot to Facebook messenger
- SAP Managed Tags:
25 Comments
