Widget-anpassning
Få chattwidgeten att matcha ditt varumärke och bete sig exakt som du vill. All anpassning sker i din dashboard — ändringar tillämpas automatiskt på din webbplats utan att röra embed-koden.
Du hittar inställningarna under Dashboard → Chatbots → välj din chatbot:
- Fliken Widget styr utseendet (position, färger, storlek, texter)
- Fliken Behavior styr hur widgeten interagerar med besökare
Klicka på Save Changes högst upp på sidan för att tillämpa dina ändringar.
Widget-fliken: Utseende
Position
Välj var widgeten ska visas på din webbplats:
| Position | Beskrivning |
|---|---|
| Bottom Right | Flytande chattbubbla i nedre högra hörnet (standard) |
| Bottom Left | Flytande chattbubbla i nedre vänstra hörnet |
| Inline (Embedded) | Widgeten bäddas in direkt på sidan istället för att flyta |
Med positionen Inline bäddas chatten in där embed-skriptet placeras och är alltid öppen — ingen bubbla, ingen stängningsknapp. Idealisk för dedikerade chatt- eller support-sidor. Se Widget Embedding för detaljer.
Färgtema
Välj en av tre färgförinställningar:
| Preset | Beskrivning |
|---|---|
| Default | ChatReact:s standardfärgtema |
| Brand | Ditt företags varumärkesfärger från Company Settings |
| Custom | Välj dina egna färger |
Förinställningen Brand är endast tillgänglig när varumärkesfärger har ställts in. Gå till dina Company Settings för att extrahera färger från din webbplats.
När Custom är valt kan du ställa in fyra basfärger:
- Primary — bubbla, header-gradient, knappar och besökarens meddelanden
- Secondary — andra färgen i header-gradienten
- Background — chattfönstrets bakgrund
- Text — färg för meddelandetext
Avancerade färginställningar
Behöver du mer kontroll? När Custom är valt, expandera Advanced Color Settings för att åsidosätta de automatiskt beräknade färgerna:
- Visitor Messages — bakgrunds- och textfärg för besökarens meddelandebubblor
- Bot Messages — bakgrunds- och textfärg för botens meddelandebubblor
- Header Text Color — färg på titel och undertitel i widgetens header
Allt du lämnar orört beräknas automatiskt för god kontrast. Varje åsidosättning har en Reset to automatic-knapp för att återgå till den beräknade färgen.
Storlek & Stil
| Inställning | Intervall | Standard |
|---|---|---|
| Border Radius | 0–32 px | 24 px |
| Width | 300–500 px | 380 px |
| Height | 400–700 px | 600 px |
På små mobila skärmar växlar widgeten automatiskt till en helbredds-layout, oavsett dessa mått.
Logotyp
Aktivera Use company logo in widget header för att visa din företagslogotyp i chatthuvudet. Själva logotypen laddas upp i dina Company Settings — rekommenderat: kvadratisk, minst 200×200 px (JPG, PNG, GIF, WebP eller SVG, max. 5 MB).
Detta alternativ finns på Professional-planen och uppåt, samt på alla Agency-planer.
Headertitel, undertitel & bubbeltext
| Fält | Beskrivning | Standard |
|---|---|---|
| Header Title | Titel som visas i chattfönstrets header | "Chat with us" |
| Header Subtitle | Mindre rad under titeln | "We typically reply within minutes" |
| Bubble Text | Text som visas bredvid chattbubblan när widgeten är stängd | Ingen |
Om du aldrig anger en titel eller undertitel visar widgeten standardtexten — automatiskt lokaliserad till varje besökares språk.
Hur header-undertiteln fungerar: Så länge du inte har konfigurerat en undertitel visar widgeten den lokaliserade standardtexten, och inställningsformuläret förifyller detta standardvärde så att du kan se och redigera vad besökare får. För att dölja undertiteln helt, rensa fältet och spara — en medvetet tom undertitel förblir dold.
Bubbeltexten visas som en liten etikett bredvid den stängda chattbubblan (t.ex. "Got questions?"). Lämna den tom för att endast visa den runda bubblan.
Widget-översättningar
Om din chatbot stöder flera språk visas ett Widget Translations-kort under utseendeinställningarna. Där kan du översätta välkomstmeddelandet, fallback-meddelandet, headertitel, header-undertitel och bubbeltext för varje aktiverat språk.
Själva välkomst- och fallback-meddelandena konfigureras i fliken Persona i dina chatbot-inställningar.
Liveförhandsvisning
Högra kolumnen i Widget-fliken visar en Live Preview av din widget som uppdateras när du ändrar inställningar. Den är interaktiv: stäng chattfönstret med X för att se den stängda bubblan (inklusive din bubbeltext), och klicka på bubblan för att öppna det igen.
Behavior-fliken: Interaktion
Beteendeinställningar
| Inställning | Beskrivning | Standard |
|---|---|---|
| Proactive Greeting | Bot hälsar automatiskt på besökare efter en fördröjning (1–10 sek) | På, 3 s |
| Auto-Open | Widgeten öppnas automatiskt för besökare efter en fördröjning (1–15 sek) | Av, 5 s |
| Sound Enabled | Spela upp ljud för notifikationer | På |
| Typing Indicator | Visa en animation medan boten skriver | På |
| Pre-Chat Form | Fånga besökarinformation innan chatten startar | Av |
| Show on Mobile | Visa widgeten på mobila enheter | På |
Maximal meddelandelängd
Begränsa hur många tecken besökare kan skriva per meddelande (100–10 000 tecken, standard 2 000). Detta hjälper till att förhindra överdriven användning från mycket långa inmatningar. Rensa fältet eller klicka på Remove limit för att tillåta meddelanden i godtycklig längd.
Pre-Chat Form
När pre-chat-formuläret är aktiverat fyller besökare i ett kort formulär innan konversationen startar. Du konfigurerar fälten själv:
- Field types: Text, Email, Phone, Textarea
- Varje fält har en label, en valfri placeholder, och en växling för required
- Ordna om fälten med knapparna flytta upp/ner, eller ta bort dem
Om din chatbot stöder flera språk visas en översättningssektion under fälteditorn. Ange översättningar för varje språk manuellt, eller klicka på Translate with AI för att automatiskt översätta alla etiketter och platshållare.
Live Chat
Fliken Behavior innehåller också kortet Live Chat Settings. Aktivera livechatt för att låta besökare prata med dina mänskliga agenter, och välj ett läge:
| Mode | Beskrivning |
|---|---|
| Handoff Only | Livechatt endast när boten inte kan hjälpa till |
| Standalone | Besökare kan chatta direkt med agenter |
| Both | Handoff och direkt livechatt tillgängliga |
Live Chat finns på Professional-planen och uppåt, samt på alla Agency-planer. Se Live Chat för hur du hanterar inkommande konversationer.
Branding
På planer som inkluderar white-label visas ett Branding-kort längst ner på fliken Behavior. ChatReact-branding är som standard dolt på dessa planer — aktivera Show "Powered by ChatReact" om du ändå vill visa det i widgetens footer.
Inlärningsfas
Medan en ny chatbot är i sin inlärningsfas kan du styra hur försiktigt den svarar — Cautious, Balanced (rekommenderat) eller Confident — i fliken Confidence på samma inställningssida. Denna flik visas på planer som inkluderar Improvement Agent. Se guiden Improvement Agent för detaljer.