Skip to main content

Notifications

Power Platform Community / Forums / General / How not to load the ch...
General
Answered

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

Posted on by 681

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:
  • fernandosilva Profile Picture
    fernandosilva 681 on at
    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 Profile Picture
    renatoromao 6,459 on at
    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 Profile Picture
    fernandosilva 681 on at
    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 Profile Picture
    renatoromao 6,459 on at
    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) 

Helpful resources

Quick Links

Exciting News for Copilot Studio Communi…

Get ready to experience a whole new level of engagement with the Copilot Studio…

Celebrating the May Super User of the…

LaurensM is an exceptional contributor to the Power Platform Community…

Check out the Copilot Studio Cookbook…

We are excited to announce our new Copilot Cookbook Gallery in the Community…

Leaderboard

#1
renatoromao Profile Picture

renatoromao 6,459

#2
Pstork1 Profile Picture

Pstork1 1,962

#3
Expiscornovus Profile Picture

Expiscornovus 1,667