You’re offline. This is a read only version of the page.
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:
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!
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.
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?
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?
@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?
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.
Share
Report
All responses (
Answers (<!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>
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.
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)
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!
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
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.
#1
Michael E. Gernaey
468
Super User 2025 Season 2
#2
stampcoin
52
Super User 2025 Season 2
#3
trice602
46
Super User 2025 Season 2
