Tilpas udseendet og følelsen af en Helpdesk-medarbejder
Dit Helpdesk-medarbejder's lærred bestemmer dets udseende og følelse. Du kan tilpasse lærredet på to måder, afhængigt af tilpasningens kompleksitet for de ønskede ændringer:
Tilpas standardlærredet med JavaScript i HTML-koden på det websted, hvor du installerer din Helpdesk-medarbejder.
Denne fremgangsmåde er nyttigt, hvis du vil foretage små tilpasninger uden at investere i kodeudvikling.Brug et brugerdefineret lærred, der er baseret på Bot Framework-lærredet for webchat.
Denne fremgangsmåde kræver omfattende udviklerviden. Det er praktisk for organisationer, der ønsker en helt brugerdefineret oplevelse.
Vigtigt
Du må kun installere og bruge eksempelkoden i denne artikel til brug med Copilot Studio. Eksempelkoden er licenseret "som den er og forefindes" i forhold til serviceaftaler eller supporttjenester. Dokumentet bruges på egen risiko.
Microsoft giver ingen udtrykkelige garantier, eller betingelser og påtager sig intet ansvar og fraskriver sig alle underforståede garantier, herunder garanti for salgbarhed, egnethed til et bestemt formål og ikke-krænkelser.
Når du har oprettet og publiceret et Helpdesk-medarbejder, kan dine kunder bruge Helpdesk-medarbejder's webchatlærred til at interagere med det.
Du kan også kombinere det tilpassede lærred med konfiguration af din Helpdesk-medarbejder for automatisk at starte samtalen.
Endelig kan du ændre navnet og ikonet for din Helpdesk-medarbejder (når den er delt i Microsoft Teams) direkte fra portalen.
Ændre navnet og ikonet Helpdesk-medarbejder
Vigtige oplysninger
Hvis din Helpdesk-medarbejder er forbundet til Omnikanal til Customer Service, defineres navnet af egenskaben visningsnavn i Azure-portalregistreringen.
Du kan ændre Helpdesk-medarbejder's navn og ikon. Dette vil påvirke ikonet i alle kanaler, hvor du udgiver dit Helpdesk-medarbejder.
Vælg Detaljer under Indstillinger i navigationsmenuen.
Skift Helpdesk-medarbejder's navn og ikon. Gennemse anbefalingerne vedrørende ikonformater i Microsoft Teams.
Vælg Gem for at anvende dine ændringer.
Vigtige oplysninger
Når du har opdateret dit Helpdesk-medarbejder-ikon, kan det tage op til 24 timer, før det nye ikon vises overalt.
Hente tokenslutpunkt
Hvis du vil tilpasse dit lærred, uanset om det er standardlærredet eller et brugerdefineret lærred, du opretter forbindelse til, skal du hente dine Helpdesk-medarbejder-oplysninger.
Vælg Kanaler under Indstillinger i navigationsmenuen.
Vælg Mobilapp.
Vælg Kopiér ud for Slutpunkt for token.
Tilpas standardlærredet (simpelt)
Konfigurere, hvordan chatlærredet skal se ud med nogle simple CSS- og JavaScript-formateringsindstillinger.
Først skal du konfigurere, hvor du udruller dit Helpdesk-medarbejder lærred.
Kopier og Indsæt HTML-koden nedenfor, og gem den som indeks.html.
Du kan også kopiere og indsætte koden herunder i w3schools.com HTML prøveeditoren. Du skal stadig tilføje dit 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, som du har oprettet, skal du angive dit tokenslutpunkt på linjen
const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>";.Åbn index.html ved hjælp af en moderne browser (f.eks.) Microsoft Edge for at åbne Helpdesk-medarbejder på det brugerdefinerede lærred.
Test Helpdesk-medarbejder for at sikre, at du modtager svar fra den, og at den fungerer korrekt.
Hvis du støder på problemer, skal du sørge for, at du har udgivet din Helpdesk-medarbejder, og at din token-slutpunkt er indsat på det rigtige sted. Værdien skal være angivet efter lighedstegnet (=) på linjen
const tokenEndpointURL = "<YOUR TOKEN ENDPOINT>"og omgivet af dobbelte anførselstegn (").
Tilpas Helpdesk-medarbejder-ikonet, baggrundsfarven og navnet
Når du har fået det tilpassede lærred til at fungere med din Helpdesk-medarbejder, kan du foretage ændringer i det.
Du kan bruge indstillingerne for JavaScript styleOptions til at konfigurere en række foruddefinerede typografier.
Se Tilpasning af webchat for links til defaultStyleOptions.js-filen og flere oplysninger om, hvad du kan tilpasse, og hvordan det ser ud.
Skift ikonet Helpdesk-medarbejder
Opdater filen indeks.html 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' };Erstat billederne Helpdesk-medarbejder og brugeravataren med dine virksomhedsbilleder.
Hvis du ikke har en URL-adresse til et billede, kan du i stedet bruge en Base64-kodet billedstreng.
Ændre baggrundsfarve
Opdater filen indeks.html med følgende eksempelkode:
const styleOptions = { backgroundColor: 'lightgray' };Skift
backgroundColortil den farve, du ønsker. Du kan bruge standard CSS-farvenavne, RGB-værdier eller HEX.
Ændre navnet Helpdesk-medarbejder
Opdater teksten
<h1>i filen indeks.html med følgende:<body> <div id="banner"> <h1><img src="contosocopilot-teams.png"> Contoso agent name</h1> </div>Skift teksten til det, du vil kalde Helpdesk-medarbejder. Du kan også indsætte et billede, men det kan være nødvendigt at redigere det for at sikre, at det passer ind i overskriftssektionen.
Tilpas og hoste dit chatlærred (avanceret)
Du kan forbinde din Copilot Studio Helpdesk-medarbejder med et brugerdefineret lærred, der hostes som en enkeltstående webapp. Denne indstilling er at foretrække, hvis du har brug for at integrere en brugerdefineret iFrame over flere websider.
Bemærk
Hvis du er vært for et brugerdefineret lærred, kræver det softwareudvikling. Nærværende vejledning er udviklet til erfarne IT-medarbejdere, såsom IT-administratorer eller -udviklere, der har en god forståelse for udviklerværktøjer, værktøjer og IDE'er.
Vælg et eksempel, der skal tilpasses
Vi anbefaler, at du starter med et af disse eksempler, der er specialdesignet til at arbejde sammen med Copilot Studio:
Fuldt bundt er et brugerdefineret lærred, der kan vise alt avanceret indhold fra Copilot Studio. Eksempel:
Placerings- og filoverførsel er et brugerdefineret lærred, der er i stand til at få en brugers placering og sende den til en Copilot Studio Helpdesk-medarbejder. Eksempel:
Du kan også vælge mellem andre eksempler på webchatlærreder, der leveres af Bot Framework.
Tilpas lærredet ved hjælp af styleSetOptions
På samme måde som når standardlærredet tilpasses, kan du bruge styleSetOptions til at tilpasse det brugerdefinerede lærred. Alle de egenskaber, der kan tilpasses, er angivet i defaultStyleOptions.js. Du kan finde flere oplysninger om, hvad du kan tilpasse den, og hvordan det vil se ud, i tilpasning af webchat.
Installer dit brugerdefinerede lærred
Hvis du vil være vært for det brugerdefinerede lærred, skal du installere alle filer på en webapp.
