Med utseendeinställningarna styr du hur din chattbots chattwidget ser ut för besökare på din webbplats - rubriken, färgerna och typsnitten i meddelandena, 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 utseendeinställningarna
Välj din chattbot och gå till Settings > Appearance (Inställningar > Utseende). Från huvudmenyn i ChatLab klickar du på Chatbots (Chattbottar), öppnar din chattbot, öppnar fliken Settings (Inställningar) och väljer sedan Appearance (Utseende) i menyn till vänster.
En förhandsgranskning av din widget visas i realtid till höger på sidan och uppdateras allt eftersom du ändrar inställningar.
Chat Header
Konfigurera hur den översta delen av din chattwidget ser ut:
- Chatbot name (Chattbotens namn) - visningsnamnet som visas i chatthuvudet (max 60 tecken)
- Tagline (Underrubrik) - valfri undertitel som visas under chattbotens namn (max 60 tecken)
- Avatar - ladda upp en anpassad bild som besökarna 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 rubrikområdet
- Name color (Namnfärg) - textfärg för chattbotens namn
- Tagline color (Underrubrikfärg) - textfärg för underrubriken
- Reset conversation tooltip (Verktygstips för återställning av konversation) - text i verktygstipset som visas när besökare håller muspekaren över knappen för att återställa konversationen i widgetens huvud (max 40 tecken, standard "Reset conversation")
Message
Anpassa inmatningsfältet och utseendet på konversationsmeddelandena:
- Input placeholder (Platshållare för inmatning) - platshållartext som visas i fä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 (Typografi), tillsammans med typsnittet för widgeten.
Suggested Questions
Förslagna frågor är färdiga frågor som en besökare kan trycka på för att starta en konversation. Du skriver själva frågorna i Settings > Chat Conversation (Inställningar > Chattkonversation); här ställer du in hur knapparna ser ut:
- Background (Bakgrund) - bakgrundsfärg för knapparna med förslagna frågor
- Text - textfärg för knapparna med förslagna frågor
- Stack (Stapla) - när detta är aktiverat staplas längre förslagna frågor vertikalt istället för att visa en horisontell rullningslist
Textstorleken för förslagna frågor ställs in i avsnittet Typography (Typografi).
Minimized-Mode Settings
Styr hur chattwidgeten visas i minimerat läge (innan besökaren öppnar chatten):
- Minimized display mode (Visningsläge för minimerad widget) - välj mellan:
- Icon (Ikon) - standardmässig cirkulär chattikon (standard)
- Minified chat bar (Förminskad chattlist) - kompakt textfält som visas längst ner på sidan
- Icon with text (Ikon med text) - en bredare, pillerformad startknapp: ikonen plus en kort text på två rader
- Icon color / Mini bar color (Ikonfärg / Färg på minilist) - färg på startikonen eller bakgrunden för minilisten
- 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 vänster/höger med) - horisontell förskjutning i pixlar från närmaste skärmkant
Icon with Text
Läget Icon with text (Ikon med text) ger startikonen en kort text, så att besökare ser 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 detta läge läggs fyra inställningar till:
- Label line 1 (Etikett rad 1) - den första, mer framträdande raden i texten (max 60 tecken)
- Label line 2 (Etikett rad 2) - den andra, mer diskreta raden (max 60 tecken). Lämna den tom för en startknapp med en rad
- Text color (Textfärg) - färg på texten. Lämna den orörd så väljer ChatLab automatiskt svart eller vitt beroende 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 förkortas med ett uteslutningstecken (...) om de inte får plats, så att startknappen aldrig blir bredare än skärmen. Startknappen fälls ihop till en cirkel igen så länge chatten är öppen.
Om flerspråksstöd är aktiverat översätts båda textraderna precis som övriga texter som visas för besökare.
Show close cross är inaktiverat som standard och är endast tillgängligt i detta läge. När det är aktiverat kan en besökare klicka på krysset för att dölja startknappen under resten av sessionen - den förblir dold när besökaren 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 detta val och öppnas inte igen efter att besökaren har stängt den.
Auto Open Chat Widget After Page Load
Konfigurera chatten så att den fälls ut automatiskt när besökare läser in sidan:
- Auto open on mobile (Öppna automatiskt på mobil) - öppnar automatiskt chatten på mobila enheter
- Auto open on desktop (Öppna automatiskt på dator) - öppnar automatiskt chatten på datorskärmar
- Open chat with delay (Öppna chatt med fördröjning) - aktiverar en fördröjning före automatisk öppning (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 gradvis 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 visning 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ökarna 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 staplas de 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 öppningslayout som välkomnar nya besökare med ett stort välkomstmeddelande och förslagna frågor 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 (inaktiverat som standard)
- Suggested questions intro (Intro för förslagna frågor) - kort etikett som visas ovanför kortet med förslagna 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örslagna frågor har konfigurerats i Settings > Chat Conversation.
- Hide Human Contact Form (Dölj mänskligt kontaktformulär) - döljer åtgärden för kontaktformuläret i huvudet medan välkomstskärmen visas
- Hide Live Chat (Dölj Live Chat) - döljer åtgärden för livechatt i huvudet medan välkomstskärmen visas
Välkomstskärmen integreras även med Lead Collection (Leadinsamling) och Privacy Policy consent (Samtycke till integritetspolicy) - om något av detta krävs vid konversationens start visas formuläret eller samtyckesrutan på välkomstkortet istället för de förslagna frågorna.
För fullständig information, layoutvarianter och skärmdumpar från besökarens vy, se Välkomstskärm.
Header Actions
Styr hur Live Chat och Human Contact Form (kontaktformulär) erbjuds i chattwidgetens huvud.
- Separate icons (Separata ikoner) - varje åtgärd får en egen ikon i huvudet, bredvid stängningsknappen
- Menu (dropdown) (Meny [rullgardinsmeny]) - båda åtgärderna flyttas till huvudmenyn (ikonen med tre punkter), tillsammans med alternativ som "Reset conversation" och språkbytaren när dessa är aktiverade
Nya chattbottar använder menyn, vilket gör att huvudet inte blir överbelamrat när fler åtgärder läggs till. Chattbottar som skapats före 2 september 2026 behåller separata ikoner, så ingenting förändras för deras besökare. Du kan byta när som helst - inställningen påverkar bara hur funktionerna presenteras, inte vad de gör.
Typography
Ställer in typsnitt och textstorlekar som används i hela widgeten - meddelanden, förslagna frågor, huvud, formulär och texten på startknappen.
- Widget font (Widgettypsnitt) - ett av åtta typsnitt: System default (Systemstandard), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif och JetBrains Mono
- Message font size (Textstorlek för meddelanden) - storlek på meddelandetexten (12-24 px)
- Suggested questions font size (Textstorlek för förslagna frågor) - storlek på knapparna för förslagna frågor (12-24 px)
Inter är standard och motsvarar hur varje chattbot såg ut innan den här inställningen fanns, så ingenting förändras förrän du väljer ett annat typsnitt.
System default laddar inte ner någonting alls - widgeten använder det typsnitt som redan är installerat på besökarens enhet. Det gör detta till det snabbaste alternativet och det smälter in på webbplatser som själva använder systemets typsnitt, men chatten ser lite annorlunda ut i 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, så om en besökares nätverk blockerar Google Fonts förblir texten läsbar och layouten bryts inte.
Typsnittsfilen hämtas till själva chattfönstret. Den läggs bara till på din egen sida när widgeten visar text utanför chattfönstret - vid startikonen för Icon with text, den förminskade chattlisten eller vid välkomstmeddelandebubblor. En chattbot som använder den vanliga ikonstartaren gör inga extra förfrågningar från din sida.
Widget Size
Justera hur stor den öppnade chattwidgeten visas på datorer och mobila enheter. Varje reglage 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 (Mobil storlek) - widgetens storlek på mobila enheter, i procent av skärmen (60-100 %, standard 100 %)
Vid standardvärdet använder widgeten ChatLabs inbyggda responsiva storlek. Alla andra värden tillämpar en fast storlek.
På mobilen gör standardvärdet (100 %) att den öppnade 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 finjusterar reglaget för Mobile size från en stationär dator.
Maximise Button (Drawer Mode)
Drawer mode (Lådformat/sidopanelslä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 kanten av skärmen, med din webbplats fortfarande synlig bredvid. Det passar för konversationer som besökaren arbetar sig igenom medan de läser på sidan - långa svar, produktjämförelser, formulär eller vad som helst med mycket text.
Aktivera Maximise button (Maximera-knapp) under Widget Size så visas en knapp i chatthuvudet; besökaren bestämmer själv om den ska användas. Deras val sparas under resten av sessionen.
- Panelen är hälften så bred som webbläsarfönstret, upp till 720 px, och visas alltid i full höjd. Den fästs vid samma sida som din startikon, 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 bara storleken på det vanliga flytande fönstret.
- Knappen visas endast på datorskärmar som är minst 1200 px breda, med en mus. På telefoner och surfplattor visas den aldrig, eftersom chatten redan fyller hela skärmen där. Om en besökare gör webbläsarfönstret smalare än den bredden fälls panelen tillbaka till det vanliga fönstret.
- Startikonen döljs när panelen är öppen; besökaren stänger den från huvudet eller lämnar panelen med samma knapp.
Drawer mode är inaktiverat som standard, så ingenting 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 new tab (ny flik) eller i same tab (samma flik)
En stängningsknapp (X) visas också i chatthuvudet på datorn, så att besökare kan fälla ihop chatten till startikonen igen utan att ladda 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
Ändringar sparas automatiskt. Vänta på Saved (Sparat), kontrollera sedan Overview (Översikt) och den inbäddade widgeten på dator och mobil. Inställningarnas förhandsgranskning visar chattfönstret; startikonens placering och automatisk öppning på sidnivå bör också kontrolleras på din webbplatsinbäddning.
- Hur du skapar din första chattbot
- Konversationsinställningar - skriv välkomstmeddelandet och förslagna frågor
- Välkomstskärm - öppningslayouten i helskärm och dess varianter för besökaren
- Anpassade formulär - samla in besökaruppgifter i chatten
- Leadinsamling