Community Topics Groups Answers Blogs Events Programs Resources

Ask a Question Write a Blog Post Login / Sign

Technical Articles

Jayprakash Sharma
February 28, 2021 | 4 minute read

How to Integrate a SAP Conversational AI

Chatbot with SAP GUI
 14  16  4,619
Follow

This blog post describes how to create a chatbot using SAP Conversational AI and integrate the
 Like chatbot with SAP GUI. With this integration, users can harness the bene�ts of SAP
Conversational AI in the SAP GUI screen.

 RSS Feed
I n t ro d u c t i o n
SAP Conversational AI is a bot-building platform that gives you the ability to build and deploy a
conversational agent in your application. It provides a web user interface that serves as a
platform to create, build, and test chatbots for your business and individual needs.

P ro b l e m D e s c r i p t i o n
The Bot Connector API gives you access to many messaging channels. However, bot integration
with SAP GUI cannot be done directly – it needs to be customized.

Yo u w i l l l e a r n
• How to create an FAQ chatbot.
• How to use a bot connector to do a Webchat integration.
• About the basic customization of the chat window.
• Integration of webchat in a SAP GUI screen.

P re re q u i s i t e s
• You have an SAP Conversational AI account
 • You have access to an SAP development system (back end)

Implementation Guide
An FAQ bot retrieves answers to users’ questions from one or more documents (.csv �le) that
you upload. The document must include prede�ned pairs of questions and answers. This allows
your bot to map the user’s query to the best match and get an answer without interpreting the
question’s intent. For an overview of how to create an FAQ chatbot, see this short video.

To create an FAQ bot from scratch, refer to this documentation.

In a summary, the following are the steps involved in chatbot development.

• Identifying the use case

• Creating an FAQ bot
• Uploading FAQ documents
• Optimizing and formatting your uploaded documents uploaded
• Adjusting bot skills and handling small talk
• Testing your bot
• Connecting to your application via the available channels
• Deploying, monitoring, and improving your chatbot.

The following diagram clearly illustrates bot creation milestones:

B o t I n t e g ra t i o n
The Bot Connector API gives you access to multiple messaging channels, but this blog focuses
on Webchat. The Webchat channel was developed by the SAP Conversational AI team and is an
open-source project on GitHub.

H o w t o U s e We b c h a t c h a n n e l

• Switch to the Connect tab. All available channels appear under the User’s channels.
• Choose ‘+’ to create a new webchat channel.

• Con�gure details like color, button title, bot picture, user picture, and so on. If you wish, you
can restrict messages from users to 512 characters or less. For example, you may want to do
this if users tend to add a lot of details that obscure the intent of the request. Once done,
choose Create
 • Add the following script to your web page to integrate the created Webchat channel.

N o t e : You can �nd channelId and token in the Bot Connector when creating a Webchat channel.

The channelId and token uniquely identify the channel your bot is connected to. This is the only
information you need to connect your bot to the channel (in non-authenticated scenarios). We
do not recommend adding the script directly to your web page where these tokens could be
discovered and copied.

• Link the created channel to available environments by selecting from the dropdown and then
clicking the link button.

• The channel is linked to the selected environment.

Your Webchat channel is now ready to be integrated with SAP GUI or in fact in any web
application. But we will restrict ourselves to integrate with SAP GUI.

A BA P c o d e fo r c a l l i n g t h e c h a t b o t i n SA P G U I

• Standard Classes: C L _ D E M O _ O U T P U T and C L _ D E M O _ O U T P U T _ H T M L can be used to

call the chatbot by passing the created Webchat script using the DISPLAY_HTML method.
 • C L _ D E M O _ O U T P U T : This class is used to output data using the CL_DEMO_OUTPUT_HTML
class. If an SAP GUI is active, the result, which is converted to HTML by
CL_DEMO_OUTPUT_HTML, is displayed after calling the DISPLAY_HTML method.

• C L _ D E M O _ O U T P U T _ H T M L : Converts the demo output stream to HTML. The standard code

calls an M (Medium) size window in the  CL_ABAP_BROWSER=>SHOW_HTML method.

• You can also create wrappers for the classes based on the customization required.

Re s u l t
After successful integration, you would be able to chat with the bot very similar to a chatbot on
any webpage. It is fast and helpful in assisting the users with their queries.
 Conclu sion
This blog post should help you connect your bot with SAP GUI with customization in the chat
window. The same integration is possible with the SAP Conversational AI Web Client also.
Please feel free to contact us with any questions you may have.

Thanks for reading this blog post, hopefully, you enjoyed it.

Fo r m o re i n f o r m a t i o n a b o u t S A P C o n ve r s a t i o n a l A I :

• Visit our web page

• Engage with our SAP Community
• Read our blogs, follow our tutorials and earn your badge on openSAP
• Ask your questions on SAP Answers
• Read our product documentation
• Follow us on LinkedIn, Twitter, and YouTube

Alert Moderator

Assigned Tags

SAP Conversational AI | UI SAP GUI for Windows | chatbot | SAP CAI

Similar Blog Posts 

Enable e-signatures with DocuSign through a chatbot with SAP SAP S/4HANA integration with SAP Conversational AI
SAP Conversational AI Chatbot using MS Teams App Studio
By Mariajose Martinez Feb 10, 2021 By Krishna Chaitanya Nandimandalam Apr 15, 2021

Day 1 | Skybu�er Enterprise-Level Conversational AI

Content Made Public for SAP Community Development
By Siarhei Tsikhanenka Dec 01, 2020

Related Questions 
Unable to see iRPA message at Chatbot's end amazon Alexa console
By Himanshu Chaubey Dec 01, 2020 By Ali Ahmad Jun 01, 2021
how to create service ticket in c4c via sap Conversational
AI chatbot?
By thej lava cv Aug 04, 2022

14 Comments

You must be Logged on to comment or reply to a post.

Bharat Bajaj
March 6, 2021 at 8:16 am

This is Mind blowing.. Indeed a Lovely Feature.

I never thought of this option, despite having the standard HTML class in SAP.

Thanks for sharing

Like 1 | Share

Jayprakash Sharma | Blog Post Author

March 6, 2021 at 11:28 am

I'm glad you liked it!

Like 0 | Share

Srikanth kalakonda
April 28, 2021 at 3:30 am

Thanks Jayprakash.

I have another question on this GUI integration, we were able to successfully integrate both skilled and FAQ but the issue is
with authenaticated sceanrios. We are training some skills which needs to call gateway and update some data into ECC.
These sceanrios need to check if the user interfacting with BOT has required roles.

Currently i am using webchat integration option, what are the options to get the current loggged in user who is interacting
with BOT. Appreciate your help on this.
Like 0 | Share

Jayprakash Sharma | Blog Post Author

April 28, 2021 at 4:32 am

Hi Srikanth,

You can use the latest authentication service, Single sign-on (SSO) for this purpose. Refer to this blog to
implement the same.

Like 0 | Share

shivani agrawal
September 28, 2021 at 11:21 am

Hello,

Can you tell me how to integrate azure based chatbot with sap GUI, I just have a html url for the chatbot, which i can
launch in browser, but want to call it within sap window, how this can be done? do I need similar message script from bot
developer? its not conversation AI bot, but azure one.

Thanks,

Shivani

Like 0 | Share

Jayprakash Sharma | Blog Post Author

October 4, 2021 at 10:00 am

You can refer to this tutorial: https://developers.sap.com/tutorials/conversational-ai-deploy-teams.html

Like 0 | Share
 Srinivasulu Ekambaram
November 19, 2021 at 8:02 am

Hi Jayprakash,

Good Blog. In this Blog you say we integrate CAI bot to GUI with WebChat option? Is this solution supports SSO?? If so,
can you guide us in right solution. SAP was saying SSO is possible with WebClient API not Webchat.

Like 0 | Share

Aocheng Yang
December 14, 2021 at 3:15 pm

Great blog and outside of box idea!

One question, how did you make the HTML screen �ts the chat section so perfectly?

I also managed to make the chat work but only right bottom corner of the screen shows my tiny chat section and rest of
the screen is white.

Like 1 | Share

Jayprakash Sharma | Blog Post Author

February 14, 2022 at 2:42 pm

Hello Aocheng, you can pass size='S" in CL_ABAP_BROWSER=>SHOW_HTML.

Like 1 | Share

Aocheng Yang
February 15, 2022 at 10:58 am

Thank you for your reply. SIZE  = 'S', FORMAT   = CL_ABAP_BROWSER=>PORTRAIT and

POSITION = CL_ABAP_BROWSER=>MIDDLE did the trick for me!

Like 1 | Share

Jayprakash Sharma | Blog Post Author

February 15, 2022 at 11:42 am

Awesome!

Like 0 | Share

Sudhansu Maharana
March 8, 2022 at 2:54 pm
This is really a nice blog! Appreciated!

Would you please tell, how to integrate this CAI with SAP CRM webui Home page at right bottom corner?

Like 0 | Share

Naveen Kumar Jain

March 22, 2022 at 11:59 am

Thanks Jayprakash,

Can you please suggest something where our chatbot will be stick at  right bottom and we can navigate from one tcode to
another and chatbot will also be available in each screen.

Regards

Naveen Jain

Like 0 | Share

Kalpataru Sahoo
July 25, 2022 at 2:16 pm

Is it OPEN-SOURCE

Like 0 | Share