Hi there,
I have a chatbot on a site and it's embedded with an iframe (custom canvas), so when the page loads, the chatbot loads as well.
Since the chatbot loads together with the page, and even when still not visible to the user, it's already counting the minutes on the dialog window as the chatbot starts a conversation automatically behind the scene.
Is there a way to stop the chatbot loading with the page and just start the dialog after the user click on the icon to open it?
Otherwise, there are lots of unengaged sessions on the analytics.
Cheers,
Fernando
Ok,
I managed to sort it out.
This is the code I used:
/*chatbot window*/
function chatbotin() {
var cwindowin = document.getElementById("chatwindow");
cwindowin.style.display = "block";
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "chatbot.html");
ifrm.setAttribute("id", "ichat");
ifrm.setAttribute("frameborder", "0");
ifrm.style.width = "100%";
ifrm.style.height = "100%";
ifrm.style.borderRadius = "15px";
cwindowin.appendChild(ifrm);
var chaticon = document.getElementById("chaticon");
chaticon.style.display = "none";
}
function chatbotout() {
var cwindowout = document.getElementById("chatwindow");
cwindowout.style.display = "none";
var ifrm = document.getElementById("ichat");
cwindowout.removeChild(ifrm);
var chaticon = document.getElementById("chaticon");
chaticon.style.display = "block";
}
It works perfectly fine now.
Cheers,
Fernando
In that case, when you have the iframe, by default, your bot is loaded automatically.
You need to create an iFrame component when you have the onClick event.
e.g.
<script type="text/javascript">
function prepareFrame() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "http://google.com/");
ifrm.style.width = "640px";
ifrm.style.height = "480px";
document.body.appendChild(ifrm);
}
</script>
Take a look at this doc also: Add iframe to div using Javascript · Dev Practical
Ok, so that function is inside the iframe and my iframe it's been called from the footer of the website.
The icon with the "onclick" event is inside the footer as well.
The icon for the user to click has an "onclick" event to display the chatwindow (custom canvas) as an iframe.
How are you gonna call an "onclick" event to make the chatwindow appears and at the same time an "onclick" event to start the bot on the same icon?
Hi @fernandosilva ,
You can add the code below:
function startBot() {
const styleOptions = {
// Add styleOptions to customize Web Chat canvas
hideUploadButton: true
};
// Add your BOT ID below
var BOT_ID = "<ENTER YOUR BOT ID>";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
styleOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
}
And basically, you need to start the function in a button, on page load or something like that:
<button onclick="startBot()">Click me</button>