Merk
Tilgang til denne siden krever autorisasjon. Du kan prøve å logge på eller endre kataloger.
Tilgang til denne siden krever autorisasjon. Du kan prøve å endre kataloger.
Note
Denne artikkelen beskriver funksjoner som brukes i agenter eller agentstrømmer drevet av standardledningsnettet.
Agentlerretet styrer hvordan agenten ser ut for brukere. Du kan tilpasse lerretet på to måter:
Tilpass standardlerretet ved hjelp av JavaScript og CSS på nettstedet. Bruk dette alternativet for enkle endringer.
Bruk et egendefinert lerret basert på Bot Framework Web Chat lerret. Dette alternativet krever utviklingsopplevelse og støtter fullstendig tilpasning.
Du kan også kombinere det tilpassede lerretet med å konfigurere en automatisk samtalestart.
Du kan endre agentnavnet og -ikonet i portalen.
Når du har publiser en agent, kan brukere samhandle med den gjennom lerretet Web Chat.
Important
Du kan installere og bruke eksempelkoden som er inkludert i denne artikkelen, bare for bruk med Copilot Studio. Eksempelkoden er lisensiert «som den er», og utelates fra alle serviceavtaler eller kundestøttetjenester. Du bruker det på egen risiko.
Microsoft gir ingen uttrykkelige garantier eller vilkår, og ekskluderer alle underforståtte garantier, inkludert salgbarhet, anvendelighet for særskilte formål og ikke-krenkelse.
Endre navn og ikon for agenten
Important
- Når du har oppdatert ikonet for en agent, kan det ta opptil 24 timer før det nye ikonet vises overalt.
- Hvis agenten er koblet til Omnichannel for Customer Service, definerer Display-navnet-egenskapen i Azure portalregistrering navnet.
- Hvis agenten er ment å publiseres til Teams, kan du se gjennom kravene for ikoner i utviklerdokumentasjonen for Microsoft Teams.
Gå til Oversikt-siden for agenten.
Velg Rediger ved siden av Detaljer.
Endre agentens navn og ikon etter ønske.
Velg Lagre.
Tilpass standardlerretet (enkelt)
Bruk JavaScript og CSS til å justere standardlerretet.
Først, konfigurer hvor du deployerer agent-canvasen din.
Kopier EKSEMPEL-HTML-koden til en fil med navnet
index.html. Du kan også bruke redigeringsprogrammet for HTML-forsøk.<!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>I
index.htmlerstatter du:const tokenEndpoint = "<YOUR TOKEN ENDPOINT>";med tokenendepunktet.
Åpne
index.htmli en moderne nettleser, for eksempel Microsoft Edge.Test agenten.
Hvis agenten ikke svarer:
- Kontroller at agenten er publisert.
- Bekreft tokenets endepunktverdi.
- Bekreft at tokenets endepunkt vises etter
=, omgitt av doble anførselstegn".
Hent tokenendepunktet for agenten
Hvis du vil tilpasse lerretet, enten det er standardlerretet eller et egendefinert lerret du kobler til, trenger du tokenendepunktet for agenten.
Velg Kanaler i Innstillinger.
Velg E-post.
Velg Kopier ved siden av tokenendepunktet.
Tilpass agentikonet, bakgrunnsfargen og navnet på roboten
styleOptions Bruk objektet til å konfigurere forhåndsdefinerte stiler.
Hvis du vil ha mer informasjon om hva du kan tilpasse og koble til defaultStyleOptions.js-filen, kan du se Web Chat tilpasning.
Endre agentikonet
index.htmlOppdater filen med følgende eksempelkode: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" };Bytt ut begge avatarbildene med firmabildene dine. Hvis du ikke har en bilde-URL, bruk en Base64-kodet bildestreng i stedet.
Endre bakgrunnsfargen
Legg til
index.htmletbackgroundColorelement i definisjonen dinstyleOptions:const styleOptions = { "backgroundColor": "lightgray", // ... };Bytt
backgroundColortil hvilken som helst farge du ønsker. Bruk standard CSS-fargenavn, RGB-verdier eller HEX.
Endre agentnavnet
Oppdater
<h1>headerteksten iindex.htmlfilen med følgende kode:<body> <div id="banner"> <h1><img src="contoso-agent.png"> Contoso agent name</h1> </div> <!-- ... -->Endre teksten til det du vil kalle agenten. Du kan også sette inn et bilde, men du må kanskje style det for å få det til å passe inn i overskriftsdelen.
Tilpasse og være vert for chattelerretet (avansert)
Du kan koble agenten i Copilot Studio til et egendefinert lerret som du driver som en frittstående nettapplikasjon. Dette alternativet fungerer best hvis du trenger å legge inn en tilpasset iFrame på flere nettsider.
Note
Det å være vert for et egendefinert lerret krever programvareutvikling. Denne veiledningen er ment for erfarne IT-teknikere, for eksempel IT-administratorer eller utviklere som har god forståelse av utviklerverktøy, verktøy og integrerte utviklingsmiljøer (IDEer).
Start med ett av disse eksemplene som er spesialbygd for å fungere med Copilot Studio:
Full-pakke er et egendefinert lerret som kan vise alt rikt innhold fra Copilot Studio. Eksempel:
Plassering og filopplasting er et egendefinert lerret som kan hente en brukers plassering og sende den til en Copilot Studio-agent. Eksempel:
Alternativt kan du prøve andre sample Web Chat lerreter fra Bot Framework.
Som med standard lerret, kan du bruke styleSetOptions det til å justere det tilpassede lerretet. Alle egenskaper som kan tilpasses, er oppført i defaultStyleOptions.js. Hvis du vil ha mer informasjon om hva du kan tilpasse, kan du se Web Chat tilpasning.
Støtt oppsett av tilkoblinger i et egendefinert lerret
Når en agent drevet av standardselen trenger en brukertilkobling, mottar chatlerretet et dynamisk kort som krever tilkobling. Ditt tilpassede canvas må håndtere kortets Action.OpenUrlDialog handling. Uten denne håndteringen åpnes ikke det fokuserte tilkoblingsvinduet når du velger Koble til.
Åpne tilkoblingsvinduet
- Registrer
Action.OpenUrlDialogi din Dynamiske kort-renderer og les densurlegenskap. Aksepter kun en absolutthttp://ellerhttps://URL. - Bestem om måladressen er pålitelig før du åpner den. Stol kun på opprinnelser du kontrollerer eller som sikkerhetsteamet ditt har gjennomgått og satt på tillatelseslisten.
- Åpne URL-en direkte fra brukerens valg med
window.open(url, "_blank", "popup"). Å åpne vinduet som følge av en brukerhandling reduserer sjansen for at nettleseren blokkerer det. - For et klarert mål, i argumentet
windowFeaturestilwindow.open, utelater dunoopenerognoreferrerslik at tilkoblingsvinduet kan returnere et resultat tilwindow.opener. For andre destinasjoner, bruknoopener,noreferrerog ikke godta en returmelding. - Behold den returnerte
Windowreferansen og aktivitets-ID-en til kortet som krever tilkobling. Hvis popupen blokkeres, eller hvis brukeren lukker den uten gyldig resultat, behold Fortsett eller en annen gjenopprettingshandling tilgjengelig. Ikke tolk vinduslukking som en vellykket opprettelse av tilkoblingen.
JavaScript-SDK-en for Dynamiske kort implementerer ikke Action.OpenUrlDialog som standard. Registrer handlingen gjennom SerializationContext.actionRegistry, eller håndter handlingen direkte i en renderer du eier. En Action.OpenUrl fallback kan åpne destinasjonen i klienter som ikke støtter dialoghandlingen, men fallback kan ikke returnere et popup-resultat.
Important
Et tilkoblingsvindu med tilgang til window.opener kan navigere eller på annen måte påvirke chatsiden. Gå gjennom destinasjonen og omdirigeringene sammen med websikkerhetsteamet ditt. Ikke la et klarert mål omdirigere til et ikke-klarert nettsted med fortsatt åpningstilgang.
Hvis du bygger inn Bot Framework-nettchat, åpner håndteringen Action.OpenUrlDialog tilkoblingsvinduet. Vinduer med samme opprinnelse er pålitelige som standard. For et vurdert kryssopprinnelsesmål angir du styleOptions.callURLActionTrustedOrigin til den nøyaktig tillatte opprinnelsen. Skill flere opprinnelser med komma. Du kan også sette callURLActionPopupWindowHeight og callURLActionPopupWindowWidth. Ikke legg til en opprinnelse du ikke har gjennomgått.
Fortsett etter vellykket tilkoblingsoppsett (forhåndsvisning)
[Denne delen er forhåndsutgavedokumentasjon og kan bli endret.]
Important
Denne artikkelen inneholder dokumentasjon for Microsoft Copilot Studio-forhåndsversjonen og kan bli endret.
Evalueringsfunksjonalitet er ikke ment for produksjonsbruk og kan ha begrensninger. Disse funksjonene er tilgjengelige før en offisielle utgivelsen slik at du kan få tidlig tilgang og gi tilbakemeldinger.
Hvis du skal bygge en produksjonsklar agent, kan du se Oversikt over Microsoft Copilot Studio.
Vinduet for pålitelig tilkobling kan sende et fullføringsresultat til chat-siden med window.opener.postMessage. Bruk chattesidens eksakte opprinnelse som målopprinnelse, ikke *.
På chat-siden:
Hvis
window.openreturnerernull, må du ikke godta en melding for det forsøket. Ellers, aksepter en melding kun nårevent.sourcesamsvarer med den bevarte popup-referansen ogevent.originsamsvarer med den forventede opprinnelsen.Bekreft at meldingsdataene har
type: "postback"og en verdi i den formen agenten eller kjøretiden forventer.Følgende eksempel sender en melding med teksten "hello-world" til agenten. Det er ikke synlig i chat-grensesnittet.
{ "type": "postback", "value": { hello: "World!" } }Følgende eksempel sender en melding med JSON
{ hello: "World!" }til agenten.{ "type": "postback", "value": { hello: "World!" } }Send den aksepterte verdien gjennom Bot Framework-tilbakeposteringsmekanismen. Bruk den lagrede aktivitets-ID-en som
replyToId; ikke godta en svaraktivitets-ID fra popup-vinduet.Aksepter maksimalt ett resultat for hver popup. Fjern hendelseslytteren og nullstill timeren etter å ha akseptert et resultat, avvist en feildannet melding fra den pålitelige popupen, oppdaget at popupen lukket seg, eller nådd tidsgrensen. Web Chat bruker en grense på fem minutter.
Koordiner med agenten eller kjøretiden for å knytte postbacken til den opprinnelige interaksjonen som krever tilkobling, og gjenoppta den dialogomgangen nøyaktig én gang.
Nettlesermeldinger leveres etter beste evne. Popup-blokkere, navigasjon, Cross-Origin-Opener-Policy (COOP) eller et lukket vindu kan forhindre automatisk fortsettelse. Ha Fortsett eller en annen gjenopprettingsvei tilgjengelig, og ikke tolk en manglende melding som suksess.
Distribuere et tilpasset lerret
Hvis du vil være vert for det egendefinerte lerretet, distribuerer du alle filer til en nettapp.