cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Manar
Advocate II
Advocate II

Embed chatbot in Powerapps portal as collapsible window

Hey there,
The only option the chatbot can be displayed in website is as ifrmae which is very poor experience as I see advanced websites has collapsible bar that stick to the window. How can I modify it to make it modern?

I am using Powerapps portal and added chatbot to it page but it looks silly and need to code it to be useful.
Thanks
4 REPLIES 4
micchow
PVA
PVA

Thank you for the suggestion!  We are aware iFrame comes with its limitation and will look into an improved no-code experience.  

 

For the time being, it will require custom code on your website for a collapse/expand chat window experience.

renatoromao
Super User
Super User

Hi @Manar ,

 

I created the idea: https://powerusers.microsoft.com/t5/Power-Apps-Ideas/Embed-chatbot-in-Power-Apps-Portal-as-collapsib...


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

Renato Romão,

Connect with me here 😉

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

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.

Helpful resources

Announcements
Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Top Kudoed Authors
Users online (2,032)