# Bygg din chattupplevelse

Zooms verktyg gör det enkelt att anpassa och lansera din chattupplevelse med liten eller ingen kod.

### Chattengagemangsfönster

Chattengagemangsfönstret är hur dina användare meddelar din virtuella agent eller mänskliga agent. Med Zooms verktyg kan du bygga ett chattfönster som är lätt att se och interagera med och som matchar ditt företags varumärke.

För att skapa eller redigera ditt chattengagemangsfönster, gå till Zooms webbadmin.

Klicka där på **+Lägg till kampanj** eller öppna utkastet för en befintlig kampanj. Skrolla till **Chattengagemangsfönster** avsnittet för att skapa eller redigera ditt fönster.

#### <mark style="color:blå;">Fönsterstorlek och mobilupplevelse</mark>

Zooms chattengagemangsfönster är responsivt, vilket betyder att det automatiskt anpassar sin layout om din användare besöker din webbplats från sin dator eller smartphone.

På mobila enheter öppnas chattfönstret i fullskärm för att maximera det begränsade skärmutrymmet och säkerställa en ren, läsbar upplevelse.

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-6998b69e233a164db1b6dc64f142829e13b7888d%2Fimage.png?alt=media" alt="Image of mobile Zoom Virtual Agent window, opened full-screen." width="375"><figcaption></figcaption></figure>

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-61f505c8f139782d7f5f797e297da44f43507826%2Fimage%20(13).png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

För användare som använder din chatt på datorer kan du välja mellan tre storleksalternativ för fönstrets höjd:

* **S:** 540 pixlar
* **M:** 650 pixlar, **Standard**
* **L:** 780 pixlar

{% hint style="info" %}
**Notera**

Bredden är alltid fastställd till 420 pixlar för att säkerställa läsbarhet.
{% endhint %}

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-4c34881c869207a1dd2ca360de0d89b78fcd3c4e%2Fimage.png?alt=media" alt="Image of desktop Zoom Virtual Agent window, opened in the lower right corner of the window."><figcaption></figcaption></figure>

#### <mark style="color:blå;">Rubrikfält</mark>

Den **chattrubrikfältet** är ett kärnelement i din chattdesign. När det är genomtänkt ger det användarna kontext om vad de kan förvänta sig av sin supportupplevelse och förtroende för konversationen. Du kan använda rubriken för att dela information om ditt supportteam och/eller lägga till ditt varumärkes logotyp eller färger.

Zoom CX erbjuder flera rubrikdesignalternativ som du kan välja mellan.

**Full rubrikbild**

Lägg till en bild på 426 pixlar gånger 95 pixlar som fyller hela rubriksområdet, utmärkt för anpassade designer.

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-47cd7bf2bfb396f60736955b1db02d95bdd1dc04%2Fchat-full-header.png?alt=media" alt="This image shows a chat window with a blue gradient header that says Zoom Virtual Agent. The image fills the header space." width="375"><figcaption></figcaption></figure>

**Avatarbildstorlek**

Lägg till en bild på 40 x 40 pixlar som visas i rubrikfältet antingen för sig själv eller tillsammans med rubriktext.

{% columns %}
{% column %}

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-9c882aae75d1ccea2d35f87b4241bcf42d77fbc5%2Fimage.png?alt=media" alt="Image of a chat screen with Zoom logo in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-61f505c8f139782d7f5f797e297da44f43507826%2Fimage%20(13).png?alt=media" alt="Image of a chat screen with Zoom logo and header text in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

**Endast rubriktext**

Dela en kort anteckning om vad som helst, till exempel ditt teams namn, tillgänglighet eller supporttider. Styr storleken på rubriktexten genom att använda H1, H2, H3 eller brödtextstorlek.

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-72f870fbba9b4c1f7a7103706908de36b157db36%2Fimage.png?alt=media" alt="Image of a chat screen with header text only in the header bar." width="375"><figcaption></figcaption></figure>

För en strömlinjeformad, minimalistisk design kan du välja att **behålla den tom**, och fokusera dina användare på chatten.

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-d0fb1e76f829104ec3cf80604620e232d46f2234%2Fimage.png?alt=media" alt="Image of a chat screen with nothing in the header bar." width="375"><figcaption></figcaption></figure>

Du kan använda **välj valfri färg för rubrikbakgrunden och ikonerna**, vilket är användbart för att koppla ihop din chattdesign med din webbplats.

{% hint style="warning" %}
**Observera**

Om du ändrar bakgrundsfärgen, se till att du fortfarande kan se ikonerna för minimera och meny. Du kan behöva ändra ikonfärgen också.

<img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-00429cd4c5188fe86b153ad85efc46340e5ccfbb%2Fimage.png?alt=media" alt="Image of a chat screen with a blue header bar, with no logo or text." data-size="original">
{% endhint %}

#### <mark style="color:blå;">Färger för din chattbubbla, text, ikoner och mer</mark>

Byggaren för engagemangsfönstret låter dig välja exakt de färger du vill ha för din chatt. Du anger hex-koder för varje del av fönstret och granskar förhandsvisningen för att se hur det ser ut.

Zoom tillhandahåller en mall för att komma igång. För att hålla det snyggt (och lätt att läsa) håll dig till dina varumärkesfärger och se till att det finns tillräcklig kontrast mellan text- och bakgrundsfärger.

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-8774508f3fee14c82e8ce2f3d7af47a58e3f82d7%2Fimage.png?alt=media" alt="Image of the template for formatting your engagement window."><figcaption></figcaption></figure>

#### <mark style="color:blå;">Välkomstskärm</mark>

Den **Välkomstskärm** i Zoom Contact Center och Zoom Virtual Agent är en valfri introduktionsskärm som visas innan chatten börjar, vilket ger dig en möjlighet att hälsa dina kunder, samla information från dem och anpassa upplevelsen till ditt varumärke.

Detta är tillgängligt för webbchattupplevelser. För att konfigurera, klicka på **Chattengagemang** fönstret, och sedan **Välkomstskärm** flik.

***

### Inbjudningsdesign

Inbjudningen är det som kommer att starta supportupplevelsen på din webbplats. Det vanligaste är att använda [**Klistrig** inbjudningstyp](https://library.zoom.com/technical-library/sv/foretagstjanster/zoom-contact-center/expert-insights/customize-user-chat-support-experience/..#the-parts), vilket är en flytande ikon som visas på din webbplats. När dina användare klickar på den öppnas chattfönstret och deras upplevelse startar.

För att skapa eller redigera en inbjudan, gå till Zooms webbadmin.

Där klickar du på **+Lägg till kampanj** eller öppna utkastet för en befintlig kampanj. Skrolla till **Inbjudan** avsnittet för att skapa en ny inbjudan.

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-7910d9628228b300d601f0b10a3a49f69abbe6d6%2Fimage.png?alt=media" alt="Image of a Zoom Support window that says &#x22;Hello! How can we help?&#x22;" width="375"><figcaption></figcaption></figure>

Du kan konfigurera följande inställningar för din **Klistriga inbjudningsikon:** ikon:

* **Knappstorlek:** Storleken på din chattinbjudningsikon bör vara tillräckligt stor för att enkelt märkas och klickas eller tryckas på, men inte så stor att den stör användarupplevelsen eller täcker viktig innehåll. Zoom erbjuder tre inbjudningsstorlekar:
  * **S:** 40 pixlar
  * **M:** 56 pixlar, **Standard**
  * **L:** 72 pixlar
* **Knappfärg:** Välj en knappfärg som har hög kontrast mot din webbplats bakgrund. Vi rekommenderar att följa [WCAG 2.1-riktlinjerna](https://www.w3.org/TR/WCAG21/#contrast-minimum), vilket är en minsta kontrastkvot på 3:1 för användargränssnittskomponenter (UI), som ikoner och knappar, mot deras bakgrund.
* **Ikon:** En ikon kan hjälpa dina användare få en uppfattning om vad de kan förvänta sig när de trycker på knappen. Zoom erbjuder några standarddesigner att välja mellan som indikerar att starta en chatt. Du kan också lägga till din egen anpassade ikon med en SVG-fil. SVG-filer måste vara mindre än 10 MB.
* **Hörnradie:** Hur rundade eller fyrkantiga vill du att inbjudningsikonen ska vara? Titta på din webbplats för att se om din webbplats har ett mönster för hur knappar ser ut, eller fråga ditt varumärkesteam om de har en preferens. Att använda en lägre hörnradie, som 8 pixlar, gör din inbjudan mer fyrkantig. En högre hörnradie, som 28 pixlar, gör din inbjudan mer rund.
* **Lägg till text i din inbjudan:** Att lägga till en textetikett på en inbjudningsknapp gör den tydligare och mer inbjudande. Användare vet direkt knappens syfte, så det finns ingen gissning kring vad ikonen betyder. Det tar dock också mer plats och kan störa skärmen, särskilt på mobil. Tänk på din målgrupp och de enheter de oftast använder. Om du lägger till ett typsnitt kan du välja från förinställda typsnittsval Arial, Georgia, Tahoma eller Verdana; eller ladda upp ditt eget typsnitt med en TTF-fil.

#### <mark style="color:blå;">**Inbjudningens placering på sidan**</mark>

Den mest populära platsen för en supportinbjudningsikon är nedre högra hörnet, med en förskjutning från botten och sidan på 20 pixlar. Detta är vanligtvis lätt att upptäcka utan att blockera viktigt innehåll.

Vi rekommenderar att du tittar på din egen webbplats på både dator och mobil. Om din sida redan har en banner eller knapp på denna plats kan det försämra kundens användbarhet eller eventuellt störa användarflöden.

Om du redan har ett element (som en cookie-banner, navigationsfält eller en annan widget) på samma plats som din chattinbjudningsikon, överväg att ändra justeringen vänster eller höger, eller justera förskjutningen från botten eller sidorna.

{% hint style="success" %}
**Exempel**

Om du upptäcker att din chattinbjudningsknapp täcker en viktig länk längst ner på din sida på mobila enheter, öka förskjutningen tills inbjudningsikonen inte längre täcker det elementet.
{% endhint %}

Du kan också "Aktivera att konsumenter kan dra och flytta inbjudan" för att ge dina användare ännu mer flexibilitet att flytta ikonen runt på sidan.

#### <mark style="color:blå;">Vanlig fråga</mark>

Chattinbjudningsikonen blockerar eller distraherar användare på en viss sida på mobila enheter. Vilka är mina alternativ?

**Svar:**

Det finns flera sätt du kan åstadkomma detta.

* **Alternativ 1:** Ändra inbjudningsikonens position på sidan. Du kan flytta inbjudningens placering på sidan med hjälp av förskjutnings- och positionsalternativen. Detta konfigureras genom att redigera inbjudan.
* **Alternativ 2:** Visa eller dölj chattikonen baserat på sidans plats. Om du vill ta bort chattinbjudan helt för alla kassasidor, redigera platsen för att utesluta kassasidorna. Till exempel kan du utesluta alla sidor som innehåller "checkout" i URL:en.
* **Alternativ 3:** Ställ in målgrupp baserat på enhet. Om du inte vill att inbjudningsikonen ska visas på mobilsajter, avmarkera alternativet "mobiltelefon" under kampanjmålgrupp. För att ställa in, klicka på **Kampanj**, **Målgrupper**.

Zoom-kampanjer erbjuder ett [**inbäddat inbjudnings**](https://library.zoom.com/technical-library/sv/foretagstjanster/zoom-contact-center/expert-insights/customize-user-chat-support-experience/..#the-parts) alternativ om du inte vill använda standardikonen som startar chatten. Detta låter dig förvandla vilket element som helst på din webbplats, som en knapp i din meny eller en länk på en sida, till en utlösare för att öppna chattfönstret.

För att göra detta skapar du elementet i din sites HTML och använder Zoom Campaign SDK för att koppla det till chatten. När en användare klickar på det elementet öppnas chattfönstret och kampanjupplevelsen startar. Du kan också använda befintlig HTML på din webbplats för att utlösa chattfönstret om du föredrar det.

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-0df545c67755150cc88ff94b7ecfc1fd2a7bff74%2Fimage.png?alt=media" alt="Image of the Create Embedded Invitation screen." width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Observera**

Vill du både ha en klistrig inbjudningsikon och trigga att öppna chatten genom ett knappklick på din webbplats?

Skapa en kampanj med alternativet Klistrig inbjudan, använd sedan [Zooms Campaign SDK](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) för att trigga öppningen av chatten.
{% endhint %}

***

### Proaktiv meddelandehantering

Vad händer om du vill ha ett mer aktivt sätt att få dina användares uppmärksamhet så att de chattar med ditt team eller din virtuella agent? Zooms funktion för proaktiv meddelandehantering låter dig konfigurera så att företag kan initiera konversationer med besökare, istället för att vänta på att kunden startar chatten genom att klicka på inbjudan.

#### <mark style="color:blå;">Hur det hjälper</mark>

* **Bättre engagemang:** Du kan fånga människors uppmärksamhet och erbjuda hjälp vid rätt tillfälle.
* **Fler leads:** Anpassade meddelanden och knappar kan uppmuntra människor att lära sig mer genom att chatta med en agent, eller dela sin information för ett uppföljningssamtal.
* **Snabbare support:** Snabbt koppla besökare till en bot eller live-agent, så att de får svar utan dröjsmål.

När en användare landar på en sida där proaktiv meddelandehantering är aktiverad får de ett meddelande och kan klicka på knappar för att starta ett specifikt flöde.

#### <mark style="color:blå;">Var du ställer in det</mark>

Denna funktion ställs in under **Kampanjer**, och är tillgänglig för chattkampanjer på webbsidor som använder **Klistrig** inbjudningstypen.

#### <mark style="color:blå;">Rikta in dina användare</mark>

Du kan ställa in din proaktiva meddelande så att den har en fördröjning, så att den bara visas för användare som varit på sidan en viss tid. Du kan också välja om du vill att användaren ska se meddelandet bara en gång under en 24-timmarsperiod, eller om du vill att det proaktiva meddelandet ska dyka upp igen om användaren uppdaterar sidan eller besöker en annan matchande sida.

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-88b5f038460b68336b3dd507b0f1c7eb7f7b04e8%2Fimage.png?alt=media" alt="Image of a Zoom Campaign window that asks &#x22;How can I help&#x22;." width="191"><figcaption></figcaption></figure>

#### <mark style="color:blå;">Vanlig fråga</mark>

Jag vill ha en inbjudningsikon så att mina användare kan starta en chatt när som helst, men jag vill också skicka mina kunder ett proaktivt meddelande på en specifik sida (till exempel företagets prislista). Hur ställer jag in detta?

**Svar**

Du vill skapa två kampanjer: en för din standardinbjudan över hela webbplatsen ("Kampanj A"), och en annan kampanj ("Kampanj B") för sidan där du vill ha ett proaktivt meddelande.

För varje kampanj bör du definiera kampanjplatserna så att de inte överlappar.

{% hint style="success" %}
**Exempel**

Kampanj A:s plats bör utesluta "zoom.us/pricing" och Kampanj B:s plats bör innehålla "zoom.us/pricing." På så sätt ser användare som besöker vilken URL som helst som innehåller "zoom.us" den vanliga inbjudan, men användare som hamnar på den specifika sidan "zoom.us/pricing" får det proaktiva meddelandet som dyker upp.
{% endhint %}

***

### Avatarer

En avatar är bilden som visas bredvid meddelanden i webchatt. Den hjälper till att ge personlighet och varumärke till konversationen.

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-58fb8d5bb699354d77f5a0baa841a09ac56f7616%2Fimage.png?alt=media" alt="Image of the Zoom Virtual Agent avatar, including a picture of a woman with dark hair and a headset." width="375"><figcaption></figcaption></figure>

För meddelanden som skickas innan en användare kopplar upp sig med en agent (till exempel ett välkomstmeddelande eller virtuell agent) kan du ställa in en enda standardavatar för alla dina upplevelser, eller så kan du ställa in en unik avatar för varje individuellt chattflöde. Detta ger dig flexibilitet att hålla saker konsekventa eller anpassa upplevelsen för olika varumärken eller användningsområden.

Om du använder **Zoom Contact Center**, klicka på följande:

1. Inställningar
2. Konsumentupplevelse
3. Standardavatar och namn för flödesmeddelande.

Om du använder **Endast Zoom Virtual Agent**, klicka på följande:

1. AI Studio
2. Virtuella agenter
3. Chattbotar
4. Settings

<figure><img src="https://460446308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FctBXUMeBy4rtLMmMkKRG%2Fuploads%2Fgit-blob-bce555e7ae1868a468f90882db1c9b2ce9cc69d2%2Fimage.png?alt=media" alt="Side-by-side image of the Customize Name and Avatar screen and a rendering of the settings."><figcaption></figcaption></figure>

När din kund går från boten till en live-agent i Zoom Contact Center kan du också kontrollera hur agentens avatar visas. Du kan välja att visa agentens profilbild från Contact Center, deras initialer eller en förinställd avatarbild.

För att ställa in, klicka på följande:

1. Inställningar
2. Konsumentupplevelse
3. Visningsbild

***

### Ytterligare inställningar för chattkonfiguration

#### <mark style="color:blå;">Kontrollera webchattfönstret med Zoom Campaign SDK</mark>

Zoom Contact Center (ZCC) och Zoom Virtual Agent (ZVA) Campaign SDK ger utvecklare mer kontroll över hur webchatten beter sig och interagerar med din webbplats. Den låter dig öppna, stänga och styra chattbeteende programmatisk baserat på användaråtgärder, sidkontext eller anpassad logik.

Till exempel kan du göra så att ditt chattfönster öppnas automatiskt när dina användare varit på sidan i ett specifikt antal sekunder eller klickar på en viss knapp.

Se [Zooms utvecklardokumentation SDK-referens](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) för fler detaljer.

#### <mark style="color:blå;">Sajtövergripande chattpersistens</mark>

Chattpersistens styr om en användares chatt-session fortsätter när de flyttar mellan olika sidor på din webbplats.

* **När persistens är&#x20;*****aktiverad*****&#x20;(standard):** Samma chatt förblir öppen över sidor, så att användaren kan fortsätta sin konversation utan avbrott.
* **När persistens är&#x20;*****inaktiverad*****:** Chatten fortsätter inte när användaren navigerar till en ny sida, om inte den sidan uttryckligen ingår i den första kampanjens definierade plats.

Denna ändring gör det enklare för företag med flera varumärken eller avdelningar på samma domän att hålla chattkampanjer separata. Det förhindrar att användare bär med sig en chatt mellan orelaterade sidor och minskar behovet av manuell konfiguration.

Hitta denna inställning under **Zoom Contact Center** och **Zoom Virtual Agent-inställningar**.

#### <mark style="color:blå;">Ljudaviseringar</mark>

Som standard, när din agent eller virtuella agent skickar ett meddelande i webchatt, hör konsumenter ett aviseringston. Om standardljuden känns störande för din varumärkesupplevelse kan du stänga av dem under **Zoom Contact Center** eller **Zoom Virtual Agent-inställningar**.

Konsumenter kommer fortfarande att ha möjlighet att återaktivera dem i chattmenyn, om de föredrar.