How not to load the chatbot when user doesn't click on the button to activate it?

(0) Share

Report

Posted on by fernandosilva

785

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

Categories:

General

All responses (4)

Answers (1)

fernandosilva 785 on at

Like (0)

Report
Re: How not to load the chatbot when user doesn't click on the button to activate it?

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
Verified answer

renatoromao 6,762 on at

Like (2)

Report
Re: How not to load the chatbot when user doesn't click on the button to activate it?

@fernandosilva ,

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
fernandosilva 785 on at

Like (0)

Report

Re: How not to load the chatbot when user doesn't click on the button to activate it?

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?
renatoromao 6,762 on at

Like (0)

Report
Re: How not to load the chatbot when user doesn't click on the button to activate it?

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>

onclick Event (w3schools.com)