Skip to Content
Technical Articles
Author's profile photo Ahmed KARRA

SAP Conversational AI Tutorial “Challenge Submissions”

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.

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

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.

 

 

  1. Train – Teach our bot what it needs to understand
  2. Build – Create our conversation flow with our Bot Builder tool
  3. Connect – Link our bot to one or several messaging platforms
  4. 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.

  1. 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

  1. On the left of your dashboard, choose Settings just below the Messenger product.
  2. 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.

  1. 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.

 

  1. 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.
  2. Now that you have pasted in the token and secret, click Get Tokens.

Connect SAP Conversational AI to our Facebook Messenger app

  1. Go back to the Facebook dashboard and choose Products > Messenger > Settings.
  2. Go to the Webhooks section and click Add Callback URL.
  3. 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.
  4. 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

 

Assigned Tags

      25 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Emna Beji
      Emna Beji

      Thank you for this very useful tutorial.

      It's simple and efficient.

      Now I can build my chatbot easily.

      Author's profile photo Ahemd KARRA
      Ahemd KARRA
      Blog Post Author

      Thank you Emna.

      Author's profile photo Fatma BEN ZHIOUA
      Fatma BEN ZHIOUA

      Un blog très utile et instructif

      Author's profile photo Ahemd KARRA
      Ahemd KARRA
      Blog Post Author

      Merci bcp Fatma.

      Author's profile photo yacine haj massoud
      yacine haj massoud

      Very useful Tutorial.

       

      Thank you so much.

      Author's profile photo Ahemd KARRA
      Ahemd KARRA
      Blog Post Author

      Welcome Yacine.

      Author's profile photo rihab oueslati
      rihab oueslati

      very useful blog ,

      thank you for sharing

      Author's profile photo Ahemd KARRA
      Ahemd KARRA
      Blog Post Author

      Welcome Rihab.

      Author's profile photo saifeddine kouti
      saifeddine kouti

      i really Appreciate this 😀

      Thank you this is very useful.

      Author's profile photo Ahemd KARRA
      Ahemd KARRA
      Blog Post Author

      Welcome Saif 😉

      Author's profile photo Raoul Shiro
      Raoul Shiro

      Clair, précis et instructif.

      Author's profile photo Anis BEN AYED
      Anis BEN AYED

      Very useful blog

      Author's profile photo Ahmed KARRA
      Ahmed KARRA
      Blog Post Author

      Thank you Anis.

      Author's profile photo Sinda Bouraoui
      Sinda Bouraoui

      Great post ! Specially helpful for those who are new to the CAI Plateform.

      Thanks for taking time to post and share this blog!

      Author's profile photo Ahmed KARRA
      Ahmed KARRA
      Blog Post Author

      Thank you Sinda

      Author's profile photo HALIM MISSAOUI
      HALIM MISSAOUI

      Excellent! Very Useful Blog.

      Author's profile photo Abdelaziz TOUIL
      Abdelaziz TOUIL

      Thank you! Great post!

      Author's profile photo Mohamed Anouar MAHJOUB
      Mohamed Anouar MAHJOUB

      Very useful !! thanks for sharing.

      Author's profile photo Shilpa Tripathi Jurinek
      Shilpa Tripathi Jurinek

      Wow this is the most detailed version of the bot creation I have seen! Great work!

      Author's profile photo Ahmed KARRA
      Ahmed KARRA
      Blog Post Author

      Thank you Shilpa

      Author's profile photo Alaeddine Chaibi
      Alaeddine Chaibi

      Very Insightfull ! Thanks for the post

      Author's profile photo rania massous
      rania massous

      Great job, well detailed tutorial

      Author's profile photo Mohamed Amine Ajengui
      Mohamed Amine Ajengui

      Great post! Thanks for sharing.

      Author's profile photo Meher HOUAS
      Meher HOUAS

      Very useful !! Great work !

      Author's profile photo Ahmed KARRA
      Ahmed KARRA
      Blog Post Author

      Thank you Meher