Skip to main content

Notifications

Publish & Channel Management
Unanswered

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

  • 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>
    <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>
  • nikviz Profile Picture
    nikviz 182 on at
    Re: PVA as chat button

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

    nikviz_0-1681313964455.png

    Upon Clicking Open Chat:

     

    nikviz_1-1681314135796.png

     

    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 ,

     

    Steps 

    1. Go to power portal

    Surendran_R_0-1674806602424.png

    2. Then select your chat bot

     

    Regards

    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…

Leaderboard

#1
renatoromao Profile Picture

renatoromao 6,459

#2
Pstork1 Profile Picture

Pstork1 1,995

#3
Expiscornovus Profile Picture

Expiscornovus 1,708

Leaderboard

Featured topics