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
