Previously, my customers used to receive a direct URL to our chatbot (not a custom canvas). That URL needs to have query string parameters to assign values to some bot variables. These variable values are dynamic; the URL is constructed on the fly in Power Automate specific to the customer and situation when it gets sent to the customer. This worked. My bot variables are properly configured to accept values from external sources.
But now we need the chatbot to start the conversation immediately. So I have used a custom canvas (index.html) following this instruction: https://learn.microsoft.com/en-us/power-virtual-agents/configure-bot-greeting#deploy-a-custom-canvas-for-your-bot. It works to start right away. But it is prompting for values for the bot variables.
So I need to combine the two. Start automatically, and also pull values from the URL parameters.
I add my query string parameters again at the end of the https://mycompany.com/index.html url and followed this instruction to add the bot variables to a custom canvas: https://learn.microsoft.com/en-us/power-virtual-agents/authoring-variables-bot#set-a-bot-variables-value-from-external-sources. I also add some code to pull variables from the URL. The full URL looks like this:
/index.html?VarWorkOrder=1234&VarItem=ball&VarTrigger=5de00478
It only works 1 out of over 7 times, I have to keep refreshing my page many times before it finally starts the conversation with the bot variables pulling values from the URL parameters. Most times it doesn't start at all, and occasionally it starts with the prompts for bot variables.
My custom canvas HTML code is below. The bot variables I have are
- VarWorkOrder
- VarItem
- VarTrigger
It looks like the two dispatches in my store const are not reliably running together. Can someone advice please how the code should be written?
<!DOCTYPE html>
<html>
<head>
<title>My Web Chat</title>
</head>
<body>
<div>
<div class="heading">
<h1>My Chatbot</h1>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
const styleOptions = {hideUploadButton: true};
const params = new URLSearchParams(document.location.search);
const varWorkOrder= params.get("VarWorkOrder");
const varItem= params.get("VarItem");
const varTrigger= params.get("VarTrigger");
var BOT_ID = "redacted bot ID because duh";
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({
type: "WEB_CHAT/SEND_EVENT",
payload: {
name: "pvaSetContext",
value: {
"VarWorkOrder": varWorkOrder,
"VarItem": varItem,
"VarTrigger": varTrigger
}
},
});
dispatch({
type: "DIRECT_LINE/POST_ACTIVITY",
meta: {
method: "keyboard",
},
payload: {
activity: {
channelData: {
postBack: true,
},
name: 'startConversation',
type: "event"
}
},
});
}
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>
