Del via

Tilpasse Web Chat utseende med Webchat Playground

Webchat Playground hjelper deg med å tilpasse utseendet og oppførselen til agenten din Web Chat. Det intuitive brukergrensesnittet lar deg endre farger, fonter, miniatyrbilder og mer slik at det matcher merkevarens identitet. Denne artikkelen beskriver hvordan du bruker Webchat Playground til å opprette og administrere temaer og eksportere stiler som JSON eller HTML.

Webchat Playground-grensesnitt

Webchat Playgrounds brukervennlige grensesnitt hjelper deg med å definere utseendet og funksjonaliteten til Web Chat. Du kan enkelt gjøre justeringer og se forhåndsvisninger av endringene dine i sanntid.

Grensesnittet har tre hovedområder:

  1. Den venstre ruten viser lagrede temaer med primærfarger, sekundærfarger og aksentfarger. Velg et tema for å redigere det eller forhåndsvise det.

  2. Den midterste ruten gir en forhåndsvisning av det valgte temaet eller temaet du redigerer.

  3. Med den høyre ruten kan du veksle mellom JSON- og Kodesnutt-faner. JSON-visningen inneholder gjeldende stiler i en JSON-matrise, som du kan lime inn i en eksisterende Web Chat. Kodesnuttvisningen inneholder eksempel-HTML for en Web Chat med de innebygde stilene.

Skjermbilde av Webchat Playground UI som viser de tilgjengelige temaene, forhåndsvisningsruten og en JSON-kodesnutt.

Dette eksemplet på brukergrensesnittet viser:

  1. I venstre rute, stilredigereren der du redigerer eller oppretter et tema.

    Inndelinger inkluderer Generelt, Send boks, Forslagsboks, Avatar og Boble. Redigeringsprogrammet inkluderer også en tilgjengelighetskontroll for alle aktuelle seksjoner. Du lagrer og sletter handlinger øverst.

  2. I høyre rute, fanen Kodeutdrag som viser eksempel-HTML. Bytt til JSON-fanen for å se eksempel-JSON.

Skjermbilde av Webchat Playground UI som viser redigeringsprogrammet for temastil, forhåndsvisningsrute og kodesnuttfanen.

Bruk forhåndsdefinerte temaer eller lag dine egne

Webchat Playground tilbyr forhåndsdefinerte temaer som viser ulike tilpasningsalternativer for Web Chat opplevelse. Disse temaene gir deg et utgangspunkt når du designer et nytt tema. Du kan også opprette nye temaer som dekker dine spesifikke behov og lagre dem for senere bruk.

Forhåndsvis et tema

Velg et tema fra venstre rute (der fargene vises) for å åpne forhåndsvisningen av webchat.

Opprette et nytt tema

Opprette et nytt tema:

  1. Velge Legg til et tema fra venstre rute.
    Den venstre ruten blir en stilredigerer der du kan gjøre endringer.
  2. Skriv inn et navn for temaet.
  3. Velg Lagre.

Rediger et tema

Slik redigerer du et eksisterende tema:

  1. Velg blyantikonet ved siden av temanavnet i venstre rute.
  2. Gjør endringer i stilredigereren.
  3. Velg Lagre når du er ferdig.

Slett et tema

Slik sletter du et eksisterende tema:

  1. Åpne temaet i redigeringsmodus.
  2. Velg slett-ikonet (papirkurv-ikonet) øverst.

Eksporter stiler

For å eksportere stiler:

  1. Velg temaet du ønsker fra temavelgeren.
  2. Velg JSON-fanen i ruten til høyre.
  3. Kopier all teksten i visningen, og lim den inn i Web Chat HTML ved hjelp av variabelen styleOptions.

Eksporter HTML-snutten

Slik eksporterer du HTML-koden:

  1. Velg temaet du ønsker fra temavelgeren.
  2. Velg kodesnuttfanen i ruten til høyre.
  3. Lagre alle HTML-kodene i visningen som en fil med en.html filtype.
  4. Last opp HTML-filen til webserveren.

Eksempel på HTML

Eksempel-HTML-kodesnutten inneholder en flytende Web Chat-kontroll med de valgte stilene anvendt.

Skjermbilde av Web Chat flytende kontrollprogram med egendefinerte stiler brukt.

  • Last updated on