Skip to main content


Publish & Channel Management

PVA as chat button

Posted on by 4

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 :


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) :


Please advise, thanks.

  • miteshparmar Profile Picture
    miteshparmar on at
    Re: PVA as chat button

    Here's one I created which uses 72 lines of code and looks quite polished

    <!DOCTYPE html>
    <title>Copilot Studio Embedded in Webpage</title>
    /*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;
    } {
     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;
    <!-- Include Font Awesome library: this shows the chat symbol in the circle -->
    <link rel="stylesheet" href="">
    <button class="toggle-button">
     <i class="fas fa-comment"></i>
    <span class="chatbot-text">
    // JavaScript
    const toggleButton = document.querySelector('.toggle-button');
    const chatbotText = document.querySelector('.chatbot-text');
    const toggleIcon = document.querySelector('.toggle-button i');
    toggleButton.addEventListener('click', () => {
  • nikviz Profile Picture
    nikviz 182 on at
    Re: PVA as chat button



    created this solution for you and tested it in 


    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="" type="text/javascript"></script>
    <script src=""></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.

  • Pranamr Profile Picture
    Pranamr 2 on at
    Re: PVA as chat button

    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 ?

  • misc981 Profile Picture
    misc981 4 on at
    Re: PVA as chat button

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

  • Re: PVA as chat button

    Hi @misc981 ,



    1. Go to power portal


    2. Then select your chat bot



    Surendran Ravindran

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…


renatoromao Profile Picture

renatoromao 6,459

Pstork1 Profile Picture

Pstork1 1,995

Expiscornovus Profile Picture

Expiscornovus 1,708


Featured topics