Technical Articles
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
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
Awesome Mahesh Kumar Palavalli!! ๐
๐ Thanks, Vijay.
It is really interesting. Thank you for sharing.
๐
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
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.
Thank you for sharing! ๐
๐ Welcome..