Unanswered

PVA as chat button

(1) Share

Report

Posted on by HL-25070407-0

How can I display PVA on a website as floating chat, with option to minimize chat window?

I have little/no experience with HTML, relying heavily on sample code on MS Learn.

Currently using template for automatic greeting : https://learn.microsoft.com/en-us/power-virtual-agents/configure-bot-greeting

I want to modify this so that a chat button appears at bottom right of webpage, and chat window will only open and execute the default greeting when visitors click on the button. I also want a way to minimize or close the chat window. Want to perform this without creating a PowerApp, no plans there yet, still using normal webpage.

Best resource I have found to achieve this (minus the minimizing part), and the one I'm trying to adapt to my code (with no success) : https://powermaverick.dev/2020/09/02/add-chat-bot-on-wordpress-site/

Please advise, thanks.

Categories:

Publish & channel management

I have the same question (0)

All responses (5)

Answers (0)

Surendran Ravindran 212 on at

Like (1)

Report

Hi @misc981 ,

Steps
1. Go to power portal
2. Then select your chat bot

Regards
Surendran Ravindran

Was this reply helpful? Yes No
HL-25070407-0 on at

Like (0)

Report

Thanks, but we are not using Power Portal/Pages yet.

Was this reply helpful? Yes No
Pranamr 2 on at

Like (0)

Report

Hi Team
I have similar requirement where-in I should be able to open / close the chatbot(iFrame) on click of a button on the webpage. Does PVA provide a script tag so that we can just add it in the inedx.html page ?

Was this reply helpful? Yes No
nikviz 242 on at

Like (0)

Report
@Pranamr

created this solution for you and tested it in https://www.w3schools.com/

Add these conditions to your webpage where you are hosting:

In the header design your open and close button:

#open { background-color: green; color: white; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 16px; width: 140px; height: 40px; padding: 16px 20px; font-size: 12px; } #close { background-color: red; color: white; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 160px; width: 140px; height: 40px; padding: 12px 20px; font-size: 12px; }

in the body add below:
<button id="open" class="open-button" onclick="openForm()">Open Chat</button> <button id="close" type="button" class="btn cancel" onclick="closeForm()">Close Chat</button>

and in the script section add the below:
<script src="https://omnireach.net/webchat?key=PbjMaijC3EKXWii/ANCiHQ==" type="text/javascript"></script> <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> function openForm() { document.getElementById("webchat").style.display = "block"; } function closeForm() { document.getElementById("webchat").style.display = "none"; }

You should be able to get the below:

Default position:
Upon Clicking Open Chat:

and goes to default position on clicking close chat.

Was this reply helpful? Yes No
miteshparmar Microsoft Employee on at

Like (0)

Report
Here's one I created which uses 72 lines of code and looks quite polished
<!DOCTYPE html> <html> <head> <title>Copilot Studio Embedded in Webpage</title> <style> /*define the properties of the toggle button; this is the circle in the bottom RHS*/ .toggle-button { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; border: none; background-color: blue; color: white; font-size: 16px; cursor: pointer; vertical-align: middle; } /*define the properties of the toggle button when clicked*/ .toggle-button:hover { background-color: darkblue; transition-duration: 1s; } .chatbot-text { display: none; } .chatbot-text.show { display: inline; position: fixed; bottom: 80px; /* Adjust the distance from the bottom as needed */ right: 20px; /* Adjust the distance from the right as needed */ width: 370px; /* Adjust the width as needed */ height: 500px; /* Adjust the height as needed */ border: 3px solid #ccc; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); border-radius: 5px; overflow: hidden; } </style> </head> <body>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <button class="toggle-button"> <i class="fas fa-comment"></i> </button> <span class="chatbot-text"> <iframe src="IFRAME URL FROM CUSTOM WEBSITE GOES HERE (SETTINGS -> CHANNELS -> CUSTOM WEBSITE)"> </iframe> </span> </body> <script> // JavaScript const toggleButton = document.querySelector('.toggle-button'); const chatbotText = document.querySelector('.chatbot-text'); const toggleIcon = document.querySelector('.toggle-button i'); toggleButton.addEventListener('click', () => { toggleIcon.classList.toggle('fa-comment'); toggleIcon.classList.toggle('fa-arrow-down'); chatbotText.classList.toggle('show'); }); </script> </html>

Was this reply helpful? Yes No