Utseendeinnstillinger styrer hvordan chatbotens chat-widget 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å, kan du starte med Slik oppretter du din første chatbot.
Hvor du finner utseendeinnstillinger
Velg chatboten din og gå til Settings > Appearance (Innstillinger > Utseende). Fra hovedsiden i ChatLab klikker du på Chatbots, åpner chatboten din, går til fanen Settings (Innstillinger), og velger deretter Appearance (Utseende) i venstremenyen.
En forhåndsvisning av widgeten vises på høyre side av siden og oppdateres fortløpende når du endrer innstillinger.
Chat Header
Konfigurer hvordan den øverste delen av chat-widgeten ser ut:
- Chatbot name (Navn på chatbot) - visningsnavnet som vises i chat-toppteksten (maks 60 tegn)
- Tagline (Slagord) - valgfri undertittel som vises under chatbotnavnet (maks 60 tegn)
- Avatar - last opp et eget bilde som kundene ser når de samhandler med chatboten. Bruk Remove-knappen (Fjern - uthevet nedenfor) for å fjerne det gjeldende bildet.
- Background (Bakgrunn) - bakgrunnsfarge for topptekstområdet
- Name color (Navnefarge) - tekstfarge for chatbotnavnet
- Tagline color (Slagordfarge) - tekstfarge for 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 widget-toppteksten (maks 40 tegn, standard "Reset conversation")
Message
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 den til å oppmuntre 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 chatbotens svar
- Response text (Svartekst) - tekstfarge for chatbotens svar
Tekststørrelsen for meldinger angis i seksjonen Typografi, sammen med skrifttypen for widgeten.
Suggested Questions
Foreslåtte spørsmål er ferdige ledetekster en besøkende kan trykke på for å starte en samtale. Selve spørsmålene skriver du i Settings > Chat Conversation (Innstillinger > Chatsamtale); her tilpasser du hvordan knappene ser ut:
- Background (Bakgrunn) - bakgrunnsfarge for knappene med foreslåtte spørsmål
- Text (Tekst) - tekstfarge for knappene med foreslåtte spørsmål
- Stack (Stable) - når dette 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 seksjonen Typografi.
Minimized-Mode Settings
Styr hvordan chat-widgeten vises når den er minimert (før den besøkende åpner chatten):
- Minimized display mode (Minimert visningsmodus) - velg mellom:
- Icon (Ikon) - standard sirkulært startikon for chat (standard)
- Minified chat bar (Minimert chatfelt) - kompakt tekstinndatafelt som vises nederst på siden
- Icon with text (Ikon med tekst) - en bredere pilleformet starter: ikonet pluss en kort tekst på to linjer
- Icon color / Mini bar color (Ikonfarge / Minifeltfarge) - farge på startikonet eller bakgrunnen til minifeltet
- Custom chat icon (Egendefinert chat-ikon - kun ikonmodus) - aktiver for å laste opp egne ikoner for å åpne/lukke chatten
- 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
Modusen Icon with text gir starteren en kort tekst, slik at besøkende kan se hva chatten er til før de åpner den. Det 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 (Etikettlinje 1) - den første, mer fremtredende linjen i teksten (maks 60 tegn)
- Label line 2 (Etikettlinje 2) - den andre, lysere linjen (maks 60 tegn). La den stå tom for en starter med én linje
- Text color (Tekstfarge) - farge på teksten. Hvis du lar den stå urørt, velger ChatLab automatisk svart eller hvitt, basert på hvor lys eller mørk startfargen din er
- Show close cross (Vis lukkekryss) - legger til et lite kryss på starteren slik at besøkende kan skjule den
Begge linjene forkortes med et ellipse-tegn hvis de ikke får plass, slik at starteren aldri blir bredere enn skjermen. Starteren trekker seg sammen til en sirkel igjen mens chatten er åpen.
Hvis flerspråklig støtte er aktivert, blir begge tekstlinjene oversatt akkurat som resten av tekstene som vender mot de besøkende.
Show close cross er slått av som standard og er bare tilgjengelig i denne modusen. Når den er aktivert, vil en besøkende som klikker på krysset, skjule starteren for resten av surfeø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
Konfigurer chatten til å utvide seg automatisk når besøkende laster inn siden:
- Auto open on mobile (Åpne automatisk på mobil) - åpner chatten automatisk på mobile enheter
- Auto open on desktop (Åpne automatisk på datamaskin) - åpner chatten automatisk på dataskjermer
- Open chat with delay (Åpne chat med forsinkelse) - aktiverer en forsinkelse før automatisk åpning (bare tilgjengelig når automatisk åpning er aktivert)
- Delay by (Forsinkelse i) - antall sekunder å vente før åpning (0-60 sekunder)
Human-Like Messaging
Simulerer menneskelignende skriving ved å dele svar inn 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
Vis velkomstmeldingen i en boble over startikonet for chatten for å hjelpe besøkende med å legge merke til chatten. Denne funksjonen er bare tilgjengelig i ikonmodus og fungerer ikke i iframe-modus eller når automatisk åpning er aktivert.
- Show on desktop (Vis på datamaskin) - vis velkomstsettingsboblen på datamaskin
- Show on mobile (Vis på mobil) - vis velkomstsettingsboblen på mobile enheter
- Delay (Forsinkelse) - antall sekunder etter sideinnlasting før boblen vises (0-60 sekunder)
Hvis du har flere velkomstmeldinger, vises de stablet over chat-ikonet.
Taleinndata (mikrofonknappen i inndatafeltet for chat) konfigureres i Settings > Chat Conversation, ikke her i Appearance.
Welcome Screen
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 begynnelsen av en ny økt og går over til standard chatvisning 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 (Intro for foreslåtte spørsmål) - kort etikett som vises over kortet med foreslåtte spørsmål på velkomstskjermen (for eksempel "Velg et alternativ eller skriv en melding"). La stå tom for å skjule etiketten. Krever at foreslåtte spørsmål er konfigurert i Settings > Chat Conversation.
- Hide Human Contact Form (Skjul kontaktskjema for mennesker) - skjuler kontaktskjema-handlingen 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 (Lead-innsamling) og Privacy Policy consent (Samtykke til personvernerklæring) - hvis en av disse kreves ved samtalestart, vises skjemaet eller samtykkemeldingen på velkomstkortet i stedet for de foreslåtte spørsmålene.
For fullstendige detaljer, oppsettvarianter og skjermbilder fra besøkendes side, se Welcome Screen.
Header Actions
Styrer hvordan Live Chat og Human Contact Form (kontaktskjema for mennesker) tilbys i toppteksten på 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. Du kan bytte når som helst - innstillingen påvirker bare presentasjonen, ikke hva handlingene gjør.
Typography
Angir skrifttypen og tekststørrelsene som brukes i hele widgeten - meldinger, foreslåtte spørsmål, topptekst, skjemaer og starterteksten.
- Widget font (Widget-skrifttype) - én av åtte skrifttyper: System default (Systemstandard), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif og JetBrains Mono
- Message font size (Skriftstørrelse for meldinger) - 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 endres før du velger en annen skrifttype.
System default laster ikke ned noe som helst - widgeten bruker skrifttypen som allerede er installert på den besøkendes enhet. Det gjør det til det raskeste alternativet, og det smelter inn på nettsteder som selv bruker systemets skrifttype, men chatten vil se litt annerledes ut på Windows, macOS og Android. De andre syv er Google Fonts, lastet ned én gang av den besøkendes nettleser. Hver av dem har en reserve, så hvis en besøkendes nettverk blokkerer Google Fonts, forblir teksten lesbar og oppsettet blir ikke ødelagt.
Skriftfilen hentes inn i selve chatvinduet. Den legges bare til på din egen side når widgeten viser tekst utenfor chatvinduet - Icon with text-starteren, det minimerte chatfeltet eller velkomstsettingsbobler. En chatbot som bruker den vanlige ikonstarteren, legger ikke til noen ekstra forespørsel på siden din.
Widget Size
Juster hvor stor den åpne chat-widgeten vises på datamaskiner og mobile enheter. Hver glidebryter har en Default-knapp (Standard) som gjenoppretter den innebygde størrelsen.
- 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 dimensjonering. Enhver annen verdi bruker en fast størrelse.
På mobil gjør standardverdien (100%) at den åpne chatten 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 chatten.
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 chatten 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.
- Mobilknappen åpner et kompakt popup-vindu (400 x 700) slik at widgeten gjengis i mobiloppsettet sitt, noe som er nyttig når du justerer glidebryteren Mobile size fra en datamaskin.
Maximise Button (Drawer Mode)
Drawer mode (Skuffmodus) lar den besøkende bytte chatten fra et flytende vindu til et panel i full høyde som er forankret til kanten av skjermen, mens siden din fortsatt er synlig ved siden av. Det passer for samtaler som den besøkende jobber seg gjennom mens de leser siden - lange svar, produktsammenligninger, skjemaer eller alt med mye tekst.
Aktiver Maximise button (Maksimer-knapp) i Widget Size, så vises en knapp i chat-toppteksten; den besøkende bestemmer selv om den skal brukes. Valget huskes for resten av surfeøkten.
- Panelet er halvparten så bredt som nettleservinduet, opptil 720 px, og har alltid full høyde. Det forankres til samme side som starteren din, så en widget plassert til venstre åpner en skuff 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å telefoner og nettbrett vises den aldri, fordi chatten allerede fyller skjermen der. Hvis en besøkende krymper nettleseren under denne bredden, felles skuffen tilbake til det vanlige vinduet.
- Starteren er skjult mens skuffen er åpen; den besøkende lukker den fra toppteksten, eller forlater skuffmodusen med den samme knappen.
Skuffmodus er slått av som standard, så ingenting endres for dine besøkende før du aktiverer den.
Other Appearance Settings
- Widget Shadow (Widget-skygge) - aktiver eller deaktiver en skygge rundt chat-widgetbeholderen
- Open links in (Åpne lenker i) - velg om lenker i chatmeldinger åpnes i en new tab (ny fane) eller i same tab (samme fane)
En lukkeknapp (X) vises også i chat-toppteksten på datamaskin, slik at besøkende kan lukke chatten tilbake til starteren uten å laste siden på nytt. Lukkeknappen forblir skjult når chatten er bygd inn som en iframe eller i fullskjermmodus.
Custom Chat Footer
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
Legg til egendefinerte CSS-stiler for å tilpasse utseendet på chat-widgeten ytterligere (maks 5000 tegn):
Related Articles
Endringer lagres automatisk. Vent på Saved (Lagret), og sjekk deretter Overview (Oversikt) og den innebygde widgeten på datamaskin og mobil. Forhåndsvisningen i innstillingene viser chatvinduet; plassering av starter og virkemåte for automatisk åpning på sidenivå bør også sjekkes på din innebygde nettsideløsning.
- Slik oppretter du din første chatbot
- Samtaleinnstillinger - skriv velkomstmeldingen og foreslåtte spørsmål
- Welcome Screen - åpningsoppsettet i fullskjerm og dets varianter på besøkendes side
- Egendefinerte skjemaer - samle inn opplysninger fra besøkende i chatten
- Lead-innsamling