Inställningarna för utseende styr hur din chattbots chattwidget ser ut för besökare på din webbplats - sidhuvudet, färger och typsnitt för meddelanden, startikonen, välkomstskärmen, widgetens storlek med mera. Det är här du anpassar widgeten efter ditt varumärke.
Du behöver en chattbot innan du kan styla den. Om du inte har skapat någon än, börja med Hur du skapar din första chattbot.
Var du hittar inställningarna för utseende
Välj din chattbot och gå till Settings > Appearance (Inställningar > Utseende). Från ChatLabs huvudsida klickar du på Chatbots, öppnar din chattbot, öppnar fliken Settings och väljer sedan Appearance i menyn till vänster.
En förhandsgranskning av din widget i realtid visas på höger sida och uppdateras allt eftersom du ändrar inställningarna.
Chat Header
Konfigurera hur den övre sektionen av din chattwidget ser ut:
- Chatbot name (Chattbotens namn) - visningsnamnet som visas i chattens sidhuvud (max 60 tecken)
- Tagline (Underrubrik) - valfri underrubrik som visas under chattbotens namn (max 60 tecken)
- Avatar - ladda upp en anpassad bild som kunderna ser när de interagerar med chattbotten. Använd knappen Remove (Ta bort, markerad nedan) för att rensa den aktuella bilden.
- Background (Bakgrund) - bakgrundsfärg för sidhuvudsområdet
- Name color (Namnfärg) - textfärg för chattbotens namn
- Tagline color (Färg på underrubrik) - textfärg för underrubriken
- Reset conversation tooltip (Verktygstips för att återställa konversation) - text för verktygstipset som visas när besökare håller muspekaren över knappen för att återställa konversationen i widgetens sidhuvud (max 40 tecken, standard "Reset conversation")
Message
Anpassa meddelandefältet och utseendet på konversationsmeddelandena:
- Input placeholder (Platshållare för inmatning) - platshållartext som visas i inmatningsfältet för nya meddelanden längst ner i widgeten (max 50 tecken, standard "Type a message..."). Använd den för att uppmuntra besökare att börja skriva.
- User background (Användarbakgrund) - bakgrundsfärg för meddelanden som skickas av besökaren
- User text (Användartext) - textfärg för besökarens meddelanden
- Resp. background (Svarsbakgrund) - bakgrundsfärg för chattbotens svar
- Response text (Svarstext) - textfärg för chattbotens svar
Textstorleken för meddelanden ställs in i avsnittet Typography, tillsammans med widgetens typsnitt.
Suggested Questions
Förreslagna frågor är färdiga promptar som en besökare kan klicka på för att starta en konversation. Du skriver själva frågorna i Settings > Chat Conversation (Inställningar > Chattkonversation); här stylar du hur knapparna ser ut:
- Background (Bakgrund) - bakgrundsfärg för knappar med förreslagna frågor
- Text - textfärg för knappar med förreslagna frågor
- Stack (Stapla) - när detta är aktiverat staplas längre förreslagna frågor vertikalt i stället för att visa en horisontell rullningslist
Textstorleken för förreslagna frågor ställs in i avsnittet Typography.
Minimized-Mode Settings
Styr hur chattwidgeten ser ut när den är minimerad (innan besökaren öppnar chatten):
- Minimized display mode (Minimerat visningsläge) - välj mellan:
- Icon (Ikon) - standardmässig cirkulär chattstartikon (standard)
- Minified chat bar (Förminskad chattlist) - kompakt textinmatningsfält som visas längst ner på sidan
- Icon with text (Ikon med text) - en bredare pillerformad startknapp: ikonen plus en kort tvåradig text
- Icon color / Mini bar color (Ikonfärg / Färg på minilist) - färg på startikonen eller minilistens bakgrund
- Custom chat icon (Anpassad chattikon - endast ikonläge) - aktivera för att ladda upp anpassade ikoner för att öppna/stänga chatten
- Position on screen (Position på skärmen) - placera widgeten på vänster eller höger sida av skärmen
- Move up chat icon/bar by (Flytta upp chattikon/list med) - vertikal förskjutning i pixlar från nederkanten
- Move icon/bar left/right by (Flytta ikon/list åt vänster/höger med) - horisontell förskjutning i pixlar från närmaste skärmkant
Icon with Text
Läget Icon with text ger startknappen en kort text så att besökare kan se vad chatten är till för innan de öppnar den. Det är användbart när enbart en ikon inte är tillräckligt tydlig - till exempel "Skriv till oss / Vi svarar direkt" eller "Behöver du hjälp? / Fråga vår assistent".
När du väljer det här läget läggs fyra inställningar till:
- Label line 1 (Etikett rad 1) - den första, mer framhävda textraden (max 60 tecken)
- Label line 2 (Etikett rad 2) - den andra, mer dämpade raden (max 60 tecken). Lämna den tom för en enradig startknapp
- Text color (Textfärg) - textens färg. Lämna den orörd så väljer ChatLab automatiskt svart eller vitt baserat på hur ljus eller mörk startknappens färg är
- Show close cross (Visa stängningskryss) - lägger till ett litet kryss på startknappen så att besökare kan dölja den
Båda raderna kortas av med ett uteslutningstecken om de inte får plats, så startknappen blir aldrig bredare än skärmen. Startknappen fälls tillbaka till en cirkel medan chatten är öppen.
Om din chattbot är flerspråkig översätts båda textraderna precis som resten av texterna som visas för besökaren, så att varje besökare ser texten på sitt eget språk.
Show close cross är inaktiverat som standard och är endast tillgängligt i det här läget. När det är aktiverat döljer en besökare som klickar på krysset startknappen under resten av sin session - den förblir dold när de navigerar mellan sidor och visas igen vid nästa besök eller i en ny flik. En chattbot som är inställd på att öppnas automatiskt respekterar det valet och öppnas inte igen efter att besökaren har stängt den.
Auto Open Chat Widget After Page Load
Konfigurera chatten så att den öppnas automatiskt när besökare läser in sidan:
- Auto open on mobile (Öppna automatiskt på mobil) - öppnar chatten automatiskt på mobila enheter
- Auto open on desktop (Öppna automatiskt på dator) - öppnar chatten automatiskt på datorskärmar
- Open chat with delay (Öppna chatt med fördröjning) - aktiverar en fördröjning innan den öppnas automatiskt (endast tillgängligt när automatisk öppning är aktiverad)
- Delay by (Fördröj med) - antal sekunder att vänta innan öppning (0-60 sekunder)
Human-Like Messaging
Simulerar mänskligt skrivande genom att dela upp svar i flera meddelandebubblor som visas stegvis mening för mening:
- Human-Like Messaging - reglage för att aktivera/inaktivera funktionen
- Delay Between Bubbles (Fördröjning mellan bubblor) - tid i sekunder mellan visningen av varje meddelandebubbla (0-200 sekunder)
Welcome Message Bubble
Visa välkomstmeddelandet i en bubbla ovanför chattens startikon för att hjälpa besökare att lägga märke till chatten. Den här funktionen är endast tillgänglig i ikonläge och fungerar inte i iframe-läge eller när automatisk öppning är aktiverad.
- Show on desktop (Visa på dator) - visa välkomstmeddelandebubblan på dator
- Show on mobile (Visa på mobil) - visa välkomstmeddelandebubblan på mobila enheter
- Delay (Fördröjning) - antal sekunder efter sidinläsning innan bubblan visas (0-60 sekunder)
Om du har flera välkomstmeddelanden visas de staplade ovanför chattikonen.
Röstinmatning (mikrofonknappen i chattens inmatningsfält) konfigureras i Settings > Chat Conversation, inte här i Appearance.
Welcome Screen
Växla widgeten till en särskild startlayout som välkomnar nya besökare med ett stort välkomstmeddelande och de förreslagna frågorna staplade på ett centrerat vitt kort. Välkomstskärmen visas bara i början av en ny session och övergår till den vanliga chattvyn så snart besökaren skickar sitt första meddelande.
- Special Welcome Screen (Särskild välkomstskärm) - aktiverar eller inaktiverar välkomstskärmsläget (avstängt som standard)
- Suggested questions intro (Intro för förreslagna frågor) - kort etikett som visas ovanför kortet med förreslagna frågor på välkomstskärmen (till exempel "Välj ett alternativ eller skriv ett meddelande"). Lämna tomt för att dölja etiketten. Kräver att förreslagna frågor är konfigurerade i Settings > Chat Conversation.
- Hide Human Contact Form (Dölj mänskligt kontaktformulär) - döljer kontaktformulärets åtgärd i sidhuvudet medan välkomstskärmen visas
- Hide Live Chat (Dölj Live Chat) - döljer åtgärden för Live Chat i sidhuvudet medan välkomstskärmen visas
Välkomstskärmen integreras även med Lead Collection (Insamling av leads) och Privacy Policy consent (Samtycke till integritetspolicy) - om något av detta krävs när konversationen startar visas formuläret eller samtyckesfrågan på välkomstkortet i stället för de förreslagna frågorna.
För fullständig information, layoutvarianter och skärmdumpar från besökarens perspektiv, se Välkomstskärm.
Header Actions
Styr hur Live Chat och Human Contact Form erbjuds i chattwidgetens sidhuvud.
- Separate icons (Separata ikoner) - varje åtgärd får en egen ikon i sidhuvudet, bredvid stängningsknappen
- Menu (dropdown) (Meny (rullgardinsmeny)) - båda åtgärderna flyttas till sidhuvudets meny (trepunktsikonen), tillsammans med alternativ som "Reset conversation" och språkväljaren när dessa är aktiverade
Nya chattbotar använder menyn, vilket håller sidhuvudet rent allteftersom fler åtgärder läggs till. Chattbotar som skapats före 2 september 2026 behåller separata ikoner, så inget ändras för deras besökare. Du kan byta när som helst - inställningen påverkar bara presentationen, inte vad åtgärderna gör.
Typography
Ställer in typsnittet och textstorlekarna som används i hela widgeten - meddelanden, förreslagna frågor, sidhuvud, formulär och startknappens text.
- Widget font (Widgettypsnitt) - ett av åtta typsnitt: System default (Systemstandard), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif och JetBrains Mono
- Message font size (Teckenstorlek för meddelanden) - storlek på meddelandetexten (12-24 px)
- Suggested questions font size (Teckenstorlek för förreslagna frågor) - storlek på knapparna för förreslagna frågor (12-24 px)
Inter är standard och matchar hur alla chattbotar såg ut innan den här inställningen fanns, så inget förändras förrän du väljer ett annat typsnitt.
System default laddar inte ner någonting alls - widgeten använder typsnittet som redan är installerat på besökarens enhet. Det gör det till det snabbaste alternativet och det smälter in på webbplatser som själva använder systemets typsnitt, men chatten kommer att se något annorlunda ut på Windows, macOS och Android. De övriga sju är Google Fonts, som laddas ner en gång av besökarens webbläsare. Var och en har en reservlösning (fallback), så om en besökares nätverk blockerar Google Fonts förblir texten läsbar och layouten bryts inte.
Typsnittsfilen hämtas in i själva chattfönstret. Den läggs till på din egen sida endast när widgeten visar text utanför chattfönstret - startknappen Icon with text, den förminskade chattlisten eller välkomstmeddelandebubblor. En chattbot som använder den vanliga ikonstartaren lägger inte till någon extra förfrågan på din sida.
Widget Size
Justera hur stor den öppnade chattwidgeten visas på dator och mobila enheter. Varje skjutreglage har en Default-knapp (Standard) som återställer den inbyggda storleken.
- Desktop width (Bredd på dator) - widgetens bredd i datorwebbläsare, i pixlar (330-800, standard 448)
- Desktop height (Höjd på dator) - widgetens höjd i datorwebbläsare, i pixlar (300-770, standard 660)
- Mobile size (Mobilstorlek) - widgetens storlek på mobila enheter, i procent av skärmen (60-100 %, standard 100 %)
Vid standardvärdet använder widgeten ChatLabs inbyggda responsiva dimensionering. Alla andra värden tillämpar en fast storlek.
På mobilen gör standardvärdet (100 %) att den öppna chatten täcker hela skärmen. Om du väljer en lägre procentsats krymper widgeten till den delen av skärmen och centreras i visningsområdet, så att besökare fortfarande kan se sidan runt chatten.
Bredvid skjutreglagen hittar du två Save & Preview-knappar (Spara och förhandsgranska, markerade nedan) - en för datorraderna och en för mobilraden. När du klickar på en knapp sparas eventuella osparade ändringar och sedan öppnas chatten i ett förhandsgranskningsfönster med dina aktuella inställningar:
- Datorknappen öppnar ett vanligt webbläsarfönster så att du kan se den exakta storleken på en datorskärm.
- Mobilknappen öppnar ett kompakt popup-fönster (400 x 700) så att widgeten återges i sin mobillayout, vilket är praktiskt när du justerar reglaget Mobile size från en dator.
Drawer Mode
Drawer mode (Panelläge) låter besökaren växla chatten från ett flytande fönster till en panel i full höjd som är fäst vid skärmens kant, med din sida fortfarande synlig bredvid. Det passar för konversationer som besökaren arbetar sig igenom medan de läser sidan - långa svar, produktjämförelser, formulär eller vad som helst med mycket text.
Aktivera det så visas en knapp i chattens sidhuvud; besökaren bestämmer själv om de vill använda den. Deras val sparas under resten av webbläsarsessionen.
- Panelen är hälften så bred som webbläsarfönstret, upp till 720 px, och har alltid full höjd. Den fästs vid samma sida som din startknapp, så en widget placerad till vänster öppnar en panel till vänster.
- Desktop width och Desktop height gäller inte här - de anger endast storleken på det vanliga flytande fönstret.
- Knappen visas endast på datorskärmar som är minst 1200 px breda, med mus. På mobiler och surfplattor visas den aldrig, eftersom chatten redan fyller hela skärmen där. Om en besökare gör webbläsaren smalare än den bredden återgår panelen till det vanliga fönstret.
- Startknappen är dold medan panelen är öppen; besökaren stänger den från sidhuvudet, eller lämnar panelläget med samma knapp.
Panelläget är avstängt som standard, så inget förändras för dina besökare förrän du aktiverar det.
Other Appearance Settings
- Widget Shadow (Widgetskugga) - aktivera eller inaktivera en skugga runt chattwidgetens behållare
- Open links in (Öppna länkar i) - välj om länkar i chattmeddelanden ska öppnas i en ny flik eller i samma flik
En stängningsknapp (X) visas också i chattens sidhuvud på datorn, så att besökare kan fälla tillbaka chatten till startknappen utan att behöva läsa om sidan. Stängningsknappen förblir dold när chatten är inbäddad som en iframe eller i helskärmsläge.
Custom Chat Footer
Lägg till anpassad text som visas längst ner i chattwidgeten (max 250 tecken). Markdown stöds för att infoga länkar. En vanlig användning är att länka till din integritetspolicy eller dina användarvillkor.
Exempel på markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS
Lägg till anpassade CSS-stilar för att ytterligare anpassa utseendet på din chattwidget (max 5000 tecken):
Relaterade artiklar
- Hur du skapar din första chattbot
- Konversationsinställningar - skriv välkomstmeddelandet och förreslagna frågor
- Välkomstskärm - den öppnande layouten i fullskärm och dess varianter för besökaren
- Anpassade formulär - samla in besökaruppgifter i chatten
- Insamling av leads