cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
UmerJaved
Helper III
Helper III

power virtual agent on portal - automatically start conversation

Hi,

 

I have added chatbot on portal using this link.

 

I wonder we could add automatic start conversation feature onto the bot when it loads.

 

I tried adding script part only(and not the html) from the above chatbot canvas script code into the "Power Virtual agents" web template but no luck so far. Attached screenshot

 

Any idea how can this be implemented onto the portal?

 

Thanks

 

 

 

 

2 REPLIES 2
ragavanrajan
Super User
Super User

Hi @UmerJaved

 

We can try a few different ways to achieve what you are expecting. One of the below ways is for your kind reference.  I have tested it and it is initiating the conversation automatically. I have adjusted some CSS but you may need to adjust according to your need. 

 

In Portal management: 

 

1. Under Content > Content Snippets > New Content snippets 

2. Lets call it as "ChatBotAuto" for an example 

3. Choose type as HTML 

4. Under HTML paste the below code. Note: I have added one css class to show it in the bottom right. 

 

<title>Contoso Sample Web Chat</title> 
        <!-- This styling is for the canvas demonstration purposes. It is recommended 
    that style is moved to separate file for organization in larger projects -->
        <style>
            html, body {
                height: 100%;

            }
            body {
                margin: 10px;
            }
            h1 {
                font-size: 16px;
                font-family: Segoe UI;
                line-height: 20px;
                color: whitesmoke;
                display: table-cell;
                padding: 13px 0px 0px 20px;
            }
            .heading {
                background-color: black;
                height: 50px;
            }
            .main {
                margin: 18px;
                border-radius: 4px;
            }

            div[role="form"]{
                background-color: black;
            }  
           .pva-floating-style {
                 position: fixed;
                  bottom: 50px;
                  right: 0px;
 box-shadow: rgb(0 0 0 / 13%) 0px 3.2px 7.2px, rgb(0 0 0 / 11%) 0px 0.6px 1.8px;
margin-right: 16px;
 margin-bottom: 18px;
 border: 2px solid #D2D0CE;
 z-index: 9999;
}
            #webchat {
                position: relative;
                height: calc(100% - 50px);
                width: 100%;
                top: 50px;
                overflow: hidden;
            }
          </style><div class="pva-floating-style">
            <div class="heading">

                <!-- Change the h1 text to change the bot name -->    
                <h1>Contoso Bot Name</h1>

            </div>
            <div id="webchat" role="main"></div>
        </div>    
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
            const styleOptions = {
               // Add styleOptions to customize web chat canvas
               hideUploadButton: true
            };

            // Add your BOT ID below
            var BOT_ID = ""; 

            var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

            const store = window.WebChat.createStore(
               {},
               ({ dispatch }) => next => action => {
                   if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
                      dispatch({
                          meta: {
                               method: "keyboard",
                           },
                           payload: {
                               activity: {
                                     channelData: {
                                          postBack: true,
                                     },
                                      //Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
                                      name: 'startConversation',
                                      type: "event"
                                 },
                            },
                            type: "DIRECT_LINE/POST_ACTIVITY",
                       });
                 }
                 return next(action);
              }
           );
           fetch(theURL)
                .then(response => response.json())
                .then(conversationInfo => {
                    window.WebChat.renderWebChat(
                        {
                            directLine: window.WebChat.createDirectLine({
                                token: conversationInfo.token,
                            }),
                            store: store,
                            styleOptions: styleOptions
                        },
                        document.getElementById('webchat')
                    );
                })
                .catch(err => console.error("An error occurred: " + err));
        </script>
      
    

 

Note: Under the first div you can see a custom css class name called "pva-floating-style" 

 

In Portal Studio: 

 

1. On your desired page> Under source code editor 

all you need is add content snippet which we added via liquid tag like below 

 

{{snippets["ChatBotAuto"]}}

 

Sync configuration and browse the website. 

 

Output:  (Automatic conversation started) 

ragavanrajan_0-1628646741840.png

 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

 

Hi @ragavanrajan 

 

Thanks however please note I have already got chatbot component enabled as a component following Microsoft article. The idea is to enable this automatic conversation in this widget( please see attached).

 

If I disable above therefore try and use your code snippet,  we cannot just add it into the source code editor for the page, we need to select an editable component on the page in order to insert

Hi @ragavanrajan 

 

Thanks however please note I have already got chatbot component enabled as a component following Microsoft article. The idea is to enable this automatic conversation in this widget( please see attached).

 

If I disable above standard chatbot component therefore try and use your code snippet,  we cannot just add it into the source code editor for the page, we need to select an editable component on the page in order to insert the content snippet you shared above. Whereas I am trying to add this onto home page and it doesn't work. I Have also tried including the following in the home page template but luck in proper rendering of the chatbot widget..

{% include 'snippet' snippet_name:'ChatBotAuto' %}

Thanks

Helpful resources

Announcements
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Users online (3,104)