Hi there,
I would like to know if there is a way to keep the bot conversation when user change the website page.
At this moment when the chatbot reset as soon as the page change and the user need to start all over again.
How can the conversation stays in place in different website pages?
Thanks in advance.
Fernando
@jbmsft Thank you for the quick reply! I had been researching the topic for the past week and a half and could not find the answer anywhere. It is working perfectly now!
Hi Jose, the original pastebin had some extra variables that the other user needed. Here's a new one that should work, and only thing you should need to change is adding your real bot ID on line 31:
You can find your Bot ID by following these instructions: Add a chatbot to mobile and web apps - Power Virtual Agents | Microsoft Docs
@jbmsft I'm fairly new at this and have been having issues combining the codes mentioned. I also used the code from pastebin and the webchat is not rendering. Should the code work by using the full pastebin code or is something missing?
@fernandosilva this is great to hear! Glad it worked for you.
Hi @jbmsft ,
That's the one.
I hope the whole community can use your template, which works well.
Thank you for your feedback and quick reply.
Hi @fernandosilva - both provided links are for PVA. You'll want to combine the sample code from the documentation site with the code from the pastebin in order to persist the chat across sessions. It should look like this in the end: https://pastebin.com/9e5eNXkC
Hi @jbmsft ,
Thanks for your reply.
I noticed that you posted the links related to Bot Framework Composer, but in this case I'm talking about PVA and from the sample on the tutorials, I got the following:
<!DOCTYPE html>
<html>
<head>
<title>My Bot</title>
<link rel="stylesheet" href="style.min.css">
</head>
<body>
<div>
<div id="heading">
<!-- Change the h1 text to change the bot name -->
<div class="headingFirst">
<h1 class="chatboth1header">My Bot</h1>
</div>
<div class="headingSecond">
</div>
</div>
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
const styleSet = window.WebChat.createStyleSet({
// Add styleOptions to customize Web Chat canvas
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
rootHeight: '100%',
rootWidth: '100%',
backgroundColor: 'white',
hideUploadButton: false,
userAvatarBackgroundColor: 'white',
botAvatarBackgroundColor: 'white',
});
// Set the avatar options.
const avatarOptions = {
backgroundColor: 'white',
botAvatarBackgroundColor: 'rgba(255, 255, 255, 1)',
// accent: 'rgba(255, 255, 255, 1)',
botAvatarInitials: 'MPID',
userAvatarInitials: 'ME',
};
// Add your BOT ID below
var BOT_ID = "my_bot_id";
var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: conversationInfo.token,
}),
styleSet,
styleOptions: avatarOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
</script>
</body>
</html>
So, my bot id is the id from my PVA bot.
I inserted the bot on my site through an iframe and when I change the page the conversation disappear and the user have to start all over again.
If there is a better way to do it using PVA credentials, please share with the community.
Kind regards,
Fernando
Hi Fernando,
Are you using the custom canvas implementation of PVA? If so, and you followed this guide: Automatically start a chatbot conversation - Power Virtual Agents | Microsoft Docs, you can store the Direct Line token in sessionStorage to persist a chat session across page navigation. Here is some sample code: https://pastebin.com/euJe2eA7