Answered

Bot greeting first

(0) Share

Report

Posted on by Community Power Pla...

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-conversation-using-a-custom-canvas/

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!

Categories:

Bot administration

I have the same question (0)

All responses (10)

Answers (1)

CU22081450-0 Most Valuable Professional on at

Like (0)

Report

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.

Was this reply helpful? Yes No
CU22081450-0 Most Valuable Professional on at

Like (0)

Report

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

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

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!

Was this reply helpful? Yes No
CU22081450-0 Most Valuable Professional on at

Like (0)

Report

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)

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Verified answer

CU22081450-0 Most Valuable Professional on at

Like (0)

Report
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>  <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">  <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>

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

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

Was this reply helpful? Yes No
Harshitha K 5 on at

Like (1)

Report

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?

Was this reply helpful? Yes No
chadvargo Microsoft Employee on at

Like (0)

Report

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?

Was this reply helpful? Yes No
LB123 on at

Like (0)

Report

this solution, and the related article in the microsoft help article here - https://microsoftcopilotstudio.microsoft.com/en-us/blog/make-your-power-virtual-agents-bot-start-the-conversation-using-a-custom-canvas/ does not work at all for me. does anyone have any ideas as to how I might troubleshoot the problem? I have tried starting completely over with a new bot to ensure any changes I have made to the greeting topic have not affected the outcome - there is no way that I can find to get the bot to greet first.

Was this reply helpful? Yes No