Anpassa utseendet och känslan för en handläggare
Din handläggare duk bestämmer dess utseende och känsla. Du kan anpassa designytan på två sätt, beroende på hur komplexa önskade ändringar:
Anpassa standardarbetsytan med JavaScript-format i HTML-koden för webbplatsen där du distribuerar din handläggare.
Denna metod är praktisk om du vill göra små anpassningar utan att behöva investera i kodutveckling.Använd en anpassad designyta baserad på Bot Frameworks webbchattdesignyta.
För den här metoden krävs omfattande utvecklarkunskaper. Detta är användbart för organisationer som vill ha en helt anpassad upplevelse.
Viktigt!
Du får endast installera och använda exempelkoden i den här artikeln för användning med Copilot Studio. Exempelkoden är licensierad och ingår inte i några servicenivåavtal eller supporttjänster. Användande sker på egen risk.
Microsoft lämnar inga uttryckliga garantier, eller villkor och exkluderar alla underförstådda garantier, inklusive säljbarhet, lämplighet för ett särskilt ändamål och ansvarsfrihet mot inskränkning av immaterielrätt.
När du har skapat och publicerat en handläggare kan dina kunder använda handläggare:s webbchatt-arbetsyta för att interagera med den.
Du kan också kombinera den anpassade arbetsytan med att konfigurera din handläggare för att automatiskt starta konversationen.
Slutligen kan du ändra namnet och ikonen för din handläggare (när den delas in Microsoft Teams) direkt från portalen.
Ändra namnet och ikonen handläggare
Viktigt
Om din handläggare är ansluten till Flerkanal för Customer Service definieras dess namn av visningsnamn egenskapen i Azure portalregistreringen.
Du kan ändra handläggare:s namn och ikon. Detta kommer att påverka ikonen i alla kanaler där du publicerar dina handläggare.
I navigeringsmenyn, under Inställningar, väljer du Detaljer.
Ändra handläggare:s namn och ikon. Läs rekommendationerna om Microsoft Teams-ikonformat.
Välj Spara för att införa ändringarna.
Viktigt
När du har uppdaterat din handläggare's ikon kan det ta upp till 24 timmar innan den nya ikonen visas överallt.
Hämta tokenslutpunkt
Om du vill anpassa din arbetsyta, oavsett om det är standardarbetsytan eller en anpassad arbetsyta som du ansluter till, måste du hämta dina handläggare detaljer.
I navigeringsmenyn, under Inställningar, väljer du Kanaler.
Välj Mobilapp.
Bredvid tokenslutpunkt, välj kopiera.
Anpassa standarddesignytan (enkel)
Konfigurera hur chattarbetsytan ska se ut med några enkla CSS och JavaScript-alternativ.
Först måste du konfigurera var du distribuerar din handläggare arbetsyta.
Kopiera och klistra in HTML-koden nedan och spara den som index.html.
Du kan också kopiera och klistra in koden nedan i w3schools.com HTML prova den i redigeraren. Du måste fortfarande lägga till tokenslutpunkt.<!doctype html> <html lang="en"> <head> <title>Contoso Sample Web Chat</title> <!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to a separate file for organization in larger projects. Please visit https://github.com/microsoft/BotFramework-WebChat for details about Web Chat. --> <style> html, body { height: 100%; } body { margin: 0; } h1 { color: whitesmoke; font-family: Segoe UI; font-size: 16px; line-height: 20px; margin: 0; padding: 0 20px; } #banner { align-items: center; background-color: black; display: flex; height: 50px; } #webchat { height: calc(100% - 50px); overflow: hidden; position: fixed; top: 50px; width: 100%; } </style> </head> <body> <div> <div id="banner"> <h1>Contoso agent name</h1> </div> <div id="webchat" role="main"></div> </div> <!-- In this sample, the latest version of Web Chat is being used. In production environment, the version number should be pinned and version bump should be done frequently. Please visit https://github.com/microsoft/BotFramework-WebChat/tree/main/CHANGELOG.md for changelog. --> <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> <script> (async function () { // Specifies style options to customize the Web Chat canvas. // Please visit https://microsoft.github.io/BotFramework-WebChat for customization samples. const styleOptions = { // Hide upload button. hideUploadButton: true }; // Specifies the token endpoint URL. // To get this value, visit Copilot Studio > Settings > Channels > Mobile app page. const tokenEndpointURL = new URL('<AGENT TOKEN ENDPOINT>'); // Specifies the language the agent and Web Chat should display in: // - (Recommended) To match the page language, set it to document.documentElement.lang // - To use current user language, set it to navigator.language with a fallback language // - To use another language, set it to supported Unicode locale // Setting page language is highly recommended. // When page language is set, browsers will use native font for the respective language. const locale = document.documentElement.lang || 'en'; // Uses language specified in <html> element and fallback to English (United States). // const locale = navigator.language || 'ja-JP'; // Uses user preferred language and fallback to Japanese. // const locale = 'zh-HAnt'; // Always use Chinese (Traditional). const apiVersion = tokenEndpointURL.searchParams.get('api-version'); const [directLineURL, token] = await Promise.all([ fetch(new URL(`/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`, tokenEndpointURL)) .then(response => { if (!response.ok) { throw new Error('Failed to retrieve regional channel settings.'); } return response.json(); }) .then(({ channelUrlsById: { directline } }) => directline), fetch(tokenEndpointURL) .then(response => { if (!response.ok) { throw new Error('Failed to retrieve Direct Line token.'); } return response.json(); }) .then(({ token }) => token) ]); // The "token" variable is the credentials for accessing the current conversation. // To maintain conversation across page navigation, save and reuse the token. // The token could have access to sensitive information about the user. // It must be treated like user password. const directLine = WebChat.createDirectLine({ domain: new URL('v3/directline', directLineURL), token }); // Sends "startConversation" event when the connection is established. const subscription = directLine.connectionStatus$.subscribe({ next(value) { if (value === 2) { directLine .postActivity({ localTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone, locale, name: 'startConversation', type: 'event' }) .subscribe(); // Only send the event once, unsubscribe after the event is sent. subscription.unsubscribe(); } } }); WebChat.renderWebChat({ directLine, locale, styleOptions }, document.getElementById('webchat')); })(); </script> </body> </html>I filen index.html du skapade, ange tokenslutpunkt på raden
const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";.Öppna index.html med en modern webbläsare (till exempel) Microsoft Edge för att öppna handläggare på den anpassade arbetsytan.
Testa handläggare för att se till att du får svar från den och att den fungerar korrekt.
Om du stöter på problem kontrollerar du att du har publicerat din handläggare och att din token slutpunkt har infogats på rätt plats. Den ska vara efter likhetstecknet (=) på raden
const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>"och omges av dubbla citattecken (”).
Anpassa handläggare-ikonen, bakgrundsfärgen och namnet
När du har fått den anpassade arbetsytan att fungera med din handläggare kan du göra ändringar i den.
Du kan använda JavaScript styleOptions alternativen för att konfigurera ett antal fördefinierade format.
Se Anpassning av webbchatt för länkar till filen defaultStyleOptions.js och mer information om vad du kan anpassa och hur den kommer att se ut.
Ändra handläggare-ikonen
Uppdatera filen index.html med följande exempelkod:
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' };Ersätt bilderna handläggare och användaravataren med dina företagsbilder.
Om du inte har en bild-URL kan du i stället använda en Base64-kodad bildsträng.
Ändra bakgrundsfärgen
Uppdatera filen index.html med följande exempelkod:
const styleOptions = { backgroundColor: 'lightgray' };Ändra
backgroundColortill vilken färg du vill. Du kan använda standard CSS färgnamn, RGB-värden eller HEX.
Ändra namnet handläggare
Uppdatera
<h1>text i filen index.html med följande:<body> <div id="banner"> <h1><img src="contosocopilot-teams.png"> Contoso agent name</h1> </div>Ändra texten till vad du vill kalla handläggare. Du kan även infoga en bild, men du kan behöva skapa en stil för den så att den passar i rubrikavsnittet.
Anpassa och vara värd för din chattdesignyta (avancerat)
Du kan ansluta din Copilot Studio handläggare med en anpassad arbetsyta som finns som en fristående webbapp. Det här alternativet passar bäst om du behöver bädda in en anpassad iFrame på flera webbsidor.
Kommentar
Att vara värd för en anpassad designyta kräver utveckling av programvara. Vårsökvägledning här är avsedd för erfarna IT-proffs, t.ex. IT-administratörer eller IT-utvecklare med en bra förståelse för utvecklarverktyg, andra verktyg och IDE:er.
Välj ett exempel att anpassa
Vi rekommenderar att du startar med ett av de här exempel som är anpassat för att arbeta med Copilot Studio:
Fullständig bunt är en anpassad designyta som kan visa allt innehåll från Copilot Studio. Till exempel:
Plats- och filuppladdning är en anpassad arbetsyta som kan hämta en användares plats och skicka den till en Copilot Studio handläggare. Till exempel:
Du kan också välja bland andra exempel på webbchatt-arbetsytor från Bot Framework.
Anpassa arbetsytan med styleSetOptions
När du anpassar standard designytan kan du använda styleSetOptions för att anpassa den anpassade designytan med hjälp av. Alla anpassningsbara egenskaper visas i defaultStyleOptions.js. Mer information om vad du kan anpassa och hur det kommer att se ut finns i Webbchatt-anpassningar.
Distribuera den anpassade arbetsytan
Om du vill vara värd för den anpassade arbetsytan distribuerar du alla filer till en webbapp.
