Power Platform Community Forum Thread Details

If you are using the custom canvas. the latest version is this one:

<!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