Skip to main content

Notifications

Community site session details

Community site session details

Session Id : w5+m+TofJvYup2pT4e6I9n
Copilot Studio - General
Unanswered

How do I transfer my custom index.html back to Copilot Studio

Like (0) ShareShare
ReportReport
Posted on 20 Dec 2023 07:40:40 by 6

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

Categories:
  • mithily Profile Picture
    6 on 20 Dec 2023 at 14:44:33
    Re: How do I transfer my custom index.html back to 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.

  • fernandosilva Profile Picture
    Super User 2024 Season 1 on 20 Dec 2023 at 09:18:23
    Re: How do I transfer my custom index.html back to Copilot Studio

    Hi @mithily ,

     

    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

     

     

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

🌸 Community Spring Festival 2025 Challenge Winners! 🌸

Congratulations to all our community participants!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Leaderboard > Copilot Studio - General

#1
Romain The Low-Code Bearded Bear Profile Picture

Romain The Low-Code... 76

#2
Pablo Roldan Profile Picture

Pablo Roldan 61

#3
Michael E. Gernaey Profile Picture

Michael E. Gernaey 17 Super User 2025 Season 1

Overall leaderboard
Loading started