Tilpasse utseendet og virkemåten til robotens standardlerret

Artikkel
05/29/2023

Robotens utseende og stil defineres av lerretet. Hvis du vil tilpasse roboten, må du tilpasse lerretet. Du kan tilpasse lerretet på to måter, avhengig av kompleksiteten i tilpassingene:

Tilpass standardlerretet med JavaScript-stiler i HTML-koden for nettstedet der du bruker roboten.
Denne tilnærmingen kan være nyttig hvis du vil foreta små tilpassinger uten å investere i kodeutvikling.
Bruke et egendefinert lerret som er basert på Bot Framework-lerretet for webchat.
Denne metoden krever omfattende kunnskap om utviklere. Det er nyttig for organisasjoner som ønsker en fullstendig tilpasset opplevelse.

Viktig

Du kan installere og bruke eksempelkoden som er inkludert i denne artikkelen, som bare kan brukes med Microsoft Power Virtual Agents. 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.

Forutsetning

Finn ut mer om hva du kan gjøre med Power Virtual Agents.

Webapp
Teams

Når du har opprettet og publisert en robot, kan kundene bruke robotens nettchattelerret til å samhandle med den.

Du kan også kombinere det tilpassede lerretet ved å konfigurere roboten til automatisk å starte samtalen.

Til slutt kan du endre ikonet for og nanet på roboten (når roboten blir delt i Microsoft Teams) direkte fra portalen.

Endre navn og ikon for roboten

Viktig

Hvis roboten er koblet til Omnikanal for Customer Service, defineres robotens navn av egenskapen Visningsnavn i Azure-portalregistreringen.

Du kan endre navn og ikon for roboten. Dette kommer til å ha innvirkning på ikonet i alle kanaler der du publiserer roboten.

Velg Detaljer under Innstillinger på navigasjonsmenyen.
Endre navn og ikon for roboten. Se gjennom anbefalingene om ikonformater for Microsoft Teams
Velg Lagre for å lagre endringene.

Viktig

Etter at du har oppdatert robotikonet, kan det ta inntil 24 timer før det nye ikonet vises overalt.

Hent tokenendepunkt

Hvis du vil tilpasse lerretet, enten det er standardlerretet eller et egendefinert lerret du kobler til, må du hente informasjon om roboten din.

Velg Kanaler under Innstillinger på navigasjonsmenyen.
Velg Mobilapp.
Velg Kopier ved siden av Tokenendepunkt.

Tilpasse standardlerretet (enkelt)

Konfigurer hvordan chattelerretet skal se ut, med enkelte enkle og brukervennlige CSS- og JavaScript-stilalternativer.

Først må du konfigurere hvor du skal distribuere robotlerretet.

Opprette og publisere en robot.

Kopier og lim inn HTML-koden nedenfor, og lagre den som index.html.
Du kan også kopiere og lime inn koden nedenfor i w3schools.com HTML try it-redigeringsprogrammet. Du må fremdeles legge til tokenendepunktet.

<!DOCTYPE html>
<html>
<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 -->
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        h1 {
            font-size: 16px;
            font-family: Segoe UI;
            line-height: 20px;
            color: whitesmoke;
            display: table-cell;
            padding: 13px 0px 0px 20px;
        }

        #heading {
            background-color: black;
            height: 50px;
        }

        .main {
            margin: 18px;
            border-radius: 4px;
        }

        div[role="form"]{
            background-color: black;
        }

        #webchat {
            position: fixed;
            height: calc(100% - 50px);
            width: 100%;
            top: 50px;
            overflow: hidden;
        }

    </style>

</head>
<body>
    <div>
        <div id="heading">
            <!-- Change the h1 text to change the bot name -->    
            <h1>Contoso Bot Name</h1>
        </div>
        <div id="webchat" role="main"></div>
    </div>    

  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

  <script>
        const styleOptions = {

           // Add styleOptions to customize Web Chat canvas
           hideUploadButton: true
        };

        // Add your BOT token endpoint below
        var theURL = "<BOT TOKEN ENDPOINT>";

        var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
        var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
        var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`; 

        var directline;
            fetch(regionalChannelSettingsURL)
                .then((response) => {
                    return response.json();
                    })
                .then((data) => {
                    directline = data.channelUrlsById.directline;
                    })
                .catch(err => console.error("An error occurred: " + err));

      fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat(
                    {
                        directLine: window.WebChat.createDirectLine({
                            domain: `${directline}v3/directline`,
                            token: conversationInfo.token,
                        }),
                        styleOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

    </script>
  </body>
</html>

I index.html-filen du oppretter angir du tokenendepunktet i linjen var theURL = "<YOUR TOKEN ENDPOINT>";.
Åpne index. html i en moderne nettleser (for eksempel Microsoft Edge) for å åpne roboten i det egendefinerte lerretet.
Test roboten for å sikre at du mottar svar fra roboten din, og at den fungerer som den skal.

Hvis det oppstår problemer, må du sørge for at du har publisert roboten, og at tokenendepunktet er satt inn på riktig sted. Det må komme etter likhetstegnet (=) på linjen var theURL = "<YOUR TOKEN ENDPOINT>", og stå omgitt av doble anførselstegn (").

Tilpass ikonet, bakgrunnsfargen og navnet på roboten

Når du har fått det tilpassede lerretet til å fungere sammen med roboten din, kan du gjøre endringer i det.

Du kan bruke JavaScript styleOptions-alternativene til å konfigurere en rekke forhåndsdefinerte stiler.

Se Nettchattilpassing for å få koblinger til filen defaultStyleOptions.js, og mer informasjon om hva du kan tilpasse, og hvordan utseendet blir.

Endre robotikonet

Oppdater filen index.html med følgende eksempelkode:

const styleOptions = {
            botAvatarInitials: 'BT',
            accent: '#00809d',
            botAvatarBackgroundColor: "#FFFFFF",
            botAvatarImage: 'https://learn.microsoft.com/azure/bot-service/v4sdk/media/logo_bot.svg',
            userAvatarImage: 'https://avatars.githubusercontent.com/u/661465'
        };

Bytt ut bildene i roboten og brukeravatarer med firmaets bilder.
Hvis du ikke har en bildenettadresse, kan du bruke en Base64-kodet bildestreng i stedet.

Endre bakgrunnsfargen

Oppdater filen index.html med følgende eksempelkode:

const styleOptions = {

            backgroundColor: 'lightgray'

        };

Endre backgroundColor til en hvilken som helst farge. Du kan bruke standard CSS-fargenavn, RGB-verdier eller HEX.

Endre robotnavnet

Oppdater <h1>-teksten i filen index.html med følgende:

<body>
    <div id="heading">
         <!-- Change the h1 text to change the bot name -->
         <h1><img src="contosobot-teams.png"> Contoso Bot Name</h1>
    </div>

Endre teksten til det du vil kalle roboten. Du kan også sette inn et bilde, men du må kanskje tilpasse det for å sikre at det passer inn i overskriftsdelen.

Tilpasse og være vert for chattelerretet (avansert)

Du kan koble Power Virtual Agents-roboten din sammen med et egendefinert lerret som er driftet som en fritt stående webapp. Dette alternativet er best hvis du må bygge inn en tilpasset iFrame på tvers av flere nettsider.

Merk

Det å være vert for et egendefinert lerret krever programvareutvikling. Denne veiledningen er beregnet på erfarne IT-medarbeidere, for eksempel IT-administratorer eller utviklere som har god forståelse av utviklerverktøy og integrerte utviklingsmiljøer.

Velg et eksempel du vil tilpasse

Vi anbefaler at du starter med et av disse eksemplene, som er spesialutviklet for å fungere med Power Virtual Agents:

Fullstendig bunt er et egendefinert lerret som kan vise alt rikt innhold fra Power Virtual Agents. Eksempel:
Plassering og filopplasting er et egendefinert lerret som kan brukes til å hente en brukers plassering og sende den til en robot ved hjelp av Power Virtual Agents. Eksempel:

Du kan også velge fra andre eksempellerreter for webchat fra Bot Framework.

Tilpasse lerretet ved hjelp av `stylesetOptions`

På samme måte som med tilpassing av standardlerretet, kan du bruke styleSetOptions til å tilpasse det egendefinerte lerretet. Alle egenskaper som kan tilpasses, vises i defaultStyleOptions.js. Hvis du vil ha mer informasjon om hva du kan tilpasse og hvordan det vil se ut, kan du se tilpassing av nettchat.

Distribuere et tilpasset lerret

Hvis du vil være vert for det egendefinerte lerretet, distribuerer du alle filene til en nettapp.

Tilpasse utseendet og virkemåten til robotens standardlerret

Forutsetning

Endre navn og ikon for roboten

Hent tokenendepunkt

Tilpasse standardlerretet (enkelt)

Tilpass ikonet, bakgrunnsfargen og navnet på roboten

Endre robotikonet

Endre bakgrunnsfargen

Endre robotnavnet

Tilpasse og være vert for chattelerretet (avansert)

Velg et eksempel du vil tilpasse

Tilpasse lerretet ved hjelp av `stylesetOptions`

Distribuere et tilpasset lerret

Endre ikon og navn for robotavataren

Endre farge og beskrivelse for roboten

Flere ressurser

Flere ressurser

Tilpasse utseendet og virkemåten til robotens standardlerret

Forutsetning

Endre navn og ikon for roboten

Hent tokenendepunkt

Tilpasse standardlerretet (enkelt)

Tilpass ikonet, bakgrunnsfargen og navnet på roboten

Endre robotikonet

Endre bakgrunnsfargen

Endre robotnavnet

Tilpasse og være vert for chattelerretet (avansert)

Velg et eksempel du vil tilpasse

Tilpasse lerretet ved hjelp av stylesetOptions

Distribuere et tilpasset lerret

Beslektede emner

Flere ressurser

Flere ressurser

Tilpasse lerretet ved hjelp av `stylesetOptions`