Skip to Content
Technical Articles
Author's profile photo Mahesh Kumar Palavalli

Injecting SAP Conversational AI chatbot into a website using SAP Intelligent RPA

Recently for my personal fun project, I was checking different ways to open a chatbot in a website and found a way to inject SAP Conversational AI Chatbot into any website directly using SAP IRPA without modifying the website source code using a tiny hack ๐Ÿ™‚

For example: Adding the SAP Conversational AI chatbot to the google website.

 

Use case can be a scenario where you want to provide a chatbot to a website and have the user interact with it using and executing IRPA commands via the chatbot, is my guess and I am not sure if there exists such scenario though ๐Ÿ˜€ , I was just doing this for fun and found this ๐Ÿ˜› and here I am with this blog post.

 

Steps:

So first create a basic SAP Conversation AI bot and go to connect tab and create a webchat.

Open it and get the chatbot script:

So initially I thought just including the script tag directly as an HTML element will do the job by using the below option

https://contextor.eu/dokuwiki2/doku.php?id=lib:ctx:ctx.page&s[]=insert&s[]=button#inserthtml_htmlcode_adjacentitem_position_id

 

But it didn’t work, so I had to use another option. This one I tried in the browser console using the below code:

var script = document.createElement('script');

script.src='https://cdn.cai.tools.sap/webchat/webchat.js';
script.setAttribute('token', '52cde468c645ae42eb837cdb7619a670');
script.setAttribute('channelId', '3051386a-9c8f-4e31-8597-d53b16cf2d68');
script.id='cai-webchat';

document.getElementById('main').appendChild(script)

 

This works well in the browser, but how to do it from IRPA bot?

While I was checking it, I found another option ‘EXECSCRIPT’. So I can pass the above code as a string to this function and it will execute that code in the browser page.

var script = "var script = document.createElement('script');script.src='https://cdn.cai.tools.sap/webchat/webchat.js';script.setAttribute('token', '52cde468c645ae42eb837cdb7619a670');script.setAttribute('channelId', '3051386a-9c8f-4e31-8597-d53b16cf2d68');script.id='cai-webchat';document.getElementById('main').appendChild(script)";
	Google.pGoogle.execScript(script);

 

So now when this is executed, it will add the chatbot to any browser. But make sure you find the correct element, in my case I am appending the script to ‘main’ using below code:

document.getElementById('main').appendChild(script)

 

Let me know if any other better approach is there to this ๐Ÿ™‚

 

Regards,

Mahesh

Assigned tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vijay Sharma
      Vijay Sharma

      Awesome Mahesh Kumar Palavalli!! ๐Ÿ™‚

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli
      Blog Post Author

      ๐Ÿ™‚ Thanks, Vijay.

      Author's profile photo Srikanth Nampalli
      Srikanth Nampalli

      It is really interesting. Thank you for sharing.

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli
      Blog Post Author

      ๐Ÿ™‚

      Author's profile photo Divya Keludi
      Divya Keludi

      Hi Mahesh Kumar Palavalli,

      Its really interesting. Thanks for sharing.

      One small doubt here. I have done the same thing to enable the bot on successfactors home page.

      The bot is visible as i executed the code in console. But if the page is refreshed the bot wont be visible. So is there any way like where to deploy this code, so that each time same page we navigate this script should be appended to that page.

      Thanks

      Divya

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli
      Blog Post Author

      Yeah, it will be refreshed.. that is the drawback of it.. but I think IRPA bot can insert it again right when the page is refreshed.

      Author's profile photo Gรถzde Aras
      Gรถzde Aras

      Thank you for sharing! ๐Ÿ™‚

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli
      Blog Post Author

      ๐Ÿ™‚ Welcome..