You’re offline. This is a read only version of the page.
26
Hi,
I am trying to use the new PVA control in a canvas app. I am able to add the control and select my virtual agent just fine. But when it loads it says "Unable to connect" (See below). I have tried everything I can think of and it doesn't seem to be working. The Bot Schema Name is definitely correct, same with the environment id. I have even tried replicating in different environments and bots with the same issue.
Can anyone help me with this? Is anyone able to replicate the issue?
Thanks
Is this your answer?
Oh I see you are creating this in a HTML text control. I was specifically asking about fixing the new PVA canvas app control that's been added, but I guess this is an alternative approach.
FYI for anyone else, I created a new environment in the US and it seems to work fine there. I'm guessing there's still a few bugs (it is still in preview) which will get patched in other regions soon
Hi @ElliotF93 ,
If you copy that html template I posted, follow the steps from the line below and open the html file, you might be able to connect your bot.
Share
Report
All responses (
Answers (
var theURL = "Get your Token Endpoint from PVA>Settings>Channels>Mobile App and paste here";
Cheers,
Fernando
Hi @ElliotF93 ,
I was struggling as well the other day with the same issue till I find the latest version of the custom html canvas.
See below.
<!DOCTYPE html>
<html>
<head>
<title>My bot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div id="heading">
<!-- Change the h1 text to change the bot name -->
<div class="headingFirst">
<h1 class="chatboth1header">Let's Chat!</h1>
</div>
<div class="headingSecond"></div>
</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
rootHeight: '100%',
rootWidth: '100%',
backgroundColor: 'white',
hideUploadButton: false,
userAvatarBackgroundColor: 'white',
botAvatarBackgroundColor: 'white',
suggesteActionLayout: 'stacked',
});
// Set the avatar options.
const avatarOptions = {
backgroundColor: 'white',
botAvatarBackgroundColor: 'rgba(255, 255, 255, 1)',
botAvatarInitials: 'Your initials',
userAvatarInitials: 'User initials',
};
const store = window.WebChat.createStore({},
({
dispatch
}) => next => action => {
if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
dispatch({
meta: {
method: "keyboard",
},
payload: {
activity: {
channelData: {
postBack: true,
},
name: 'startConversation',
type: "event"
},
},
type: "DIRECT_LINE/POST_ACTIVITY",
});
}
return next(action);
}
);
// Add your BOT ID below
var theURL = "Get your Token Endpoint from PVA>Settings>Channels>Mobile App and paste here";
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,
}),
styleSet,
store: store,
styleOptions: avatarOptions,
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
</script>
</body>
</html>
I hope it helps.
Cheers,
Fernando
#1
Romain The Low-Code...
23
#2
Pablo Roldan
21
#3
stampcoin
10
