cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
fernandosilva
Helper V
Helper V

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

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

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
renatoromao
Super User
Super User

@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


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.760 students) : English | Português

View solution in original post

4 REPLIES 4
renatoromao
Super User
Super User

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) 


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.760 students) : English | Português

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
Super User
Super User

@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


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.760 students) : English | Português

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

Helpful resources

Announcements
Power Virtual Agents News & Announcements

Power Virtual Agents News & Announcements

Keep up to date with current events and community announcements in the Power Virtual Agents community.

Community Calls Conversations

Community Calls Conversations

A great place where you can stay up to date with community calls and interact with the speakers.

Power Virtual Agents Community Blog

Power Virtual Agents Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Users online (4,078)