Technical Articles
How to Integrate a SAP Conversational AI Chatbot with SAP GUI
This blog post describes how to create a chatbot using SAP Conversational AI and integrate the chatbot with SAP GUI. With this integration, users can harness the benefits of SAP Conversational AI in the SAP GUI screen.
Introduction
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.
Problem Description
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.
You will learn
- 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.
Prerequisites
- 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 file) that you upload. The document must include predefined 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:
Bot Integration
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.
How to Use Webchat channel
- Switch to the Connect tab. All available channels appear under the User’s channels.
- Choose ‘+’ to create a new webchat channel.
- Configure 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.
Note: You can find 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.
ABAP code for calling the chatbot in SAP GUI
- Standard Classes: CL_DEMO_OUTPUT and CL_DEMO_OUTPUT_HTML can be used to call the chatbot by passing the created Webchat script using the DISPLAY_HTML method.
- CL_DEMO_OUTPUT: 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.
- CL_DEMO_OUTPUT_HTML: 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.
Result
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.
Conclusion
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.
For more information about SAP Conversational AI:
- 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
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 🙂
I'm glad you liked it!
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.
Hi Srikanth,
You can use the latest authentication service, Single sign-on (SSO) for this purpose. Refer to this blog to implement the same.
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
You can refer to this tutorial: https://developers.sap.com/tutorials/conversational-ai-deploy-teams.html
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.
Great blog and outside of box idea!
One question, how did you make the HTML screen fits 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.
Hello Aocheng, you can pass size='S" in CL_ABAP_BROWSER=>SHOW_HTML.
Thank you for your reply. SIZE = 'S', FORMAT = CL_ABAP_BROWSER=>PORTRAIT and POSITION = CL_ABAP_BROWSER=>MIDDLE did the trick for me!
Awesome!
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?
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
Is it OPEN-SOURCE