Remarque
L’accès à cette page requiert une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page requiert une autorisation. Vous pouvez essayer de modifier des répertoires.
Note
Cet article décrit les caractéristiques utilisées dans les agents ou flux d’agents alimentés par le faisceau standard.
Le canevas de l’agent contrôle la façon dont l’agent apparaît aux utilisateurs. Vous pouvez personnaliser le canevas de deux façons :
Personnalisez le canevas par défaut à l’aide de JavaScript et CSS dans votre site web. Utilisez cette option pour les modifications simples.
Utilisez un canevas personnalisé basé sur le canevas Bot Framework Chat Web. Cette option nécessite une expérience de développement et prend en charge la personnalisation complète.
Vous pouvez également combiner le canevas personnalisé avec la configuration d’un démarrage automatique de conversation.
Vous pouvez modifier le nom et l’icône de l’agent dans le portail.
Une fois que vous publier un agent, les utilisateurs peuvent interagir avec lui via le canevas Chat Web.
Important
Vous pouvez installer et utiliser l’exemple de code inclus dans cet article uniquement pour une utilisation avec Copilot Studio. L’exemple de code est concédé sous licence « en l’état » et est exclu de tout accord de niveau de service ou service d’assistance. Vous acceptez le risque lié à leur utilisation.
Microsoft n’offre aucune garantie expresse ou conditions et décline expressément toute garantie implicite, y compris en matière de qualité marchande, d’adéquation à un usage particulier et de non-violation de la loi.
Changer le nom et l’icône de l’assistant
Important
- Après avoir mis à jour l'icône d'un agent, il peut s'écouler jusqu'à 24 heures avant que la nouvelle icône n'apparaisse partout.
- Si votre agent est connecté à Omnichannel for Customer Service, la propriété Display name dans l’inscription du portail Azure définit son nom.
- Si votre agent est destiné à être publié sur Teams, passez en revue les conditions requises pour les icônes dans la documentation du développeur Microsoft Teams.
Accédez à la page Vue d’ensemble pour votre agent.
Sélectionnez Modifier à côté de Détails.
Modifiez le nom et l’icône de l’agent comme vous le souhaitez.
Cliquez sur Enregistrer.
Personnaliser le canevas par défaut (simple)
Utilisez JavaScript et CSS pour ajuster le canevas par défaut.
Premièrement, configurez où vous déployez votre canvas d’agent.
Copiez l’exemple de code HTML dans un fichier nommé
index.html. Vous pouvez également utiliser l’éditeur de test 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>Dans
index.html, remplacez :const tokenEndpoint = "<YOUR TOKEN ENDPOINT>";avec votre point de terminaison de jeton.
Ouvrez
index.htmldans un navigateur moderne, tel que Microsoft Edge.Testez l’agent.
Si l’agent ne répond pas :
- Vérifiez que l’agent est publié.
- Vérifiez la valeur du point de terminaison du jeton.
- Vérifiez que le point de terminaison du jeton s’affiche après le
=, entouré de guillemets doubles".
Récupérer le point de terminaison du jeton pour votre agent
Pour personnaliser votre canevas, qu’il s’agisse du canevas par défaut ou d’un canevas personnalisé auquel vous vous connectez, vous avez besoin du point de terminaison du jeton pour votre agent.
Dans Paramètres, sélectionnez Canaux.
Sélectionnez E-mail.
En regard de Point de terminaison de jeton, sélectionnez Copier.
Personnaliser l’icône, la couleur d’arrière-plan et le nom de l’assistant
Utilisez l’objet styleOptions pour configurer des styles prédéfinis.
Pour plus d’informations sur ce que vous pouvez personnaliser et lier au fichier defaultStyleOptions.js, consultez Chat Web personnalisation.
Changer l’icône de l’assistant
Mettez à jour le
index.htmlfichier avec l’exemple de code suivant :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" };Remplacez les deux images avatar par vos images d’entreprise. Si vous n’avez pas d’URL d’image, utilisez plutôt une chaîne d’images encodée en Base64.
Changer la couleur d’arrière-plan
Dans
index.html, ajoutez unbackgroundColorélément à la définitionstyleOptions:const styleOptions = { "backgroundColor": "lightgray", // ... };Change
backgroundColorpour la couleur que tu veux. Utilisez des noms de couleurs CSS standards, des valeurs RVB ou HEX.
Changer le nom de l’assistant
Mettez à jour le texte de l’en-tête
<h1>dans leindex.htmlfichier avec le code suivant :<body> <div id="banner"> <h1><img src="contoso-agent.png"> Contoso agent name</h1> </div> <!-- ... -->Remplacez le texte par le nom que vous souhaitez donner à l’agent. Vous pouvez aussi insérer une image, mais il se peut que vous deviez la styliser pour qu’elle rentre dans la section titres.
Personnaliser et héberger votre canevas de conversation (avancé)
Vous pouvez connecter votre agent Copilot Studio à un canevas personnalisé que vous hébergez en tant qu’application web autonome. Cette option fonctionne mieux si vous devez intégrer un iFrame personnalisé sur plusieurs pages web.
Note
L’hébergement d’un canevas personnalisé nécessite du développement logiciel. Ce guide est destiné aux professionnels de l’informatique expérimentés, tels que les administrateurs informatiques ou les développeurs qui ont une bonne compréhension des outils de développement, des utilitaires et des environnements de développement intégrés (IDE).
Commencez par l’un de ces exemples personnalisés pour travailler avec Copilot Studio :
Full bundle est un canevas personnalisé capable d’afficher tout le contenu enrichi de Copilot Studio. Par exemple:
Location et chargement de fichiers est un canevas personnalisé capable d'obtenir l'emplacement d'un utilisateur et de l'envoyer à un agent Copilot Studio. Par exemple:
Vous pouvez également essayer d'autres exemples de plates-formes de dialogue Web depuis Bot Framework.
Comme pour la toile par défaut, vous pouvez l’utiliser styleSetOptions pour modifier la toile personnalisée. Toutes les propriétés personnalisables sont répertoriées dans defaultStyleOptions.js. Pour plus d’informations sur ce que vous pouvez personnaliser, consultez Chat Web personnalisation.
Prise en charge de la configuration de la connexion dans un canvas personnalisé
Lorsqu’un agent alimenté par le standard harness a besoin d’une connexion utilisateur, la zone de conversation reçoit une carte adaptative indiquant qu’une connexion est requise. Votre canvas personnalisé doit gérer l’action Action.OpenUrlDialog de la carte. Sans cette gestion, sélectionner Connect n’ouvre pas la fenêtre de connexion ayant le focus.
Ouvrez la fenêtre de connexion
- Enregistrez
Action.OpenUrlDialogdans votre moteur de rendu Cartes adaptatives et lisez sa propriétéurl. N’acceptez qu’une URL absoluehttp://ouhttps://. - Décidez si l’origine de destination est fiable avant de l’ouvrir. Ne faites confiance qu’aux sources que vous contrôlez ou que votre équipe de sécurité a examinées et ajoutées à la liste d’autorisation.
- Ouvrez l’URL directement depuis la sélection de l’utilisateur avec
window.open(url, "_blank", "popup"). Ouvrir la fenêtre depuis l’action utilisateur réduit le risque que le navigateur la bloque. - Pour une destination de confiance, dans l’argument
windowFeaturesdewindow.open, ometteznoopeneretnoreferrerafin que la fenêtre de connexion puisse retourner un résultat àwindow.opener. Pour toute autre destination, utiliseznoopener,noreferreret n’acceptez pas un message de retour. - Conservez la référence retournée
Windowet l’ID d’activité de la carte nécessitant une connexion. Si la fenêtre pop-up est bloquée, ou si l’utilisateur la ferme sans résultat valide, il faut garder Continuer ou une autre action de récupération disponible. N’interprétez pas la fermeture de la fenêtre comme une mise en place réussie de la connexion.
Le SDK JavaScript Cartes adaptatives n'implémente pas Action.OpenUrlDialog par défaut. Enregistrez l’action via SerializationContext.actionRegistry, ou gérez l’action directement dans un moteur de rendu que vous possédez. Un Action.OpenUrl fallback peut ouvrir la destination dans des clients qui ne prennent pas en charge l’action de boîte de dialogue, mais le fallback ne peut pas renvoyer de résultat de fenêtre contextuelle.
Important
Une fenêtre de connexion ayant accès à window.opener peut naviguer ou autrement affecter la page de chat. Examinez la destination et ses redirections avec votre équipe de sécurité web. N’autorisez pas une destination de confiance à rediriger vers un site non fiable tout en conservant l’accès à opener.
Si vous intégrez Bot Framework Chat Web, son traitement de Action.OpenUrlDialog ouvre la fenêtre de connexion. Les fenêtres de même origine sont de confiance par défaut. Pour une destination cross-origin vérifiée, définissez styleOptions.callURLActionTrustedOrigin sur l’origine exacte autorisée. Séparez plusieurs origines par des virgules. Vous pouvez aussi définir callURLActionPopupWindowHeight et callURLActionPopupWindowWidth. N’ajoutez pas une origine que vous n’avez pas vérifiée.
Continuer après la mise en place réussie de la connexion (aperçu)
[Cette section est une documentation de type avant-projet susceptible d’être modifié.]
Important
Cet article contient la documentation en préversion de Microsoft Copilot Studio et est susceptible d'être modifié.
Les fonctionnalités en version préliminaire ne sont pas destinées à une utilisation en production et peuvent être restreintes. Ces fonctionnalités sont disponibles avant une publication officielle afin que vous puissiez y accéder en avant-première et fournir des commentaires.
Si vous créez un assistant prêt pour la production, consultez Vue d’ensemble de Microsoft Copilot Studio.
La fenêtre de connexion approuvée peut envoyer un résultat de complétion à la page de chat avec window.opener.postMessage. Utilisez l’origine exacte de la page de discussion comme origine cible, pas *.
Sur la page de discussion :
Si
window.opena renvoyénull, n’acceptez pas de message pour cette tentative. Sinon, acceptez un message uniquement lorsqueevent.sourcecorrespond à la référence pop-up conservée etevent.origincorrespond à l’origine attendue.Validez que les données du message comportent
type: "postback"et une valeur de la forme attendue par votre agent ou votre runtime.L’exemple suivant envoie un message avec le texte « hello-world » à l’agent. Ce n’est pas visible dans l’interface du chat.
{ "type": "postback", "value": { hello: "World!" } }L’exemple suivant envoie un message JSON
{ hello: "World!" }à l’agent.{ "type": "postback", "value": { hello: "World!" } }Envoyez la valeur acceptée via le mécanisme de postback du Bot Framework. Utilisez l’ID d’activité retenu comme
replyToId; n’acceptez pas un ID d’activité de réponse provenant de la fenêtre contextuelle.Acceptez au maximum un résultat pour chaque fenêtre contextuelle. Supprimez l’écouteur d’événements et effacez son minuteur après avoir accepté un résultat, rejeté un message mal formé de la fenêtre pop-up de confiance, détecté que la fenêtre s’est fermée, ou atteint la limite de temps. Chat Web utilise une limite de cinq minutes.
Coordonnez-vous avec l’agent ou le runtime pour corréler le postback avec l’interaction initiale nécessitant la connexion, puis reprenez ce tour exactement une fois.
La messagerie dans le navigateur est fournie sans garantie. Les bloqueurs de fenêtres contextuelles, la navigation, la stratégie Cross-Origin-Opener-Policy ou une fenêtre fermée peuvent empêcher la continuation automatique. Gardez Continue ou une autre voie de récupération disponible, et n’interprétez pas un message manquant comme un succès.
Déployer votre canevas personnalisé
Pour héberger votre canevas personnalisé, déployez tous les fichiers dans une application web.