Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Note
Dieser Artikel beschreibt Funktionen, die in Agenten oder Agent-Flows verwendet werden, die auf dem standard harness basieren.
Die Agent-Canvas steuert, wie der Agent benutzern angezeigt wird. Sie können die Zeichenfläche auf zwei Arten anpassen:
Passen Sie den Standardzeichenbereich mithilfe von JavaScript und CSS in Ihrer Website an. Verwenden Sie diese Option für einfache Änderungen.
Verwenden Sie ein benutzerdefiniertes Canvas, das auf dem Bot Framework Webchat-Canvas basiert. Diese Option erfordert Entwicklungserfahrung und unterstützt die vollständige Anpassung.
Sie können die angepasste Leinwand auch mit dem Konfigurieren eines automatischen Gesprächsstarts kombinieren.
Sie können den Agentnamen und das Symbol im Portal ändern.
Nachdem Sie einen Agent veröffentlicht haben, können Benutzer über die Canvas Webchat damit interagieren.
Important
Sie können den in diesem Artikel enthaltenen Beispielcode nur für die Verwendung mit Copilot Studio installieren und verwenden. Der Beispielcode ist „wie besehen“ lizenziert und von Service Level Agreements oder Supportservices ausgeschlossen. Sie tragen das mit der Nutzung verbundene Risiko.
Microsoft gibt keine ausdrücklichen Gewährleistungen, Garantien oder Bedingungen und schließt ausdrücklich sämtliche stillschweigenden Gewährleistungen der Handelsüblichkeit, Eignung für einen bestimmten Zweck und Nichtverletzung von Rechten Dritter aus.
Hiermit werden der Agentname und das Symbol geändert
Important
- Nachdem Sie das Symbol für einen Agent aktualisiert haben, kann es bis zu 24 Stunden dauern, bis das neue Symbol überall angezeigt wird.
- Wenn Ihr Agent mit Omnichannel für Kundendienst verbunden ist, definiert die Eigenschaft 'Anzeigename' in der Azure-Portalregistrierung seinen Namen.
- Wenn Ihr Agent in Teams veröffentlicht werden soll, lesen Sie die Anforderungen für Symbole in der Microsoft Teams-Entwicklerdokumentation.
Gehen Sie zur Seite Übersicht für Ihren Agent.
Wählen SieBearbeiten neben Details aus.
Ändern Sie den Namen und das Symbol des Agents nach Bedarf.
Wählen Sie Speichern.
Anpassen des Standard-Canvas (einfach)
Verwenden Sie JavaScript und CSS, um das Standard-Canvas anzupassen.
Zuerst konfigurieren Sie, wo Sie Ihre Agenten-Canvas einsetzen.
Kopieren Sie den HTML-Beispielcode in eine Datei mit dem Namen
index.html. Sie können auch den HTML-Try-it-Editor verwenden.<!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>In
index.html, ersetzen Sie:const tokenEndpoint = "<YOUR TOKEN ENDPOINT>";mit Ihrem Token-Endpunkt.
Öffnen Sie
index.htmlin einem modernen Browser, z. B. Microsoft Edge.Testen Sie den Agenten.
Wenn der Agent nicht antwortet:
- Stellen Sie sicher, dass der Agent veröffentlicht ist.
- Überprüfen Sie den Tokenendpunktwert.
- Vergewissern Sie sich, dass der Token-Endpunkt hinter dem
=steht und in doppelten Anführungszeichen"angezeigt wird.
Rufen Sie den Token-Endpunkt für Ihren Agenten ab
Um Ihren Zeichenbereich anzupassen, unabhängig davon, ob es sich um den Standardzeichenbereich oder um einen benutzerdefinierten Zeichenbereich handelt, mit dem Sie eine Verbindung herstellen, benötigen Sie den Tokenendpunkt für Ihren Agent.
Wählen Sie unter "Einstellungen" "Kanäle" aus.
Wählen Sie Email aus.
Wählen Sie neben Token-EndpunktKopieren aus.
Anpassen des Agent-Symbols, der Hintergrundfarbe und des Namens
Verwenden Sie das styleOptions Objekt, um vordefinierte Formatvorlagen zu konfigurieren.
Weitere Informationen zum Anpassen und Links zur datei defaultStyleOptions.js finden Sie unter Webchat Customization.
Ändern des Agent-Symbols
Aktualisieren Sie die
index.htmlDatei mit dem folgenden Beispielcode: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" };Ersetze beide Avatar-Bilder durch deine Firmen-Images. Wenn Sie keine Bild-URL haben, verwenden Sie stattdessen eine Base64-codierte Bildzeichenkette.
Ändern der Hintergrundbildfarbe
Füge deiner
index.htmlDefinitionbackgroundColorein ElementstyleOptionshinzu:const styleOptions = { "backgroundColor": "lightgray", // ... };Wechsle
backgroundColorzu einer beliebigen Farbe. Verwenden Sie Standard-CSS-Farbnamen, RGB-Werte oder HEX.
Name des Agents ändern
Aktualisieren Sie den
<h1>Headertext in derindex.htmlDatei mit folgendem Code:<body> <div id="banner"> <h1><img src="contoso-agent.png"> Contoso agent name</h1> </div> <!-- ... -->Ändern Sie den Text so, wie Sie den Agent nennen möchten. Du kannst auch ein Bild einfügen, aber du musst es vielleicht so gestalten, dass es in den Überschriftenbereich passt.
Chat-Canvas anpassen und hosten (erweitert)
Sie können Ihren Copilot Studio-Agent mit einer benutzerdefinierten Canvas verbinden, die Sie als eigenständige Web-App hosten. Diese Option funktioniert am besten, wenn Sie ein angepasstes iFrame auf mehreren Webseiten einbetten möchten.
Note
Das Hosten eines benutzerdefinierten Canvas erfordert Softwareentwicklung. Dieser Leitfaden richtet sich an erfahrene IT-Experten, z. B. IT-Administratoren oder Entwickler, die über ein gutes Verständnis für Entwicklertools, Dienstprogramme und integrierte Entwicklungsumgebungen (IDEs) verfügen.
Beginnen Sie mit einem der folgenden beispiele, die für die Arbeit mit Copilot Studio erstellt wurden:
Full bundle ist ein benutzerdefinierter Canvas, der alle umfangreichen Inhalte aus Copilot Studio anzeigen kann. Beispiele:
Location und Dateiupload ist eine benutzerdefinierte Oberfläche, die den Standort eines Benutzers abrufen und an einen Copilot Studio-Agenten senden kann. Beispiele:
Alternativ können Sie andere sample Webchat Canvass aus Bot Framework ausprobieren.
Wie bei der Standard-Leinwand kannst du styleSetOptions die benutzerdefinierte Leinwand anpassen. Alle anpassbaren Eigenschaften werden in defaultStyleOptions.jsaufgeführt. Weitere Informationen zum Anpassen finden Sie unter Webchat Customization.
Einrichtung der Verbindungsunterstützung in einer benutzerdefinierten Canvas
Wenn ein Agent, der mit dem Standard-Harness betrieben wird, eine Benutzerverbindung benötigt, erhält der Chatbereich eine Adaptive Card, die eine Verbindung erfordert. Dein individuelles Canvas muss die Action.OpenUrlDialog Aktion der Karte verarbeiten. Ohne diese Behandlung öffnet das Auswählen von Verbinden das fokussierte Verbindungsfenster nicht.
Öffnen Sie das Verbindungsfenster
- Registrieren Sie
Action.OpenUrlDialogin Ihrem Adaptive Karten-Renderer und lesen Sie dessenurl-Eigenschaft. Akzeptieren Sie nur eine absolutehttp://oderhttps://URL. - Entscheiden Sie, ob die Ziel-Origin vertrauenswürdig ist, bevor Sie diese öffnen. Vertrauen Sie nur auf die Ursprünge, die Sie kontrollieren oder die Ihr Sicherheitsteam überprüft und zur Zulassungsliste hinzugefügt hat.
- Öffnen Sie die URL direkt aus der Auswahl des Nutzers mit
window.open(url, "_blank", "popup"). Das Öffnen des Fensters als Reaktion auf eine Benutzeraktion verringert die Wahrscheinlichkeit, dass der Browser es blockiert. - Für ein vertrauenswürdiges Ziel lassen Sie im Argument von
window.opennoopenerundnoreferrerweg, sodass das Verbindungsfenster ein Ergebnis anwindow.openerzurückgeben kann. Verwenden Sie für jedes andere Zielnoopener,noreferrerund akzeptieren Sie keine Rückmeldenachricht. - Behalten Sie die zurückgegebene
WindowReferenz und die Aktivitäts-ID der Karte, für die eine Verbindung erforderlich ist. Wenn das Popup blockiert ist oder der Benutzer es ohne gültiges Ergebnis schließt, halten Sie Continue oder eine andere Wiederherstellungsaktion verfügbar. Interpretiere das Schließen des Fensters nicht als erfolgreiche Verbindungseinrichtung.
Das Adaptive Karten JavaScript SDK implementiert Action.OpenUrlDialog standardmäßig nicht. Registrieren Sie die Aktion über SerializationContext.actionRegistry, oder behandeln Sie die Aktion direkt in einem Renderer, den Sie besitzen. Ein Action.OpenUrl Fallback kann das Ziel in Clients öffnen, die die Dialogaktion nicht unterstützen, aber der Fallback kann kein Popup-Ergebnis zurückgeben.
Important
Ein Verbindungsfenster mit Zugriff auf window.opener kann auf der Chatseite navigieren oder anderweitig beeinflussen. Überprüfen Sie das Ziel und die Weiterleitungen mit Ihrem Websicherheitsteam. Erlauben Sie nicht, dass ein vertrauenswürdiges Ziel auf eine nicht vertrauenswürdige Seite weiterleitet, während der Opener-Zugriff beibehalten wird.
Wenn Sie Bot Framework Webchat einbetten, öffnet dessen Action.OpenUrlDialog Handhabung das Verbindungsfenster. Fenster mit gleichem Ursprung sind standardmäßig vertrauenswürdig. Für ein überprüftes Cross-Origin-Ziel setzen Sie styleOptions.callURLActionTrustedOrigin auf den exakt erlaubten Ursprung. Trenne mehrere Ursprünge mit Kommas. Sie können auch callURLActionPopupWindowWidth und callURLActionPopupWindowHeight festlegen. Füge keine Quelle hinzu, die du nicht überprüft hast.
Fortsetzen nach erfolgreicher Verbindungseinrichtung (Vorschau)
[Dieser Abschnitt ist die Vorabveröffentlichungsdokumentation und unterliegt Änderungen.]
Important
Dieser Artikel enthält die Vorschaudokumentation von Microsoft Copilot Studio und kann geändert werden.
Vorschaufunktionen sind nicht für den Produktionsgebrauch gedacht und verfügen möglicherweise über eingeschränkte Funktionalität. Diese Funktionen stehen vor dem offiziellen Release zur Verfügung, damit Sie früher Zugriff darauf erhalten und Feedback geben können.
Wenn Sie einen produktionsreifen Agenten erstellen, finden Sie weitere Informationen unter Übersicht über Microsoft Copilot Studio.
Das Fenster für vertrauenswürdige Verbindungen kann ein Abschlussergebnis an die Chatseite mit window.opener.postMessage senden. Verwenden Sie den genauen Origin der Chatseite als Ziel-Origin, nicht *.
Auf der Chatseite:
Wenn
window.opennullzurückgegeben hat, akzeptieren Sie keine Nachricht für diesen Versuch. Andernfalls wird eine Nachricht nur akzeptiert, wennevent.sourcemit der gespeicherten Popup-Referenz übereinstimmt undevent.originmit dem erwarteten Ursprung übereinstimmt.Überprüfen Sie, dass die Nachrichtendaten
type: "postback"und einen Wert in der von Ihrem Agenten oder der Laufzeit erwarteten Form haben.Das folgende Beispiel sendet eine Nachricht mit dem Text "hello-world" an den Agenten. Es ist in der Chat-Benutzeroberfläche nicht sichtbar.
{ "type": "postback", "value": { hello: "World!" } }Das folgende Beispiel sendet eine Nachricht mit JSON
{ hello: "World!" }an den Agenten.{ "type": "postback", "value": { hello: "World!" } }Senden Sie den akzeptierten Wert über den Bot-Framework-Postback-Mechanismus. Verwenden Sie die beibehaltene Aktivitäts-ID als
replyToId; akzeptieren Sie keine Antwort-Aktivitäts-ID aus dem Popup.Akzeptieren Sie höchstens ein Ergebnis für jedes Popup. Entfernen Sie den Ereignislistener und löschen Sie seinen Timer, nachdem Sie ein Ergebnis akzeptiert, eine fehlerhafte Nachricht aus dem vertrauenswürdigen Popup abgelehnt, erkannt haben, dass das Popup geschlossen wurde, oder das Zeitlimit erreicht haben. Webchat verwendet ein Fünf-Minuten-Limit.
Koordiniere mit dem Agenten oder der Runtime, um den Postback mit der ursprünglichen, verbindungserforderlichen Interaktion zu korrelieren, und setze diesen Turn genau einmal fort.
Browser-Messaging erfolgt nach bestem Bemühen. Popup-Blocker, Navigation, Cross-Origin-Opener-Policy oder ein geschlossenes Fenster können eine automatische Fortsetzung verhindern. Halten Sie die Option „Fortsetzen“ oder einen anderen Wiederherstellungspfad verfügbar und interpretieren Sie eine fehlende Nachricht nicht als Erfolg.
Stellen Sie Ihre angepasste Canvas bereit
Um Ihren benutzerdefinierten Zeichenbereich zu hosten, stellen Sie alle Dateien in einer Web-App bereit.