Personalizza l'aspetto di un agente

La canvas del tuo agente ne determina l'aspetto. Puoi personalizzare il canvas in due modi, a seconda della complessità le modifiche desiderate:

• Personalizza il canvas predefinito con uno stile basato su JavaScript nel codice HTML del sito Web in cui viene distribuito l'agente. Questo approccio è utile se vuoi effettuare piccole personalizzazioni senza investire nello sviluppo del codice.

• Usare un canvas personalizzato derivato dal canvas di Bot Framework Web Chat. Questo approccio richiede una conoscenza approfondita degli sviluppatori. È utile per le organizzazioni che vogliono un'esperienza completamente personalizzata.

Puoi anche combinare il canvas personalizzato con la configurazione dell'agente per avviare automaticamente la conversazione.

Infine, è possibile modificare il nome e l'icona dell'agente direttamente dal portale.

Dopo aver pubblicato un agente, i clienti possono usare l'area di disegno Web Chat dell'agente per interagire con esso.

Important

È possibile installare e usare il codice di esempio incluso in questo articolo solo per l'uso con Copilot Studio. Il codice di esempio è concesso in licenza "così com'è" ed è escluso da qualsiasi accordo sul livello di servizio o servizi di supporto. L'utente si assume tutti i rischi derivanti dal suo utilizzo.

Microsoft non riconosce garanzie o condizioni espresse ed esclude le garanzie implicite di commerciabilità, idoneità a uno scopo specifico e non violazione.

Modifica l'icona e il nome dell'agente

App Web

Important

• Dopo aver aggiornato l'icona per un agente, potrebbero essere necessarie fino a 24 ore prima che la nuova icona venga visualizzata ovunque.
• Se l'agente è connesso a Multicanale per Customer Service, il suo nome è definito dalla proprietà Nome visualizzato nella registrazione del portale Azure.
• Se l'agente deve essere pubblicato in Teams, esaminare i requisiti per le icone nella documentazione per sviluppatori di Microsoft Teams.

1. Passare alla pagina Panoramica dell'agente.

2. Accanto a Dettagli selezionare Modifica.

3. Modificare il nome e l'icona dell'agente in base alle esigenze.

4. Seleziona Salva.

Teams

Puoi personalizzare l'aspetto dell'agente quando viene aggiunto come app in Microsoft Teams. Puoi modificare l'icona e il nome dell'agente in qualsiasi momento e aggiungere una descrizione lunga e breve quando pubblichi l'agente.

Important

• Gli aggiornamenti all'icona e al colore di un agente possono richiedere fino a 24 ore per essere visualizzati per gli agenti già pubblicati e condivisi.
• La modifica dell'icona per gli agenti approvati da un amministratore non ha alcun effetto. Gli agenti approvati da un amministratore usano sempre l'icona dell'app Teams come avatar. Altre informazioni sulla condivisione degli agenti con un'organizzazione.

1. Nel riquadro sinistro, in Impostazioni, selezionare Dettagli.

2. Modificare il nome e l'icona dell'agente in base alle esigenze.

   L'icona deve essere un tipo di immagine e può essere di qualsiasi dimensione: Copilot Studio ridimensiona automaticamente l'immagine e la posiziona al centro del quadrato colorato. Ti consigliamo di usare un file PNG, con una risoluzione di 32x32 o 64x64 pixel e trasparenza, in modo che il colore possa venire attraverso l'icona.

3. Al termine, seleziona Salva.

   Selezionare Reimposta per ripristinare le modifiche apportate alla versione salvata in precedenza.

Note

Quando si prepara un agente pronto per la condivisione con altri utenti del team, è anche possibile specificare descrizioni brevi e lunghe per l'agente e immettere altre informazioni su chi ha creato l'agente.

Personalizzare il canvas predefinito (semplice)

Configura l'aspetto del canvas di chat con alcuni semplici opzioni di stile di CSS e JavaScript.

Innanzitutto, devi configurare dove stai distribuendo il canvas dell'agente.

1. Creare e pubblicare un agente.

2. Copiare il codice HTML seguente e salvarlo in un file denominato index.html. In alternativa, copia e incolla il codice nell'editor di prova HTML di w3schools.com.

   
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Contoso Web Chat Assistant" />
     <title>Contoso Sample Web Chat Test</title>
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <script>
       let webChatInstance = null;
       let directLineUrl = null;
   
       // Replace with your token endpoint
       const tokenEndpoint = "<YOUR TOKEN ENDPOINT>";
       const styleOptions = {"accent":"#0078D4","autoScrollSnapOnPage":true,"autoScrollSnapOnPageOffset":0,"avatarBorderRadius":"7%","avatarSize":31,"backgroundColor":"#e8e9eb","botAvatarBackgroundColor":"#ffffff00","botAvatarImage":"https://powercatexternal.blob.core.windows.net/creatorkit/Assets/ChatbotLogoBlue.png","botAvatarInitials":"B","bubbleAttachmentMaxWidth":480,"bubbleAttachmentMinWidth":250,"bubbleBackground":"#f0eded","bubbleBorderColor":"#f5f5f5","bubbleBorderRadius":41,"bubbleBorderStyle":"solid","bubbleBorderWidth":1,"bubbleFromUserBackground":"#ebefff","bubbleFromUserBorderColor":"#f5f5f5","bubbleFromUserBorderRadius":41,"bubbleFromUserBorderStyle":"solid","bubbleFromUserBorderWidth":1,"bubbleFromUserNubOffset":0,"bubbleFromUserNubSize":0,"bubbleFromUserTextColor":"#242424","bubbleImageHeight":10,"bubbleImageMaxHeight":240,"bubbleImageMinHeight":240,"bubbleMessageMaxWidth":480,"bubbleMessageMinWidth":120,"bubbleMinHeight":50,"bubbleNubOffset":0,"bubbleTextColor":"#242424","emojiSet":true,"fontSizeSmall":"70%","hideUploadButton":false,"messageActivityWordBreak":"break-word","monospaceFont":"Consolas","paddingRegular":10,"paddingWide":10,"primaryFont":null,"sendBoxBackground":"#e8e9eb","sendBoxBorderTop":"solid 1px #808080","sendBoxButtonColor":"#0078d4","sendBoxButtonColorOnHover":"#006cbe","sendBoxButtonShadeBorderRadius":40,"sendBoxButtonShadeColorOnHover":"","sendBoxHeight":60,"sendBoxPlaceholderColor":"#171616","sendBoxTextColor":"#2e2d2d","showAvatarInGroup":"status","spinnerAnimationHeight":16,"spinnerAnimationPadding":12,"spinnerAnimationWidth":16,"subtleColor":"#000000FF","suggestedActionBackgroundColor":"#006FC4FF","suggestedActionBackgroundColorOnHover":"#0078D4","suggestedActionBorderColor":"","suggestedActionBorderRadius":10,"suggestedActionBorderWidth":1,"suggestedActionLayout":"flow","suggestedActionTextColor":"#FFFFFFFF","typingAnimationBackgroundImage":"url('https://wpamelia.com/wp-content/uploads/2018/11/ezgif-2-6d0b072c3d3f.gif')","typingAnimationDuration":5000,"typingAnimationHeight":20,"typingAnimationWidth":64,"userAvatarBackgroundColor":"#222222","userAvatarImage":"https://avatars.githubusercontent.com/u/8174072?v=4&size=64","userAvatarInitials":"U"};
       const backgroundImage = "";
       document.addEventListener('DOMContentLoaded', () => {
         const root = document.documentElement;
         root.style.setProperty('--primary-color', createGradient(styleOptions.accent));
         root.style.setProperty('--header-textColor', styleOptions.suggestedActionTextColor);
         if (backgroundImage) {
           const webchatElement = document.getElementById('webchat');
           webchatElement.style.backgroundImage = `url(${backgroundImage})`;
           webchatElement.style.backgroundSize = 'cover';
           webchatElement.style.backgroundPosition = 'center';
           webchatElement.style.backgroundRepeat = 'no-repeat';
           const overlay = document.createElement('div');
           overlay.className = 'webchat-overlay';
           webchatElement.appendChild(overlay);
         }
       });
       function createGradient(baseColor) {
         const r = parseInt(baseColor.slice(1,3), 16);
         const g = parseInt(baseColor.slice(3,5), 16);
         const b = parseInt(baseColor.slice(5,7), 16);
         const lighterColor = `#${Math.min(255, r+30).toString(16).padStart(2,'0')}${Math.min(255, g+30).toString(16).padStart(2,'0')}${Math.min(255, b+30).toString(16).padStart(2,'0')}`;
         const darkerColor = `#${Math.max(0, r-30).toString(16).padStart(2,'0')}${Math.max(0, g-30).toString(16).padStart(2,'0')}${Math.max(0, b-30).toString(16).padStart(2,'0')}`;
         return `linear-gradient(135deg, ${lighterColor}, ${baseColor}, ${darkerColor})`;
       }
       const environmentEndPoint = tokenEndpoint.slice(
         0,
         tokenEndpoint.indexOf("/powervirtualagents")
       );
       const apiVersion = tokenEndpoint
         .slice(tokenEndpoint.indexOf("api-version"))
         .split("=")[1];
       const regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`;
       function showChat() {
         const popup = document.getElementById("chatbot-popup");
         const openButton = document.getElementById("open-chat");
         popup.classList.add("visible");
         openButton.classList.add("hidden");
       }
       function hideChat() {
         const popup = document.getElementById("chatbot-popup");
         const openButton = document.getElementById("open-chat");
         popup.classList.remove("visible");
         openButton.classList.remove("hidden");
       }
       function createCustomStore() {
         return window.WebChat.createStore(
           {},
           ({ dispatch }) =>
             (next) =>
             (action) => {
               if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
                 dispatch({
                   type: "DIRECT_LINE/POST_ACTIVITY",
                   meta: { method: "keyboard" },
                   payload: {
                     activity: {
                       channelData: { postBack: true },
                       name: "startConversation",
                       type: "event",
                     },
                   },
                 });
               }
               return next(action);
             }
         );
       }
       async function restartConversation() {
         try {
           if (!directLineUrl) {
             console.error("DirectLine URL not initialized");
             return;
           }
           const response = await fetch(tokenEndpoint);
           const conversationInfo = await response.json();
           if (!conversationInfo.token) {
             throw new Error("Failed to get conversation token");
           }
           const newDirectLine = window.WebChat.createDirectLine({
             domain: `${directLineUrl}v3/directline`,
             token: conversationInfo.token,
           });
           const webchatElement = document.getElementById("webchat");
           webChatInstance = window.WebChat.renderWebChat(
             {
               directLine: newDirectLine,
               styleOptions,
               store: createCustomStore(),
             },
             webchatElement
           );
         } catch (err) {
           console.error("Failed to restart conversation:", err);
         }
       }
       async function initializeChat() {
         try {
           const response = await fetch(regionalChannelSettingsURL);
           const data = await response.json();
           directLineUrl = data.channelUrlsById.directline;
           if (!directLineUrl) {
             throw new Error("Failed to get DirectLine URL");
           }
           const conversationResponse = await fetch(tokenEndpoint);
           const conversationInfo = await conversationResponse.json();
           if (!conversationInfo.token) {
             throw new Error("Failed to get conversation token");
           }
           const directLine = window.WebChat.createDirectLine({
             domain: `${directLineUrl}v3/directline`,
             token: conversationInfo.token,
           });
           webChatInstance = window.WebChat.renderWebChat(
             {
               directLine,
               styleOptions,
               store: createCustomStore(),
             },
             document.getElementById("webchat")
           );
         } catch (err) {
           console.error("Failed to initialize chat:", err);
         }
       }
       initializeChat();
     </script>
     <style>
       :root {
         --primary-gradient: var(--primary-color);
         --chat-width: 450px;
         --chat-height: 520px;
         --header-height: 56px;
         --border-radius: 16px;
         --transition-speed: 0.3s;
       }
       * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, sans-serif;
       }
       body {
         min-height: 100vh;
         background-color: #f3f4f6;
       }
       #chatbot-popup {
         display: none;
         position: fixed;
         bottom: 32px;
         right: 32px;
         width: var(--chat-width);
         height: var(--chat-height);
         background: white;
         border-radius: var(--border-radius);
         box-shadow: 0 18px 40px -5px rgba(0, 0, 0, 0.2),
           0 15px 20px -5px rgba(0, 0, 0, 0.1);
         overflow: hidden;
         opacity: 0;
         transform-origin: bottom right;
         transform: scale(0.95);
         transition: all var(--transition-speed) ease-in-out;
         z-index: 999;
       }
       #chatbot-popup.visible {
         display: block;
         opacity: 1;
         transform: scale(1);
       }
       #chatbot-header {
         background: var(--primary-color);
         padding: 16px 20px;
         height: var(--header-height);
         display: flex;
         justify-content: space-between;
         align-items: center;
         color: var(--header-textColor);
       }
       .header-title {
         display: flex;
         align-items: center;
         gap: 12px;
         font-size: 16px;
         font-weight: 500;
       }
       .header-buttons {
         display: flex;
         gap: 12px;
         align-items: center;
       }
       .icon-button {
         background: none;
         border: none;
         color: var(--header-textColor);
         cursor: pointer;
         padding: 8px;
         border-radius: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.2s ease;
       }
       .icon-button:hover {
         color: var(--header-textColor);
         background: rgba(255, 255, 255, 0.1);
       }
       .icon-button:focus {
         outline: 2px solid rgba(255, 255, 255, 0.5);
         outline-offset: 2px;
       }
       #webchat {
         height: calc(100% - var(--header-height));
         background-color: #f9fafb;
         position: relative;
       }
       .webchat-overlay {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(255, 255, 255, 0.85);
         pointer-events: none;
         z-index: 1;
       }
       #webchat > div {
         position: relative;
         z-index: 2;
       }
       #webchat .webchat__basic-transcript__content {
         white-space: pre-wrap !important;
         word-break: break-word !important;
       }
       #webchat .webchat__bubble__content {
         padding: 8px 12px !important;
       }
       #webchat .webchat__bubble {
         max-width: 85% !important;
         margin: 8px !important;
       }
       #webchat .webchat__basic-transcript__content ul,
       #webchat .webchat__basic-transcript__content ol,
       #webchat .webchat__bubble__content ul,
       #webchat .webchat__bubble__content ol {
         padding-left: 24px !important;
         margin: 8px 0 !important;
         list-style-position: outside !important;
       }
       #webchat .webchat__basic-transcript__content li,
       #webchat .webchat__bubble__content li {
         margin: 4px 0 !important;
         padding-left: 4px !important;
       }
       #open-chat {
         position: fixed;
         bottom: 32px;
         right: 32px;
         width: 64px;
         height: 64px;
         border-radius: 50%;
         background: var(--primary-gradient);
         border: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         transition: all var(--transition-speed) ease-in-out;
         z-index: 998;
       }
       #open-chat.hidden {
         opacity: 0;
         transform: scale(0.95) translateY(10px);
         pointer-events: none;
       }
       #open-chat:hover {
         transform: translateY(-4px);
         box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
       }
       #open-chat:focus {
         outline: 3px solid rgba(79, 70, 229, 0.5);
         outline-offset: 2px;
       }
       #open-chat svg {
         width: 28px;
         height: 28px;
         color: white;
         transition: transform 0.2s ease;
       }
       .main-content {
         max-width: 1200px;
         margin: 0 auto;
         padding: 48px 24px;
       }
       .main-content h1 {
         font-size: 36px;
         color: #111827;
         text-align: center;
       }
       .main-content p {
         font-size: 18px;
         color: #4b5563;
         line-height: 1.6;
         margin-bottom: 48px;
         text-align: center;
         max-width: 800px;
         margin-left: auto;
         margin-right: auto;
       }
       .content-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 32px;
         margin-bottom: 32px;
       }
       .content-box {
         background: linear-gradient(135deg, #e6e6e6, #c4c4c4, #9f9f9f);
         padding: 32px;
         border-radius: 12px;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                     0 2px 4px -1px rgba(0, 0, 0, 0.06);
         min-height: 300px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         text-align: center;
         position: relative;
         overflow: hidden;
       }
       .content-box::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 4px;
       }
       .content-box.featured {
         grid-column: span 2;
         min-height: 350px;
         background: linear-gradient(135deg, #e6e6e6, #c4c4c4, #9f9f9f);
         color: #000000;
       }
       .content-box h2 {
         font-size: 24px;
         margin-bottom: 16px;
         position: relative;
       }
       .content-box p {
         font-size: 16px;
         color: #6b7280;
         margin-bottom: 0;
       }
       .content-box.featured p {
         color: #000000;
       }
       @media (max-width: 768px) {
         .content-grid {
           grid-template-columns: 1fr;
         }
         .content-box.featured {
           grid-column: span 1;
         }
         .main-content {
           padding: 24px 16px;
         }
         .main-content h1 {
           font-size: 28px;
         }
         #chatbot-popup {
           width: 100%;
           height: 100%;
           bottom: 0;
           right: 0;
           border-radius: 0;
         }
       }
     </style>
   </head>
   <body>
     <div class="main-content">
       <h1>Header</h1>
       <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.</p>
       <div class="content-grid">
         <div class="content-box featured">
           <h2>Featured Content</h2>
           <p>Primary content area with custom styling and gradient background</p>
         </div>
         <div class="content-box">
           <h2>Section One</h2>
           <p>Content box with minimal design</p>
         </div>
         <div class="content-box">
           <h2>Section Two</h2>
           <p>Another content section with consistent styling</p>
         </div>
       </div>
     </div>
     <div id="chatbot-popup" role="complementary" aria-label="Chat Assistant">
       <div id="chatbot-header">
         <div class="header-title">
           <svg
             class="chat-icon"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
             aria-hidden="true"
           >
             <path
               d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
             ></path>
           </svg>
           <span>Contoso Assistant</span>
         </div>
         <div class="header-buttons">
           <button
             class="icon-button"
             id="restart-button"
             onclick="restartConversation()"
             aria-label="Restart Conversation"
           >
             <svg
               width="20"
               height="20"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
               aria-hidden="true"
             >
               <path
                 d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
               ></path>
               <path d="M3 3v5h5"></path>
             </svg>
           </button>
           <button
             class="icon-button"
             id="close-button"
             onclick="hideChat()"
             aria-label="Close Chat"
           >
             <svg
               width="20"
               height="20"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
               aria-hidden="true"
             >
               <line x1="18" y1="6" x2="6" y2="18"></line>
               <line x1="6" y1="6" x2="18" y2="18"></line>
             </svg>
           </button>
         </div>
       </div>
       <div id="webchat" role="main"></div>
     </div>
     <button
       id="open-chat"
       onclick="showChat()"
       aria-label="Open Chat Assistant"
     >
       <svg
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
         aria-hidden="true"
       >
         <path
           d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
         ></path>
       </svg>
     </button>
   </body>
   </html>
   
   

3. Recupera l'endpoint del token per il tuo agente.

4. In index.html, alla riga const tokenEndpoint = "<YOUR TOKEN ENDPOINT>";, sostituisci il segnaposto con l'endpoint del token per il tuo agente.

5. Aprire index.html usando un browser moderno (ad esempio, Microsoft Edge) per aprire l'agente nell'area di disegno personalizzata.

6. Testare l'agente per assicurarsi di ricevere risposte da esso e che funzioni correttamente.

   In caso di problemi, assicurarsi di aver pubblicato l'agente e che l'endpoint del token si trovi nella posizione corretta. L'endpoint del token deve essere inserito dopo il segno di uguale (=) sulla riga const tokenEndpoint = "<YOUR TOKEN ENDPOINT>"; e racchiuso tra virgolette doppie (").

Recuperare l'endpoint del token per l'agente

Per personalizzare il canvas, predefinito o personalizzato al quale ti connetti, hai bisogno dell'endpoint del token per il tuo agente.

1. Nel menu di spostamento in Impostazioni selezionare Canali.

2. Selezionare Posta elettronica. Viene visualizzato il pannello di configurazione per questo canale.

3. Accanto a Endpoint token selezionare Copia.

Personalizzare l'icona, il colore di sfondo e il nome dell'agente

Una volta che il canvas personalizzato funziona con il tuo agente, puoi modificarlo.

È possibile usare le opzioni JavaScript styleOptions per configurare molti stili predefiniti.

Vedi Personalizzazione della chat web per collegamenti al file defaultStyleOptions.js e ulteriori informazioni su cosa puoi personalizzare e il relativo aspetto.

Modifica l'icona dell'agente

1. Aggiornare il index.html file con il codice di esempio seguente:

   const styleOptions = {
     accent: '#00809d',
     botAvatarBackgroundColor: '#FFFFFF',
     botAvatarImage: 'https://learn.microsoft.com/azure/bot-service/v4sdk/media/logo_bot.svg',
     botAvatarInitials: 'BT',
     userAvatarImage: 'https://avatars.githubusercontent.com/u/661465'
   };  
   

2. Sostituisci le immagini dell'avatar dell'agente e dell'utente con le immagini della tua società.
   Se non hai un URL di immagine, puoi utilizzare una stringa di immagine con codifica Base64.

Cambiare il colore di sfondo

1. Aggiornare il file con il index.html codice di esempio seguente:

   const styleOptions = {
     backgroundColor: 'lightgray'
   };  
   

2. Modifica backgroundColor sul colore che desideri. Puoi usare i nomi di colore CSS standard, i valori RGB o HEX.

Modifica il nome dell'agente

1. Aggiornare il <h1> testo nel index.html file con il codice seguente:

   <body>
     <div id="banner">
       <h1><img src="contosocopilot-teams.png"> Contoso agent name</h1>
     </div>
   

2. Modifica il testo con ciò che vuoi per chiamare l'agente. È anche possibile inserire un'immagine, anche se potrebbe essere necessario applicare uno stile per assicurarsi che si adatti alla sezione dell'intestazione.

Personalizzare e ospitare il canvas della chat (avanzato)

Puoi connettere l'agente Copilot Studio con un canvas personalizzato ospitato come app Web autonoma. Questa opzione è utile se devi incorporare un iFrame personalizzato su più pagine Web.

Note

L'hosting di un canvas personalizzato richiede lo sviluppo di software. Queste indicazioni sono destinate a professionisti IT esperti, ad esempio amministratori IT o sviluppatori che hanno una buona conoscenza di strumenti di sviluppo, utilità e IDE.

Selezionare un esempio da personalizzare

Ti consigliamo di iniziare con uno di questi esempi personalizzati per lavorare con Copilot Studio:

• Il bundle completo è un'area di disegno personalizzata in grado di visualizzare tutti i contenuti avanzati di Copilot Studio. Per esempio:

  

• Posizione e caricamento del file è un canvas personalizzato in grado di ottenere la posizione di un utente e di inviarla a un agente Copilot Studio. Per esempio:

  

Oppure puoi scegliere tra altri canvas di esempio di chat Web fornito da Bot Framework.

Personalizzare l'area di disegno usando styleSetOptions

Come per la personalizzazione del canvas predefinito, puoi utilizzare styleSetOptions per personalizzare il canvas personalizzato. Tutte le proprietà personalizzabili sono elencate in defaultStyleOptions.js. Per ulteriori informazioni su cosa puoi personalizzare e come apparirà, vedi Personalizzazione della chat web.

Distribuire il canvas personalizzato

Per ospitare l'area di disegno personalizzata, distribuire tutti i file in un'app Web.

Contenuti correlati

• Chat Web di Bot Framework
• Generazione di un token Direct Line