You’re offline. This is a read only version of the page.
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.
Here's one I created which uses 72 lines of code and looks quite polished
Share
Report
All responses (
Answers (
<!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>
<!-- Include Font Awesome library: this shows the chat symbol in the circle -->
<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>
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.
Thanks, but we are not using Power Portal/Pages yet.
#1
WarrenBelz
146,524
Most Valuable Professional
#2
RandyHayes
76,287
Super User 2024 Season 1
#3
Pstork1
65,906
Most Valuable Professional
