cancel
Showing results for 
Search instead for 
Did you mean: 

Embed chatbot in Power Apps Portal as collapsible window

Hi,

 

We want to embed the chatbot in the Power Apps Portal, using like support chats.

Status: Completed

Power Apps portals: Introducing Power Virtual Agents integration using “Chatbot” component (public preview)

Power Apps portals: Introducing Power Virtual Agents integration using “Chatbot” component (public p...

@chass  / @GabrielStJohn 

Comments
jpirelli
Microsoft

I think this might just be a matter of creating the right CSS/JS implementation? 

 

I was able to put the iframe inside this collapsable div code here:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible

 

I think making that chat dialogue work as a hidden chat frame should be a matter of the right html/css/JS

 

jpirelli
Microsoft

Actually, here is a better link which I was able to get working but needs a but of tidying up. If you use the code there but alter this div, you can get your chat to work in the popup (correct the guid for your bot also)

 

<div class="chat-popup" id="myForm">
  <iframe src="https://powerva.microsoft.com/webchat/bots/aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa" frameborder="1" width="300px" height="350px" onresize="this.style.height=this.contentDocument.body.scrollHeight +'px';" target="assets">
</iframe><br> <form class="form-container">
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</div>

 

The rest of the code is default from the link. I think the bottom line is that the bot can be embedded in many ways as you see fit.

 

renatoromao
Super User

Yes, sure. 

My idea is to create another way to do it, but your comment is a solution complete.

renatoromao
Super User
Status changed to: Completed

Power Apps portals: Introducing Power Virtual Agents integration using “Chatbot” component (public preview)

Power Apps portals: Introducing Power Virtual Agents integration using “Chatbot” component (public p...

@chass  / @GabrielStJohn