You’re offline. This is a read only version of the page.
I have customize the look and feel of the bot's default canvas based on below URL
https://learn.microsoft.com/en-us/microsoft-copilot-studio/customize-default-canvas?tabs=web
How do I transfer (deploy) the bot using Copilot Studio
Thank you @fernandosilva for your help. but the query I have is different I don't intend to implement the Bot in a standalone website, it is an application with release and version management. Is it possible to use this custom canvas through Microsoft Copilot Studio and not through an WYSIWYG editor.
Also can you please share the reference from where you received the latest version of custom canvas.
Hi @mithily ,
If you are using the custom canvas. the latest version is this one:
Share
Report
All responses (
Answers (
<!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">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
bubbleBackground: 'rgba(250, 250, 250, 1)',
bubbleFromUserBackground: 'rgba(250, 250, 250, 1)',
rootHeight: '100%',
rootWidth: '100%',
backgroundColor: 'white',
hideUploadButton: false,
userAvatarBackgroundColor: 'white',
botAvatarBackgroundColor: 'white',
});
// Set the avatar options.
const avatarOptions = {
backgroundColor: 'white',
botAvatarInitials: 'My Bot',
userAvatarInitials: 'User',
};
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);
}
);
var 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,
}),
styleSet,
store: store,
styleOptions: avatarOptions,
},
document.getElementById('webchat')
);
})
.catch(err => console.error("An error occurred: " + err));
</script>
</body>
</html>
You just need to fill the gap on :
var theURL = "";
You can find the URL when you are in the bot dashboard > channels > Line
Copy the the URL and paste it.
Place the html file with the css in your host call in on your website using html and javscript:
On the footer of your site place these code:
<div id="chatwindow"></div>
<div id="chaticon" onclick="chatbotin()"></div>
<div id="chaticonoff" onclick="chatbotout()"></div>
Create or just add in the website javascript file the following:
function chatbotin() {
var cwindowin = document.getElementById("chatwindow");
cwindowin.style.display = "block";
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "the path to your custom canvas bot html file");
ifrm.setAttribute("id", "ichat");
ifrm.setAttribute("frameborder", "0");
ifrm.style.width = "100%";
ifrm.style.height = "100%";
ifrm.style.borderRadius = "10px";
cwindowin.appendChild(ifrm);
var chaticon = document.getElementById("chaticon");
chaticon.style.display = "none";
var chaticonoff = document.getElementById("chaticonoff");
chaticonoff.style.display = "block";
}
function chatbotout() {
var cwindowout = document.getElementById("chatwindow");
cwindowout.style.display = "none";
var chaticonoff = document.getElementById("chaticonoff");
chaticonoff.style.display = "none";
var ifrm = document.getElementById("ichat");
cwindowout.removeChild(ifrm);
var chaticon = document.getElementById("chaticon");
chaticon.style.display = "block";
}
An then your custom bot your come up on your website.
I hop eit helps.
Cheers,
Fernando
#1
Ekta Gupta
4
#2
ricardodesouza
2
#2
L-1234567-0
2
