Solved: Bot greeting first

Anonymous · ‎01-21-2021

Hi group,

I am trying to configure the PVA bot to greet first without the user having to give input, and I am following this bog:

https://powervirtualagents.microsoft.com/en-us/blog/make-your-power-virtual-agents-bot-start-the-con...

I could not figure out where to add the mentioned code in my bot. Below are the steps performed:

1.got the Bot ID by going to the Mobile app under Channels.

2.copied the code into a local .html file on my machine, updated the Bot ID and ran it in my Edge browser. I can see that the bot greeted me first.

3.I went into the Greeting topic canvas and updated the welcome message, saved the topic.

4. Published the code and tested it on my demo website, the bot doesn't greet and waits for my input.

I sense I am missing a step in between, not sure which one. Can one of you please point me to the missing step? I am a newbie in PVA, your help is highly appreciated. Thanks in advance!

renatoromao · ‎01-22-2021

Hi @Anonymous ,

Yes, will work normally.

But you need to use the whole code that contains in the documentation(attached below).

Also, if you only paste this code to your WordPress website will work, but will be fixed in a part of you pasted. If you want to create an icon and customize your bot to click and open a window similar to this template (COVID19 Volunteer - Self4Society (mygov.in)), you need to customize using CSS and JS.

<!DOCTYPE html>
    <html>
    <head>
        <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: 0;
            }
            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;
            }        
            #webchat {
                position: fixed;
                height: calc(100% - 50px);
                width: 100%;
                top: 50px;
                overflow: hidden;
            }
          </style>
    </head>
    <body>
        <div>
            <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 = "<ENTER YOUR 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>
      </body>
    </html>

Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+3.250 students) : English | Português

View solution in original post

renatoromao · ‎01-21-2021

Hi @Anonymous ,

Yes, today, you can customize the conversation to talk first (proactively) only for Custom Canvas channels, like Custom Website,Mobile app).

If you try to use inside the Demo website, you will not see because you cannot deploy this custom code (similar like this: Make your Power Virtual Agents bot start the conversation using a custom canvas | Microsoft Power Virtual Agents) inside the demo channel.

Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+3.250 students) : English | Português

renatoromao · ‎01-21-2021

You can see more details and requirements about it here: Automatically start a chatbot conversation - Power Virtual Agents | Microsoft Docs

Resume:

Custom Canvas

- your custom website

- you need to apply CSS and JS file

Microsoft Teams, Demo website, Slack, ... are not a Custom Canvas.

@Anonymous

Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+3.250 students) : English | Português

Anonymous · ‎01-21-2021

Hello @renatoromao, thank you for the quick reply.

Quick question, I am also hosting this bot on a custom website. Should I replace the code on the custom website with the one mentioned in the above blog? Thanks!

renatoromao · ‎01-21-2021

Hi @Anonymous ,

You're welcome! 🙂

At the first time, you need to append this code to your website. It's just a JavaScript file (that you can import), CSS file (that you can append to the design customization that you have) and add an Html code at the part that you want.

After to deploy in your custom website, all changes that you did inside your chatbot, you just need to publish again using the PVA Studio (powerva.microsoft.com) and wait for 15 minutes to apply this new version.

If you want to see more about the customization, you can see this sample: COVID19 Volunteer - Self4Society (mygov.in)

Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+3.250 students) : English | Português

Anonymous · ‎01-22-2021

Hi @renatoromao

Following up on the same topic, we have embedded the PVA bot into a word press website using the web-apps embed code:

<!DOCTYPE html><html><body><iframe src="https://powerva.microsoft.com/webchat/bots/XXXXXXXXXXXXXXXXXXX" frameborder="0" style="width: 100%; height: 100%;"></iframe></body></html>

My question is, does the automated bot greeting code work on word press website? If so, can we just replace the above embed code with the code provided in https://docs.microsoft.com/en-us/power-virtual-agents/configure-bot-greeting

Thanks again for your patient response.

renatoromao · ‎01-22-2021

Hi @Anonymous ,

Yes, will work normally.

But you need to use the whole code that contains in the documentation(attached below).

Also, if you only paste this code to your WordPress website will work, but will be fixed in a part of you pasted. If you want to create an icon and customize your bot to click and open a window similar to this template (COVID19 Volunteer - Self4Society (mygov.in)), you need to customize using CSS and JS.

<!DOCTYPE html>
    <html>
    <head>
        <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: 0;
            }
            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;
            }        
            #webchat {
                position: fixed;
                height: calc(100% - 50px);
                width: 100%;
                top: 50px;
                overflow: hidden;
            }
          </style>
    </head>
    <body>
        <div>
            <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 = "<ENTER YOUR 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>
      </body>
    </html>

Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+3.250 students) : English | Português

Anonymous · ‎01-28-2021

@renatoromao Thank you it worked after tweaking a little bit for size, font and colors. I have a new issue now, the links are not getting displayed in my custom website.

This is the text link that I have setup to direct user to an external website, it works fine on the pva developer console.

When embedding the bot greeting code into my wordpress website, the link format is missing.

The user is able to click on the the link though which directs to the website, but the underline is missing.

Did anyone face this issue?

HK_11 · ‎12-08-2022

I have added a PVA chatbot to my power portal page. Can the greeting be initiated by chatbot on load of the power portal page?

chadvargo · ‎03-29-2023

How can the bot start the conversation without coding or a custom canvas? I have created a simple bot in MS Teams, but can't get the bot to start the conversation. I won't be using the bot on other mobile apps or websites. Any suggestions?

Bot greeting first

Helpful resources

December 2023 User Group Update: Welcoming New Groups and Upcoming Events

Back to Basics: All Ten Tuesday Tips

November 2023 Community Newsletter

Back to Basics Tuesday Tip #10: Community Support

Microsoft Ignite 2023: The Recap

Unlocking the Power of Community: A Journey with Featued User Group leaders Geetha Sivasailam and Ben McMann