I am integrating a power virtual gents canvas app using an enpoint, what happens is that when I refresh or go to a second page, it reloads with a new conversation. How can I get him to keep the conversation going? My code is:
<!DOCTYPE html>
<html>
<head>
<title>Contoso Sample Web Chat</title>
<!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to a separate file for organization in larger projects -->
</head>
<body>
<div>
<div id="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 token endpoint below
const theURL = "";
var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`;
var directline;
fetch(regionalChannelSettingsURL)
.then((response) => {
return response.json();
})
.then((data) => {
directline = data.channelUrlsById.directline;
})
.catch(err => console.error("An error occurred: " + err));
fetch(theURL)
.then(response => response.json())
.then(conversationInfo => {
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
domain: `${directline}v3/directline`,
token: conversationInfo.token,
}),
styleOptions
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
</script>
</body>
</html>
Suggestions and recommendations