Skip to Content
Author's profile photo Murali Shanmugham

SAP Conversational AI meets SAP Cloud Platform

UPDATE 25-Aug-2018 : Though the chatbot works on its own, there appears to be a problem with accessing the Fiori tiles on the launchpad. I am looking for a solution and will update the post when I find one.

Conversational User Interfaces(CUI) are the new UIs. We are all aware of the rise of the intelligent assistants in the market and they are becoming part of our day to day conversations. We as consumers are beginning to use the same to also interact with enterprise software too – lookup for clothing trends and place an order in your favourite retail store. Analysts are predicting this to be the next biggest paradigm shift in information technology.

Most of you would be aware that SAP acquired a bot building platform called Recast.AI early this year. This has been integrated with SAP portfolio and is now generally available as SAP Conversational AI.

Some of the biggest strengths of SAP Conversational AI are its Natural Language Processing (NLP) capabilities, Off-the-shelf bot which are pre-trained for each industry, Integration with multiple channels like Slack, Skype, Messenger etc.

I have been working with my colleague Joni Liu (Chatbot expert) on how to integrate the chatbot with an application on SAP Cloud Platform. Since the Fiori Launchpad is the central point of accessing business information, we thought we would try and integrate the chatbot with the Launchpad. Below are the steps we followed and you can try this too using the trial account.

In order to enhance the Fiori Launchpad on SAP Cloud Platform, you would need to build Shell plugins. If you would like to know more about Shell plugin and how to create your own Fiori Launchpad, I would highly recommend you to go through this openSAP course where this has been covered in detail.

Before we start with configuring things in the Cloud Platform, you would need to obviously create your chatbot. You can register for a free trial account in Recast.AI website. There are plenty of tutorials which can help you get started.

In the below screen, I have created a chatbot for Supplier interaction and added few intents to support the interaction with suppliers.

In the “Connect” tab, you can configure the chatbot to be embedded within other channels like Skype, Twitter etc.  For this demo, I am selecting Webchat as this needs to embedded within a web page.

Create a new Webchat configuration and select the color scheme, Header logo and title which you like to show within the Fiori Launchpad.

You also have the option to customize the bot/user picture along with welcome message

At the bottom, you can provide further customizations and give a name to the webchat channel.

When you click on “Create” button, this would provide you a webchat script. Copy this for use within the Shell plugin which would be created later. In particular, you would need the Channel ID and Token details.

Now its time to switch to your Cloud Platform Trial account. Launch “SAP WebIDE Full-Stack” service. We no longer use the old “Web IDE” service based on the announcement here.


Enable the Feature “ SAP Fiori Launchpad Extensibility” and restart the IDE.

Create a new project based on a template

Select “SAP Fiori Launchpad Plugin”

Provide a project name

In the Template customization, provide the plugin ID and a Title. Since we don’t need sample code for header/footer, leave the checkboxes uncheked.

In the component.js file, add a line within the function init() to invoke the function renderRecastChatbot(). Below is the definition of renderRecastChatbot(). Note that the ChannelID and Token values are the ones copied earlier from Recast.AI.

renderRecastChatbot: function() {
			if (!document.getElementById("recast-webchat")) {
				var s = document.createElement("script");
				s.setAttribute("id", "recast-webchat");
				s.setAttribute("src", "");
			s.setAttribute("channelId", "49b174d8-1246-4721-ae8c-c84104a28fbf");
			s.setAttribute("token", "358a49c73ddfbba38ebbb36c78e5253b");

This is how the component.js file would looks like after making the changes.

You don’t need to change any other file. You can deploy the application to your SAP Cloud Platform account after saving the changes.

The next step, is to prepare a Fiori Launchpad site. In the Fiori Configuration Cockpit, add a new app based on app type “Shell Plugin”. Below are the value which I provided based on my application.

Property Value
App Type Shell Plugin
Shell Plugin Type Custom
Component URL /
SAPUI5 Component
HTML5 App name myshellplugin

Below is the configuration of my Shell plugin app

Publish your site and test the Launchpad. You should be able to see the chatbot on the bottom right hand corner with the onboarding message.

You can click on it and start interacting with it. In this case, since this is a supplier portal which I have setup, the chatbot can be used to assist the supplier with queries around the status of orders.



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo David Lincourt
      David Lincourt

      Great idea!


      Author's profile photo Emanuele Ricci
      Emanuele Ricci

      Murali, could you suggest me how did you connect to the trial services in order to implement the chatbot? Or those messages was just faked?

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Emanuele, You can configure the webhooks to invoke an API. Check this blog out -



      Author's profile photo Momen Allouh
      Momen Allouh

      I tried it with SAPUI5 app in local laptop or any host and it worked. The  Recast AI < script > tag can be inserted to any Web App without the need for SAP Cloud Platform.

      The "Call Webhook" in Action Tab can be used to connect to any web services (like sap gateway) to get results that can be displayed as reply message.

      Author's profile photo Harshit Joshi
      Harshit Joshi

      Hello Murali,

      Great blog, really helpful. Following this, I was able to add the web chat to my application. But I am facing an issue. Once the bot is added to the application, I can't access other elements of my web app. Nothing happens when I click on any element, only the web chat is accessible.

      Are you aware of any such issue.

      Your help would be really appreciated. Thanks in advance.

      Kind Regards,


      Author's profile photo Kanwarmeet kaur
      Kanwarmeet kaur


      Did u find any solution for this issue?

      Author's profile photo Alexandre Lara
      Alexandre Lara

      Hello Murali, I was able to add the chatbot. Otherwise, when I try to navigate through the apps, I got an error like "Could not open app. Please try again later.". Could you help me, please ?

      Author's profile photo Aravindhan K N
      Aravindhan K N

      Yes, I too get the same error “Could not open app. Please try again later.” while trying to launch other tiles in the launchpad. The chatbot worked though. Were you able to find a solution?

      Author's profile photo Kanwarmeet kaur
      Kanwarmeet kaur


      I am facing the same issue. Were u able to find any solution?

      Author's profile photo Aravindhan K N
      Aravindhan K N

      Hi Murali Shanmugham

      Thanks for your blog.

      I followed your steps and could successfully interact with the chatbot from my Fiori launchpad. But the existing application tiles in the launchpad wouldn't launch after the chatbot is rendered. We get the following error

      TypeError - Cannot read property 'id' of null Application Navigation Sample
      “Could not open app. Please try again later”.

      The browser console logs the following error while the chatbot was initially rendered. Can you check please?

      Uncaught TypeError: Cannot read property 'id' of undefined
          at constructor.R.attachListener (ResizeHandler-dbg.js:106)
          at Function.R.register (ResizeHandler-dbg.js:228)
          at constructor.onAfterRendering (ScrollEnablement-dbg.js:624)
          at b (Element-dbg.js:151)
          at f.a._handleEvent (Element-dbg.js:164)
          at w (RenderManager-dbg.js:517)
          at x (RenderManager-dbg.js:562)
          at Object.R.render (RenderManager-dbg.js:678)
          at Object.V.renderViewPortPart (ViewPortContainerRenderer.js?eval:4)
          at f.V.addLeftViewPort (ViewPortContainer.js?eval:4)



      Author's profile photo Kashif Bashir
      Kashif Bashir

      Thankyou Murali Shanmugham . one of the greatest blogs

      Author's profile photo Alessandra Souza
      Alessandra Souza

      Hello, Murali. Is there any way to integrate the webchat in an SAPUI5 app directly? Am trying to use the script for an application, but it seems the the existing controls override the chat. Tia!

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Please check out the blog post by Siarhei -


      Author's profile photo Alessandra Souza
      Alessandra Souza

      Thank you, Murali Shanmugham !

      Author's profile photo Vinod Patil
      Vinod Patil

      Hello Murali,

      Thanks for blog.

      With this approach, chatbot runs fine but Fiori launchpad itself fails to work. I cannot open any tile, me area does not respond.

      Can you please double check at your end? I am even trying other approaches using oRenderer but so far no success. Any help is appreciated.


      I see below error in console:

      2018-08-22 15:55:06.845300 The issue is most likely caused by application Please create a support incident and assign it to the support component of the respective application. - Failed to load UI5 component with properties: '{
      "asyncHints": {},
      "name": "",
      "url": "../../../../../resources/sap/ushell/components/shell/MeArea",
      "componentData": {
      "startupParameters": {},
      "config": {
      "enabled": true
      "async": true
      }'. Error likely caused by:
      TypeError: Cannot read property 'id' of undefined
      at constructor.R.attachListener (https://webidetesting9804555-**
      at Function.R.register (https://webidetesting9804555-**
      at constructor.onAfterRendering (https://webidetesting9804555-**
      at b (https://webidetesting9804555-**
      at f.a._handleEvent (https://webidetesting9804555-**
      at w (https://webidetesting9804555-**
      at x (https://webidetesting9804555-**


      Vinod Patil

      Author's profile photo Siarhei Tsikhanenka
      Siarhei Tsikhanenka


      We have faced with the same issue using bots as a part of Fiori OnPremise and here is a pilot we have built:

      Hope that brings value for someone moving ahead with virtual assistants!

      Kind Regards,


      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Thanks for sharing.


      Author's profile photo Saujanya Gutala
      Saujanya Gutala

      hi Murali


      Thanks for sharing . I tried adding the chatbot to the app ,but I cannot see the chatbot . Any help would be highly appreciated.




      Author's profile photo Naveen Sharma
      Naveen Sharma

      Hello Sir,

      I have followed all your steps and now chatbot is visible in ui5 application. I can communicate through chatbot as well the only issue i am getting is that once the conversation over and I reload the application the previous chat is still on the bot.

      Previous chat should be removed as I reload the application but it is not happening, could you please help me in this.

      Author's profile photo Karla Cantu
      Karla Cantu

      Hi Naveen, Im having the same issue. Did you fix it?




      Author's profile photo Mariajose Martinez
      Mariajose Martinez

      Hello Karla and Naveen,

      Maybe you already solved this issue, but what I would recommend is to click on reset memory in the configuration of the chatbot, so everytime you reload the portal, the chatbot can appear on blank again.

      Author's profile photo Nilay Mehta
      Nilay Mehta

      You can delete the web cookies, it will clear the chat memory. Currently there is not clear chat option in the Webchat.

      Author's profile photo Mariajose Martinez
      Mariajose Martinez

      Hi Murali!

      Thanks for sharing. However I cannot see the option to create a project "SAP Fiori Launchpad Pugling" anymore with my trial account, it only appears the Web IDE ones. I want to integrate a chatbot with a portal previously created in SCP for example the "JobCore excersice in the missions tutorial". How do you recommend I can do this?

      Author's profile photo Nilay Mehta
      Nilay Mehta

      Hi Murali,

      First of all amazing blog. I followed it and was able to see the webchat on my Portal UI.
      However, any chat is not getting displayed in the window. Also, I do not see the dialog service called from the UI.

      In the Monitor section of the chatbot config, I see the messages being sent to the bot which make me wonder why they are not displayed in the window. Could you help with the possible issues here?

      Thank you,
      Nilay Mehta