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