> For the complete documentation index, see [llms.txt](https://library.zoom.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://library.zoom.com/technical-library/sv/business-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md).

# Bygg din chattupplevelse

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

### Chattengagemangs-fönster

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

Om du vill skapa eller redigera ditt Chattengagemangs-fönster går du till Zooms Web Admin.

Därifrån klickar du på **+Lägg till kampanj** eller öppnar utkastet för en befintlig kampanj. Scrolla till **Chattengagemangs-fönster** avsnittet för att skapa eller redigera ditt fönster.

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

Zooms chattengagemangs-fönster är responsivt, vilket betyder att det automatiskt anpassar sin layout om din användare kommer åt din plats från sin dator eller smartphone.

På mobila enheter öppnas chattfönstret i fullskärm för att maximera den begränsade skärmytan och säkerställa en ren och lättläst upplevelse.

<figure><img src="/files/484200ebf5a2b7e576fa54a444010c984bb81d23" alt="Image of mobile Zoom Virtual Agent window, opened full-screen." width="375"><figcaption></figcaption></figure>

<figure><img src="/files/4b0e42c3243c0b6a50d79dbd6f5fc9d3988a34e8" alt="" width="375"><figcaption></figcaption></figure>

För användare som kommer åt 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" %}
**Observera**

Bredden är alltid fast på 420 pixlar för att säkerställa läsbarhet.
{% endhint %}

<figure><img src="/files/2f42461c9e7fbc208c0f77e8d82f3f4b2734eefa" 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>

Widgeten **chattens rubrikfält** är en viktig del av din chattdesign. När det utformas genomtänkt ger det användarna sammanhang kring vad de kan förvänta sig av sin supportupplevelse och trygghet i samtalet. Du kan använda rubriken för att dela information om ditt supportteam och/eller lägga till din varumärkeslogotyp eller färger.

Zoom CX erbjuder flera designalternativ för rubriken som du kan välja mellan.

**Fullständig rubrikbild**

Lägg till en bild på 426 x 95 pixlar som fyller hela rubrikytan, perfekt för anpassade designer.

<figure><img src="/files/6d436d2e696db579b59a151e43dd6654b139f3a5" 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>

**Storlek på avatarbild**

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="/files/91ec801d318f9d24c5ce1c4c8e955a3eb4f04bd1" alt="Image of a chat screen with Zoom logo in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/4b0e42c3243c0b6a50d79dbd6f5fc9d3988a34e8" 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 notis om vad som helst, till exempel ditt teams namn, tillgänglighet eller supporttider. Kontrollera storleken på rubriktexten genom att använda H1-, H2-, H3- eller brödtextstorlek.

<figure><img src="/files/9740e9190ee8f9ec458afb0bf012121cca8f87d1" 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 **lämna den tom**och rikta användarnas fokus mot chatten.

<figure><img src="/files/f35f3143573897785a8f5c27d854088a26703e84" alt="Image of a chat screen with nothing in the header bar." width="375"><figcaption></figcaption></figure>

Du kan använda **markera valfri färg för rubrikens bakgrund och ikoner**för att knyta samman din chattdesign med din webbplats.

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

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

<img src="/files/aa9767e271fcd75ed4be950166de6f59e147fdb2" 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 med mera</mark>

Byggverktyget för engagemangsfönstret låter dig välja exakt de färger du vill ha för din chatt. Du anger hexkoder 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 allt snyggt (och lättläst), 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="/files/458c07d3b947d90e26029cdb1849b553bc6ebfb1" alt="Image of the template for formatting your engagement window."><figcaption></figcaption></figure>

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

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

Den här är tillgänglig för webchattsupplevelsen. För att konfigurera, klicka på **Chattengagemang** fönstret, sedan på **Välkomstskärm** flik.

***

### Utformning av inbjudan

Inbjudan är det som startar supportupplevelsen på din webbplats. Det vanligaste är att använda [**Sticky** inbjudantyp](/technical-library/sv/business-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts)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år du till Zooms webbadmin.

Klicka där på **+Lägg till kampanj** eller öppnar utkastet för en befintlig kampanj. Scrolla till **inbjudan** avsnittet för att skapa en ny inbjudan.

<figure><img src="/files/090d60e6960ac8c74452afaed244937e2ba81ad5" 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 **Fäst inbjudan** ikon:

* **Knappstorlek:** Storleken på din chattinbjudningsikon bör vara tillräckligt stor för att lätt märkas och klickas eller tryckas på, men inte så stor att den stör användarupplevelsen eller täcker viktigt innehåll. Zoom erbjuder tre storlekar på inbjudan:
  * **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-riktlinjer](https://www.w3.org/TR/WCAG21/#contrast-minimum), vilket är ett minsta kontrastförhållande på 3:1 för komponenter i användargränssnittet (UI), som ikoner och knappar, mot deras bakgrund.
* **Ikon:** En ikon kan hjälpa dina användare att få en uppfattning om vad de kan förvänta sig när de trycker på knappen. Zoom erbjuder några standarddesigns att välja mellan som visar att en chatt startas. 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 rund eller fyrkantig vill du att inbjudan-ikonen ska vara? Ta en titt 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. Genom att använda en mindre hörnradie, som 8 pixlar, blir 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 till en inbjudan-knapp gör den tydligare och mer inbjudande. Användare vet direkt knappens syfte, så det finns ingen gissning om vad ikonen betyder. Det tar dock också upp mer utrymme och kan göra skärmen rörig, särskilt på mobilen. Var noga med att ta hänsyn till din målgrupp och de enheter de oftast använder. Om du lägger till ett typsnitt kan du välja bland förinställda typsnittsalternativ Arial, Georgia, Tahoma eller Verdana; eller ladda upp ditt eget anpassade typsnitt med en TTF-fil.

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

Den mest populära platsen för en Support inbjudan-ikon är det nedre högra hörnet, med ett avstånd 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 plats redan har en banner eller knapp på denna plats kan detta försämra din kunds användbarhet eller eventuellt störa användarflöden.

Om du redan har ett element (som en cookie-banner, navigeringsfält eller en annan widget) på samma plats som din chatt-inbjudan-ikon, överväg att ändra justeringen åt vänster eller höger, eller justera avståndet från botten eller sidorna.

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

Om du märker att din chatt-inbjudan-knapp täcker en kritisk länk längst ner på din sida på mobila enheter, öka avståndet tills inbjudan-ikonen 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 större flexibilitet att flytta ikonen runt på sidan.

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

Ikonen för chattinbjudan blockerar eller distraherar användare på en viss sida på mobila enheter. Vilka alternativ har jag?

**Svar:**

Det finns flera sätt du kan uppnå detta på.

* **Alternativ 1:** Ändra inbjudanikonens position på sidan. Du kan flytta placeringen av inbjudan på sidan med hjälp av alternativen för förskjutning och position. Detta konfigureras genom att redigera inbjudan.
* **Alternativ 2:** visa eller dölj chattikonen baserat på sidans plats. Om du helt vill ta bort chattinbjudan för alla sidor för till kassan, redigera Plats för att utesluta sidorna för till kassan. Du kan till exempel utesluta alla sidor som innehåller "till kassan" i URL:en.
* **Alternativ 3:** Konfigurera inriktning efter enhet. Om du inte vill att inbjudanikonen ska visas på mobila webbplatser avmarkerar du alternativet "mobiltelefon" under Kampanjinriktning. För att konfigurera, klicka **Kampanj**, **Målgruppsinriktning**.

Zoom Campaigns erbjuder en [**Inbäddad inbjudan**](/technical-library/sv/business-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) alternativ om du inte vill använda den standardfästa ikonen för att starta chatt. Med detta kan du göra vilken del som helst på din webbplats, som en knapp i menyn 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 platss HTML och använder Zoom Campaign SDK för att ansluta det till chatten. När en användare klickar på det elementet öppnar det chattfönstret och startar kampanjupplevelsen. 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="/files/8454977e975e42f48de742ada7a5f96b94f932a7" alt="Image of the Create Embedded Invitation screen." width="375"><figcaption></figcaption></figure>

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

Vill du både ha en Sticky inbjudan-ikon och utlösa öppnandet av chatten genom ett knappklick på din webbplats?

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

***

### Proaktiv meddelandehantering

Tänk om du vill ha ett mer aktivt sätt att få användarens 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, i stället för att vänta på att kunden ska starta chatten genom att klicka på inbjudan.

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

* **Bättre engagemang:** Du kan fånga människors uppmärksamhet och erbjuda hjälp vid rätt tidpunkt.
* **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öljande samtal.
* **Snabbare Support:** Koppla snabbt besökare till en bot eller en liveagent, 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>

Den här funktionen ställs in under **Kampanjer**, och är tillgänglig för chattkampanjer på webbsidor som använder **Sticky** inbjudningstypen.

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

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

<figure><img src="/files/068a71bc98a98975b7718ac5cf78e535ed21897b" 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 ett proaktivt meddelande till mina kunder på en specifik sida (till exempel mitt företags prissida). Hur ställer jag in det här?

**Svar**

Du vill skapa två Kampanjer: en för din standardinbjudan på 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 vill du definiera Kampanjplatserna så att de inte överlappar.

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

Kampanj A:s plats ska exkludera "zoom.us/pricing" och Kampanj B:s plats ska innehålla "zoom.us/pricing." På så sätt kommer användare som besöker valfri URL som innehåller "zoom.us" att se den vanliga inbjudan, men användare som landar på den specifika sidan "zoom.us/pricing" kommer att få det proaktiva meddelandet att visas.
{% endhint %}

***

### Avatarer

En avatar är bilden som visas bredvid meddelandena i webchatten. Den hjälper till att ge samtalet personlighet och varumärkesanpassning.

<figure><img src="/files/f89f4826192e90186c9f08a0eb7906e98c22130f" 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 ansluter till en agent (till exempel ett välkomstmeddelande eller en Virtual 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 enskilt chattflöde. Detta ger dig flexibiliteten att hålla saker konsekventa eller anpassa upplevelsen för olika varumärken eller användningsområden.

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

1. Inställningar
2. Konsumentupplevelse
3. Standardflödets meddelandeavatar och namn.

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

1. AI Studio
2. Virtuella agenter
3. Chatbots
4. inställningar

<figure><img src="/files/b9a21123ef7c9f9ef4265d2421c770365553f113" 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 flyttas från boten till en liveagent i Zoom kontaktcenter kan du också styra hur agentens avatar visas. Du kan välja att visa agentens profilbild från kontaktcenter, deras initialer eller en vald avatarbild.

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

1. Inställningar
2. Konsumentupplevelse
3. Visa bild

***

### Ytterligare inställningar för chattkonfiguration

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

SDK:n för kampanjer i Zoom kontaktcenter (ZCC) och Zoom Virtual Agent (ZVA) ger utvecklare mer kontroll över hur webchatten beter sig och interagerar med din webbplats. Den gör det möjligt för dig att öppna, stänga och styra chattens beteende programmatiskt baserat på användaråtgärder, sidkontext eller anpassad logik.

Du kan till exempel ställa in det så att chattfönstret öppnas automatiskt när dina användare har varit på sidan under ett visst antal sekunder eller klickar på en viss knapp.

Se [Zoom Developer Documentation SDK Reference](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) för mer information.

#### <mark style="color:blå;">Chattens persistens på hela webbplatsen</mark>

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

* **När persistens är&#x20;*****aktiverad*****&#x20;(standard):** Samma chatt förblir öppen mellan 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.

Den här ändra 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 tar med sig en chatt mellan orelaterade sidor och minskar behovet av manuell konfiguration.

Hitta den här inställningen under **Zoom kontaktcenter** 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 webbchatt, hör konsumenter ett aviseringljud. Om standardljuden känns störande för din varumärkesupplevelse kan du stänga av dem under **Zoom kontaktcenter** eller **Zoom Virtual Agent-inställningar**.

Konsumenter kommer fortfarande att kunna aktivera dem igen i chattmenyn, om de föredrar det.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://library.zoom.com/technical-library/sv/business-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.