Utseendeinnstillinger styrer hvordan chat-widgeten til chatbotten din ser ut for besøkende på nettstedet ditt - toppteksten, fargene og skrifttypene i meldinger, startikonet, velkomstskjermen, widgetstørrelsen og mer. Det er her du tilpasser widgeten til merkevaren din.
Du må ha en chatbot før du kan tilpasse utseendet. Hvis du ikke har opprettet en ennå, start med Hvordan opprette din første chatbot.
Hvor du finner utseendeinnstillingene
Velg chatbotten din og gå til Settings > Appearance (Innstillinger > Utseende). Fra hovedsiden i ChatLab klikker du på Chatbots, åpner chatbotten din, går til fanen Settings (Innstillinger) og velger deretter Appearance (Utseende) i venstremenyen.
En forhåndsvisning av widgeten din vises på høyre side av skjermen og oppdateres etter hvert som du endrer innstillinger.
Chat Header (Chat-topptekst)
Konfigurer hvordan den øverste delen av chat-widgeten din ser ut:
- Chatbot name (Chatbot-navn) - visningsnavnet som vises i chat-toppteksten (maks 60 tegn)
- Tagline (Slagord) - valgfri undertekst som vises under chatbot-navnet (maks 60 tegn)
- Avatar - last opp et eget bilde som kundene ser når de snakker med chatbotten. Bruk knappen Remove (Fjern) (uthevet nedenfor) for å fjerne det gjeldende bildet.
- Background (Bakgrunn) - bakgrunnsfargen i topptekstområdet
- Name color (Navnefarge) - fargen på teksten til chatbot-navnet
- Tagline color (Slagordfarge) - fargen på teksten til slagordet
- Reset conversation tooltip (Verktøytips for tilbakestilling av samtale) - verktøytipstekst som vises når besøkende holder musepekeren over knappen for å tilbakestille samtalen i toppteksten (maks 40 tegn, standard "Reset conversation")
Message (Melding)
Tilpass meldingsfeltet og utseendet på samtalemeldingene:
- Input placeholder (Plassholder for inndata) - plassholdertekst som vises i inndatafeltet for nye meldinger nederst i widgeten (maks 50 tegn, standard "Type a message..."). Bruk dette til å oppfordre besøkende til å begynne å skrive.
- User background (Brukerbakgrunn) - bakgrunnsfarge for meldinger sendt av den besøkende
- User text (Brukertekst) - tekstfarge for meldinger fra den besøkende
- Resp. background (Svarbakgrunn) - bakgrunnsfarge for chatbotsvar
- Response text (Svartekst) - tekstfarge for chatbotsvar
Meldingsstørrelsen angis under Typography (Typografi), sammen med skrifttypen for widgeten.
Suggested Questions (Foreslåtte spørsmål)
Foreslåtte spørsmål er ferdige ledetekster som en besøkende kan trykke på for å starte en samtale. Selve spørsmålene skriver du under Settings > Chat Conversation (Innstillinger > Chatsamtale); her tilpasser du hvordan knappene ser ut:
- Background (Bakgrunn) - bakgrunnsfarge for knapper med foreslåtte spørsmål
- Text (Tekst) - tekstfarge for knapper med foreslåtte spørsmål
- Stack (Stable) - når denne er aktivert, stables lengre foreslåtte spørsmål vertikalt i stedet for å vise et horisontalt rullefelt
Tekststørrelsen for foreslåtte spørsmål angis i avsnittet Typography (Typografi).
Minimized-Mode Settings (Innstillinger for minimert modus)
Styr hvordan chat-widgeten vises når den er minimert (før den besøkende åpner chaten):
- Minimized display mode (Minimert visningsmodus) - velg mellom:
- Icon (Ikon) - standard sirkulært startikon for chat (standard)
- Minified chat bar (Minimert chat-felt) - kompakt inndatafelt for tekst nederst på siden
- Icon with text (Ikon med tekst) - en bredere pilleformet startknapp: ikonet pluss en kort tekst på to linjer
- Icon color / Mini bar color (Ikonfarge / Minifeltfarge) - fargen på startikonet eller bakgrunnen for minifeltet
- Custom chat icon (Egendefinert chat-ikon) (kun i ikonmodus) - aktiver for å laste opp egne åpne/lukke-ikoner for chat
- Position on screen (Plassering på skjermen) - plasser widgeten på venstre eller høyre side av skjermen
- Move up chat icon/bar by (Flytt chat-ikon/felt opp med) - vertikal forskyvning i piksler fra bunnkanten
- Move icon/bar left/right by (Flytt ikon/felt venstre/høyre med) - horisontal forskyvning i piksler fra nærmeste skjermkant
Icon with Text (Ikon med tekst)
Modusen Icon with text gir startknappen en kort tekst, slik at besøkende kan se hva chaten er til før de åpner den. Den er nyttig når et enkelt ikon ikke er tydelig nok - for eksempel "Skriv til oss / Vi svarer med en gang" eller "Trenger du hjelp? / Spør assistenten vår".
Når du velger denne modusen, legges fire innstillinger til:
- Label line 1 (Tekstlinje 1) - den første, mer fremhevede linjen i teksten (maks 60 tegn)
- Label line 2 (Tekstlinje 2) - den andre, lysere linjen (maks 60 tegn). La den stå tom for en startknapp med én linje
- Text color (Tekstfarge) - fargen på teksten. La den stå urørt, så velger ChatLab automatisk svart eller hvitt, basert på hvor lys eller mørk startknappfargen din er
- Show close cross (Vis lukkekryss) - legger til et lite kryss på startknappen slik at besøkende kan skjule den
Begge linjene forkortes med et ellipse-tegn hvis det ikke er plass, slik at startknappen aldri blir bredere enn skjermen. Startknappen trekkes sammen til en sirkel igjen mens chaten er åpen.
Hvis chatbotten din er flerspråklig, blir begge tekstlinjene oversatt i likhet med resten av tekstene som vises til besøkende, slik at hver besøkende ser teksten på sitt eget språk.
Show close cross er deaktivert som standard og er kun tilgjengelig i denne modusen. Når den er aktivert, vil en besøkende som klikker på krysset skjule startknappen for resten av nettleserøkten - den forblir skjult når de navigerer mellom sider og kommer tilbake ved neste besøk eller i en ny fane. En chatbot som er satt til å åpne automatisk respekterer dette valget og åpner seg ikke igjen etter at den besøkende har lukket den.
Auto Open Chat Widget After Page Load (Åpne chat-widget automatisk etter sidelasting)
Konfigurer chaten til å utvide seg automatisk når besøkende laster inn siden:
- Auto open on mobile (Åpne automatisk på mobil) - åpner chaten automatisk på mobile enheter
- Auto open on desktop (Åpne automatisk på datamaskin) - åpner chaten automatisk på dataskjermer
- Open chat with delay (Åpne chat med forsinkelse) - aktiverer en forsinkelse før automatisk åpning (kun tilgjengelig når automatisk åpning er aktivert)
- Delay by (Forsinkelse med) - antall sekunder å vente før åpning (0-60 sekunder)
Human-Like Messaging (Menneskelignende meldinger)
Simulerer menneskelignende skriving ved å dele svar opp i flere meldingsbobler, som vises gradvis setning for setning:
- Human-Like Messaging - bryter for å aktivere/deaktivere funksjonen
- Delay Between Bubbles (Forsinkelse mellom bobler) - tid i sekunder mellom visning av hver meldingsboble (0-200 sekunder)
Welcome Message Bubble (Velkomstmeldeboble)
Vis velkomstmeldingen i en boble over startikonet for chat for å hjelpe besøkende med å legge merke til chaten. Denne funksjonen er kun tilgjengelig i ikonmodus og fungerer ikke i iframe-modus eller når automatisk åpning er aktivert.
- Show on desktop (Vis på datamaskin) - vis velkomstmeldeboblen på datamaskin
- Show on mobile (Vis på mobil) - vis velkomstmeldeboblen på mobile enheter
- Delay (Forsinkelse) - antall sekunder etter sidelasting før boblen vises (0-60 sekunder)
Hvis du har flere velkomstmeldinger, vises de stablet over chat-ikonet.
Taleinndata (mikrofonknappen i chat-inndatafeltet) konfigureres i Settings > Chat Conversation, ikke her i Appearance.
Welcome Screen (Velkomstskjerm)
Bytt widgeten til et spesielt åpningsoppsett som hilser nye besøkende med en stor velkomstmelding og de foreslåtte spørsmålene stablet på et sentrert hvitt kort. Velkomstskjermen vises bare i starten av en ny økt og går over til standard chat-visning så snart den besøkende sender sin første melding.
- Special Welcome Screen (Spesiell velkomstskjerm) - slår velkomstskjermmodusen av eller på (av som standard)
- Suggested questions intro (Introduksjon for foreslåtte spørsmål) - kort tekst som vises over kortet for foreslåtte spørsmål på velkomstskjermen (for eksempel "Velg et alternativ eller skriv en melding"). La stå tomt for å skjule teksten. Krever at foreslåtte spørsmål er konfigurert under Settings > Chat Conversation.
- Hide Human Contact Form (Skjul kontaktskjema for mennesker) - skjuler kontaktskjemahandlingen i toppteksten mens velkomstskjermen vises
- Hide Live Chat (Skjul Live Chat) - skjuler Live Chat-handlingen i toppteksten mens velkomstskjermen vises
Velkomstskjermen integreres også med Lead Collection (Leadinnsamling) og Privacy Policy consent (Samtykke til personvernerklæring) - hvis en av disse kreves ved samtallestart, vises skjemaet eller samtykkemeldingen på velkomstkortet i stedet for de foreslåtte spørsmålene.
For fullstendige detaljer, layoutvarianter og skjermbilder fra brukersiden, se Welcome Screen.
Header Actions (Toppteksthandlinger)
Styrer hvordan Live Chat og Human Contact Form (kontaktskjema for mennesker) tilbys i toppteksten til chat-widgeten.
- Separate icons (Separate ikoner) - hver handling får sitt eget ikon i toppteksten, ved siden av lukkeknappen
- Menu (dropdown) (Meny (rullegardin)) - begge handlingene flyttes inn i topptekstmenyen (ikonet med tre prikker), sammen med oppføringer som "Reset conversation" og språkvelgeren når disse er aktivert
Nye chatboter bruker menyen, noe som holder toppteksten ryddig etter hvert som flere handlinger legges til. Chatboter opprettet før 2. september 2026 beholder separate ikoner, så ingenting endres for deres besøkende. Bytt når som helst - innstillingen påvirker bare visningen, ikke hva handlingene gjør.
Typography (Typografi)
Angir skrifttypen og tekststørrelsene som brukes i hele widgeten - meldinger, foreslåtte spørsmål, topptekst, skjemaer og teksten på startknappen.
- Widget font (Skrifttype for widget) - én av åtte skrifttyper: System default (Systemstandard), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif og JetBrains Mono
- Message font size (Skriftstørrelse for melding) - størrelse på meldingstekst (12-24 px)
- Suggested questions font size (Skriftstørrelse for foreslåtte spørsmål) - størrelse på knappene for foreslåtte spørsmål (12-24 px)
Inter er standard og samsvarer med hvordan alle chatboter så ut før denne innstillingen fantes, så ingenting endrer seg før du velger en annen skrifttype.
System default laster ikke ned noe som helst - widgeten bruker skrifttypen som allerede er installert på enheten til den besøkende. Det gjør det til det raskeste alternativet, og det smelter inn på nettsteder som selv bruker systemskrifttypen, men chaten vil se litt forskjellig ut på Windows, macOS og Android. De andre syv er Google Fonts, som lastes ned én gang av nettleseren til den besøkende. Hver av dem har en reserve, så hvis nettverket til en besøkende blokkerer Google Fonts, forblir teksten leselig og oppsettet blir ikke ødelagt.
Skrifttypefilen hentes inn i selve chat-vinduet. Den legges bare til på din egen side når widgeten viser tekst utenfor chat-vinduet - startknappen for Icon with text, det minimerte chat-feltet eller velkomstmeldebobler. En chatbot som bruker det enkle ikonstartalternativet, legger ikke til noen ekstra forespørsler på siden din.
Widget Size (Widgetstørrelse)
Juster hvor stor den åpne chat-widgeten vises på datamaskin og mobile enheter. Hver glidebryter har en Default-knapp (Standard) som gjenoppretter den innebygde dimensjoneringen.
- Desktop width (Bredde på datamaskin) - widgetbredde i nettlesere på datamaskin, i piksler (330-800, standard 448)
- Desktop height (Høyde på datamaskin) - widgethøyde i nettlesere på datamaskin, i piksler (300-770, standard 660)
- Mobile size (Mobilstørrelse) - widgetstørrelse på mobile enheter, som en prosentandel av skjermen (60-100%, standard 100%)
Med standardverdien bruker widgeten ChatLabs innebygde responsive størrelsestilpasning. Enhver annen verdi bruker en fast størrelse.
På mobil gjør standardverdien (100%) at den åpne chaten dekker hele skjermen. Å velge en lavere prosentandel krymper widgeten til den delen av skjermen og sentrerer den i visningsområdet, slik at besøkende fortsatt kan se siden rundt chaten.
Ved siden av glidebryterne finner du to Save & Preview-knapper (Lagre og forhåndsvis) (uthevet nedenfor) - én for radene for datamaskin og én for raden for mobil. Ved å klikke på en knapp lagres eventuelle ulagrede endringer, og deretter åpnes chaten i et forhåndsvisningsvindu med dine gjeldende innstillinger:
- Knappen for datamaskin åpner et vanlig nettleservindu, slik at du kan se den nøyaktige størrelsen på en dataskjerm.
- Knappen for mobil åpner et kompakt popup-vindu (400 x 700) slik at widgeten vises i mobiloppsettet, noe som er nyttig når du finjusterer glidebryteren for Mobile size fra en datamaskin.
Drawer Mode (Skuffemodus)
Drawer mode lar den besøkende bytte chaten fra et flytende vindu til et panel i full høyde festet til kanten av skjermen, med siden din fortsatt synlig ved siden av. Det passer for samtaler den besøkende går gjennom mens de leser siden - lange svar, produktsammenligninger, skjemaer eller hva som helst med mye tekst.
Slå det på, og en knapp vises i chat-toppteksten; den besøkende bestemmer selv om den skal brukes. Valget huskes for resten av nettleserøkten.
- Panelet er halvparten så bredt som nettleservinduet, opptil 720 px, og alltid i full høyde. Det festes til samme side som startknappen din, så en widget plassert til venstre åpner et panel til venstre.
- Desktop width og Desktop height gjelder ikke her - de styrer bare størrelsen på det vanlige flytende vinduet.
- Knappen vises bare på dataskjermer som er minst 1200 px brede, med mus. På mobiler og nettbrett vises den aldri, fordi chaten allerede fyller skjermen der. Hvis en besøkende gjør nettleservinduet smalere enn denne bredden, faller skuffen tilbake til det vanlige vinduet.
- Startknappen er skjult mens skuffen er åpen; den besøkende lukker den fra toppteksten, eller forlater skuffemodus med samme knapp.
Drawer mode er slått av som standard, så ingenting endres for de besøkende før du aktiverer det.
Andre utseendeinnstillinger
- Widget Shadow (Widgetskygge) - aktiver eller deaktiver en skygge rundt chat-widgetbeholderen
- Open links in (Åpne lenker i) - velg om lenker i chatmeldinger skal åpnes i en new tab (ny fane) eller same tab (samme fane)
En lukkeknapp (X) vises også i chat-toppteksten på datamaskin, slik at besøkende kan minimere chaten tilbake til startikonet uten å laste inn siden på nytt. Lukkeknappen forblir skjult når chaten er bygd inn som en iframe eller i fullskjermsmodus.
Custom Chat Footer (Egendefinert chat-bunntekst)
Legg til tilpasset tekst som vises nederst i chat-widgeten (maks 250 tegn). Markdown støttes for å sette inn lenker. En vanlig bruk er å lenke til personvernerklæringen eller tjenestevilkårene dine.
Eksempel på markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS (Egendefinert CSS)
Legg til tilpassede CSS-stiler for å tilpasse utseendet på chat-widgeten ytterligere (maks 5000 tegn):
Relaterte artikler
- Hvordan opprette din første chatbot
- Samtaleinnstillinger - skriv velkomstmeldingen og foreslåtte spørsmål
- Welcome Screen - åpningsoppsettet i full skjerm og dets varianter på brukersiden
- Egendefinerte skjemaer - samle inn opplysninger fra besøkende inne i chaten
- Leadinnsamling