Skip to Content
Technical Articles
Author's profile photo Jayprakash Sharma

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:

Assigned Tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Bharat Bajaj
      Bharat Bajaj

      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 🙂

       

      Author's profile photo Jayprakash Sharma
      Jayprakash Sharma
      Blog Post Author

      I'm glad you liked it!

      Author's profile photo Srikanth kalakonda
      Srikanth kalakonda

      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.

       

      Author's profile photo Jayprakash Sharma
      Jayprakash Sharma
      Blog Post Author

      Hi Srikanth,

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

      Author's profile photo shivani agrawal
      shivani agrawal

      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

       

       

      Author's profile photo Jayprakash Sharma
      Jayprakash Sharma
      Blog Post Author

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

       

      Author's profile photo Srinivasulu Ekambaram
      Srinivasulu Ekambaram

      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.

      Author's profile photo Aocheng Yang
      Aocheng Yang

      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.

      Author's profile photo Jayprakash Sharma
      Jayprakash Sharma
      Blog Post Author

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

      Author's profile photo Aocheng Yang
      Aocheng Yang

      Thank you for your reply. SIZE  'S', FORMAT   CL_ABAP_BROWSER=>PORTRAIT and POSITION CL_ABAP_BROWSER=>MIDDLE did the trick for me!

      Author's profile photo Jayprakash Sharma
      Jayprakash Sharma
      Blog Post Author

      Awesome!

      Author's profile photo Sudhansu Maharana
      Sudhansu Maharana

      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?

      Author's profile photo Naveen Jain
      Naveen Jain

      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

      Author's profile photo Kalpataru Sahoo
      Kalpataru Sahoo

      Is it OPEN-SOURCE