Personalizzare l'aspetto di un agente

Note

Questo articolo descrive le caratteristiche utilizzate negli agenti o nei flussi di agenti alimentati dall'imbracatura standard.

L'area di disegno dell'agente controlla la modalità di visualizzazione dell'agente agli utenti. È possibile personalizzare l'area di disegno in due modi:

È anche possibile combinare l'area di disegno personalizzata con la configurazione di un avvio automatico della conversazione.

È possibile modificare il nome e l'icona dell'agente nel portale.

Dopo aver pubblica un agente, gli utenti possono interagire con esso tramite chat Web canvas.

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. Ti assumi il rischio di utilizzarlo.

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

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 Omnichannel for Customer Service, la proprietà Nome visualizzato nella registrazione del portale di Azure ne definisce il nome.
  • Se l'agente deve essere pubblicato in Teams, esaminare i requisiti per le icone nella documentazione per sviluppatori di Microsoft Teams.
  1. Vai alla pagina Panoramica del tuo agente.

  2. Seleziona Modifica accanto a Dettagli.

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

  4. Selezionare Salva.

Personalizzare il canvas predefinito (semplice)

Usare JavaScript e CSS per regolare l'area di disegno predefinita.

Per prima cosa, configura il luogo in cui distribuisci la tua agent canvas.

  1. Creare e pubblicare un agente.

  2. Copiare il codice HTML di esempio in un file denominato index.html. È anche possibile usare l'editor try-it HTML.

    
    <!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. Recuperare l'endpoint del token.

  4. In index.html sostituire:

    const tokenEndpoint = "<YOUR TOKEN ENDPOINT>";
    

    con l'endpoint del token.

  5. Aprire index.html in un browser moderno, ad esempio Microsoft Edge.

  6. Testare l'agente.

Se l'agente non risponde:

  • Assicurati che l'agente sia pubblicato.
  • Verificare il valore dell'endpoint del token.
  • Verificare che l'endpoint del token venga visualizzato dopo il =, 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. In Impostazioni selezionare Canali.

  2. Seleziona E-mail.

  3. Accanto a Endpoint token, selezionare Copia.

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

Utilizzare l'oggetto styleOptions per configurare gli stili predefiniti.

Per altre informazioni su cosa è possibile personalizzare e per collegamenti al file defaultStyleOptions.js, vedere personalizzazione di chat Web.

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",
      "userAvatarInitials": "U"
    };
    
  2. Sostituisci entrambe le immagini avatar con quelle della tua azienda. Se non hai un URL dell'immagine, usa invece una stringa immagine codificata in Base64.

Cambiare il colore di sfondo

  1. Aggiungi un elemento index.html alla tua definizione backgroundColor in styleOptions.

    const styleOptions = {
      "backgroundColor": "lightgray",
      // ...
    };
    
  2. Cambia backgroundColor il colore che vuoi. Usa nomi di colore standard CSS, valori RGB o HEX.

Modifica il nome dell'agente

  1. Aggiorna il testo dell'intestazione <h1> nel index.html file con il seguente codice:

    <body>
      <div id="banner">
        <h1><img src="contoso-agent.png"> Contoso agent name</h1>
      </div>
      <!-- ... -->
    
  2. Modifica il testo con il nome che vuoi dare all'agente. Puoi anche inserire un'immagine, ma potresti dover stilizzarla per farla entrare nella sezione titolo.

Personalizzare e ospitare il canvas della chat (avanzato)

È possibile connettere l'agente di Copilot Studio a una tela personalizzata ospitata come applicazione web autonoma. Questa opzione funziona meglio se devi incorporare un iFrame personalizzato su più pagine web.

Note

L'hosting di un canvas personalizzato richiede lo sviluppo di software. Queste linee guida sono destinate a professionisti IT esperti, ad esempio amministratori IT o sviluppatori che hanno una buona conoscenza degli strumenti di sviluppo, delle utilità e degli ambienti di sviluppo integrati (IDE).

Iniziare con uno di questi esempi personalizzati per l'uso con Copilot Studio:

  • Full bundle è un'area di disegno personalizzata in grado di visualizzare tutto il contenuto completo di Copilot Studio. Ad esempio:

    Pacchetto completo di canvas personalizzato.

  • Localizzazione e caricamento di file è un'interfaccia personalizzata in grado di ottenere la localizzazione di un utente e inviarla a un agente di Copilot Studio. Ad esempio:

    Area di disegno personalizzata per posizione e caricamento di file.

In alternativa, prova altri esempi di canvas di chat Web dal Bot Framework.

Come per la tela predefinita, puoi usarla styleSetOptions per modificare la tela personalizzata. Tutte le proprietà personalizzabili sono elencate in defaultStyleOptions.js. Per altre informazioni su cosa è possibile personalizzare, vedere chat Web personalizzazione.

Supporto per la configurazione della connessione in un canvas personalizzato

Quando un agente basato su harness standard necessita di una connessione utente, la chat canvas riceve una Adaptive Card che richiede una connessione. La tua area di disegno personalizzata deve gestire l'azione della scheda Action.OpenUrlDialog. Senza questa gestione, selezionare Connetti non apre la finestra di connessione attiva.

Apri la finestra di connessione

  1. Registra Action.OpenUrlDialog nel tuo Schede adattive renderer e leggi la sua proprietà url. Accetta solo un URL assoluto http:// o https://.
  2. Decidi se la destinazione è affidabile prima di aprirla. Affidati solo alle origini attendibili che controlli tu o che il tuo team di sicurezza ha esaminato e inserito nell'elenco consentito.
  3. Apri l'URL direttamente dalla selezione dell'utente con window.open(url, "_blank", "popup"). Aprire la finestra dall'azione utente riduce la possibilità che il browser la blocchi.
  4. Per una destinazione affidabile, nell'argomento windowFeatures di window.open, ometti noopener e noreferrer quindi la finestra di connessione può restituire un risultato a window.opener. Per qualsiasi altra destinazione, usa noopener,noreferrer e non accettare un messaggio di ritorno.
  5. Conserva il riferimento restituito Window e l'ID attività della scheda che richiede una connessione. Se il popup viene bloccato, o se l'utente lo chiude senza un risultato valido, tieni disponibile Continua o un'altra azione di recupero. Non interpretare la chiusura della finestra come un’impostazione della connessione riuscita.

L’SDK JavaScript di Schede adattive non implementa Action.OpenUrlDialog per impostazione predefinita. Registra l'azione tramite SerializationContext.actionRegistry, oppure gestiscila direttamente in un renderer che possiedi. Un Action.OpenUrl fallback può aprire la destinazione nei client che non supportano l'azione di dialogo, ma il fallback non può restituire un risultato popup.

Important

Una finestra di connessione con accesso a window.opener può navigare nella pagina della chat o influenzarla in altro modo. Rivedi la destinazione e i suoi reindirizzamenti con il tuo team di sicurezza web. Non permettere a una destinazione affidabile di reindirizzare verso un sito non affidabile mantenendo l'accesso all'opener.

Se incorpori Bot Framework chat Web, Action.OpenUrlDialog gestisce l'apertura della finestra di connessione. Le finestre della stessa origine sono di default affidabili. Per una destinazione cross-origin esaminata, imposta styleOptions.callURLActionTrustedOrigin sull'origine esatta consentita. Separare le origini multiple con virgole. Puoi anche impostare callURLActionPopupWindowHeight e callURLActionPopupWindowWidth. Non aggiungere un'origine che non hai ancora controllato.

Continua dopo la configurazione riuscita della connessione (anteprima)

[Questa sezione fa parte della documentazione non definitiva, pertanto è soggetta a modifiche.]

Important

Questo articolo contiene la documentazione sull'anteprima di Microsoft Copilot Studio ed è pertanto soggetto a modifiche.

Le funzionalità di anteprima non sono destinate all'uso in produzione e potrebbero avere funzionalità limitate. Queste funzionalità sono disponibili prima di una versione ufficiale in modo che sia possibile ottenere l'accesso iniziale e inviare commenti.

Se stai creando un agente destinato alla produzione, vedi Panoramica di Microsoft Copilot Studio.

La finestra di connessione affidabile può inviare un risultato di completamento alla pagina della chat con window.opener.postMessage. Usa l'origine esatta della pagina della chat come origine target, non *.

Nella pagina chat:

  1. Se window.open restituisce null, non accettare un messaggio per quel tentativo. Altrimenti, accetta un messaggio solo quando event.source corrisponde al riferimento popup conservato e event.origin corrisponde all'origine attesa.

  2. Verifica che i dati del messaggio abbiano type: "postback" e un valore nel formato previsto dal tuo agente o runtime.

    Il seguente esempio invia un messaggio con il testo "hello-world" all'agente. Non è visibile nell'interfaccia della chat.

    { "type": "postback", "value": { hello: "World!" } }
    

    Il seguente esempio invia un messaggio JSON { hello: "World!" } all'agente.

    { "type": "postback", "value": { hello: "World!" } }
    
  3. Invia il valore accettato attraverso il meccanismo di postback del Bot Framework. Usa l'ID attività conservata come replyToId; non accettare un ID attività di risposta dal popup.

  4. Accetta al massimo un risultato per ogni popup. Rimuovere l'ascoltatore degli eventi e cancellare il suo timer dopo aver accettato un risultato, aver rifiutato un messaggio malformato dal popup fidato, aver rilevato che il popup si è chiuso o aver raggiunto il limite di tempo. chat Web utilizza un limite di cinque minuti.

  5. Coordinati con l'agente o il runtime per correlare il postback con l'interazione originale che richiede una connessione e riprendi quel turno una sola volta.

La messaggistica del browser è basata sul miglior sforzo. Blocchi popup, navigazione, policy di apertura cross-origin o una finestra chiusa possono impedire la continuazione automatica. Mantieni Continua o un altro percorso di recupero disponibile, e non interpretare un messaggio mancante come un successo.

Distribuisci l'area di disegno personalizzata

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