Indstillingerne for Appearance (udseende) styrer, hvordan din chatbots chat-widget ser ud for besøgende på din hjemmeside - sidehovedet, farver og skrifttyper på beskeder, startikonet (launcher), velkomstskærmen, widget-størrelsen og meget mere. Det er her, du tilpasser widgetten til dit brand.
Du skal have en chatbot, før du kan style den. Hvis du ikke har oprettet en endnu, kan du starte med Sådan opretter du din første chatbot.
Hvor finder du indstillingerne for Appearance?
Vælg din chatbot og gå til Settings > Appearance (Indstillinger > Udseende). Fra ChatLabs hovedside klikker du på Chatbots, åbner din chatbot, går ind på fanen Settings og vælger derefter Appearance i menuen til venstre.
En live-forhåndsvisning af din widget vises i højre side af skærmen og opdateres i takt med, at du ændrer indstillingerne.
Chat Header (chathoved)
Konfigurer, hvordan den øverste sektion af din chat-widget ser ud:
- Chatbot name (chatbot-navn) - det viste navn i chathovedet (maks. 60 tegn)
- Tagline (undertitel) - valgfri undertitel, der vises under chatbottens navn (maks. 60 tegn)
- Avatar - upload et tilpasset billede, som kunderne ser, når de interagerer med chatbotten. Brug knappen Remove (Fjern) (fremhævet nedenfor) til at slette det aktuelle billede.
- Background (baggrund) - baggrundsfarve for området i sidehovedet
- Name color (navnefarve) - tekstfarve på chatbottens navn
- Tagline color (undertitelfarve) - tekstfarve på undertitlen
- Reset conversation tooltip (værktøjstip til nulstilling af samtale) - tekst på det værktøjstip, der vises, når besøgende holder musen over knappen til nulstilling af samtalen i widgettens sidehoved (maks. 40 tegn, standard er "Reset conversation")
Message (beskeder)
Tilpas beskedfeltet og udseendet af samtalebeskederne:
- Input placeholder (pladsholder i inputfelt) - pladsholdertekst, der vises i feltet til nye beskeder i bunden af widgetten (maks. 50 tegn, standard er "Type a message..."). Brug den til at opfordre besøgende til at begynde at skrive.
- User background (brugerbaggrund) - baggrundsfarve på beskeder sendt af den besøgende
- User text (brugertekst) - tekstfarve på den besøgendes beskeder
- Resp. background (svarbaggrund) - baggrundsfarve på chatbottens svar
- Response text (svartekst) - tekstfarve på chatbottens svar
Beskedtekstens størrelse indstilles i sektionen Typography sammen med widgettens skrifttype.
Suggested Questions (foreslåede spørgsmål)
Foreslåede spørgsmål er færdiglavede prompter, som en besøgende kan trykke på for at starte en samtale. Du skriver selve spørgsmålene i Settings > Chat Conversation; her styler du, hvordan knapperne ser ud:
- Background (baggrund) - baggrundsfarve på knapperne med foreslåede spørgsmål
- Text (tekst) - tekstfarve på knapperne med foreslåede spørgsmål
- Stack (stak) - når denne er aktiveret, stables længere foreslåede spørgsmål lodret i stedet for at vise et vandret rullepanel
Skriftstørrelsen på de foreslåede spørgsmål indstilles i sektionen Typography.
Minimized-Mode Settings (indstillinger for minimeret tilstand)
Styr, hvordan chat-widgetten ser ud, når den er minimeret (før den besøgende åbner chatten):
- Minimized display mode (minimeret visningstilstand) - vælg mellem:
- Icon (ikon) - standard cirkulært chatikon (standard)
- Minified chat bar (minimeret chatlinje) - en kompakt tekstinputlinje, der vises i bunden af siden
- Icon with text (ikon med tekst) - en bredere pilleformet launcher: ikonet plus en kort tekst på to linjer
- Icon color / Mini bar color (ikonfarve / farve på minilinje) - farven på startikonet eller baggrunden på minilinjen
- Custom chat icon (brugerdefineret chatikon) (kun i ikontilstand) - aktivér for at uploade egne ikoner til at åbne/lukke chatten
- Position on screen (placering på skærmen) - placer widgetten i venstre eller højre side af skærmen
- Move up chat icon/bar by (flyt chatikon/-linje op med) - lodret forskydning i pixels fra den nederste kant
- Move icon/bar left/right by (flyt ikon/linje til venstre/højre med) - vandret forskydning i pixels fra den nærmeste skærmkant
Icon with Text (ikon med tekst)
Tilstanden Icon with text giver launcheren en kort tekst, så besøgende kan se, hvad chatten er til for, før de åbner den. Det er nyttigt, når et simpelt ikon ikke er tydeligt nok - for eksempel "Skriv til os / Vi svarer med det samme" eller "Brug for hjælp? / Spørg vores assistent".
Når du vælger denne tilstand, tilføjes fire indstillinger:
- Label line 1 (etiketlinje 1) - den første, mere fremhævede linje i teksten (maks. 60 tegn)
- Label line 2 (etiketlinje 2) - den anden, mere dæmpede linje (maks. 60 tegn). Lad feltet stå tomt, hvis du kun vil have en enkelt linje
- Text color (tekstfarve) - farven på teksten. Hvis du lader feltet være uberørt, vælger ChatLab automatisk sort eller hvid ud fra, hvor lys eller mørk din launcher-farve er
- Show close cross (vis lukkekryds) - tilføjer et lille kryds på launcheren, så besøgende kan skjule den
Begge linjer afkortes med en ellipse (...), hvis der ikke er plads nok, så launcheren aldrig bliver bredere end skærmen. Launcheren klappes sammen til en cirkel igen, mens chatten er åben.
Hvis din chatbot er flersproget, oversættes begge tekstlinjer på samme måde som de øvrige tekster rettet mod de besøgende, så hver besøgende ser teksten på sit eget sprog.
Show close cross er slået fra som standard og er kun tilgængelig i denne tilstand. Når den er aktiveret, vil en besøgende, der klikker på krydset, skjule launcheren i resten af deres browsersession - den forbliver skjult, mens de navigerer mellem sider, og dukker først op igen ved næste besøg eller i en ny fane. En chatbot, der er indstillet til at åbne automatisk, respekterer dette valg og åbner ikke igen, efter at den besøgende har lukket den.
Auto Open Chat Widget After Page Load (åbn chat-widget automatisk efter sideindlæsning)
Konfigurer chatten til automatisk at folde sig ud, når besøgende indlæser siden:
- Auto open on mobile (åbn automatisk på mobil) - åbner automatisk chatten på mobile enheder
- Auto open on desktop (åbn automatisk på desktop) - åbner automatisk chatten på computerskærme
- Open chat with delay (åbn chat med forsinkelse) - aktiverer en forsinkelse før automatisk åbning (kun tilgængelig, når auto-åbning er slået til)
- Delay by (forsink med) - antal sekunder at vente før åbning (0-60 sekunder)
Human-Like Messaging (menneskelignende beskeder)
Simulerer menneskelignende skrivning ved at opdele svar i flere beskedbobler, der vises gradvist sætning for sætning:
- Human-Like Messaging - slå funktionen til/fra
- Delay Between Bubbles (forsinkelse mellem bobler) - tid i sekunder mellem visning af hver beskedboble (0-200 sekunder)
Welcome Message Bubble (velkomstbeskedboble)
Vis velkomstbeskeden i en boble over chat-launcheren for at hjælpe besøgende med at lægge mærke til chatten. Denne funktion er kun tilgængelig i ikontilstand og fungerer ikke i iframe-tilstand, eller hvis automatisk åbning er aktiveret.
- Show on desktop (vis på desktop) - vis velkomstbeskedboblen på computeren
- Show on mobile (vis på mobil) - vis velkomstbeskedboblen på mobile enheder
- Delay (forsinkelse) - antal sekunder efter sideindlæsning, før boblen vises (0-60 sekunder)
Hvis du har flere velkomstbeskeder, vises de stablet oven på hinanden over chatikonet.
Stemmeinput (mikrofonknappen i chat-inputfeltet) konfigureres i Settings > Chat Conversation, ikke her under Appearance.
Welcome Screen (velkomstskærm)
Skift widgetten til et særligt startlayout, der byder nye besøgende velkommen med en stor velkomstbesked og de foreslåede spørgsmål samlet på et centreret hvidt kort. Velkomstskærmen vises kun ved starten af en ny session og skifter automatisk over til den almindelige chatvisning, så snart den besøgende sender sin første besked.
- Special Welcome Screen (særlig velkomstskærm) - slår velkomstskærmen til eller fra (slået fra som standard)
- Suggested questions intro (introduktion til foreslåede spørgsmål) - kort overskrift, der vises over kortet med foreslåede spørgsmål på velkomstskærmen (for eksempel "Vælg en mulighed eller skriv en besked"). Lad feltet stå tomt for at skjule overskriften. Kræver, at der er konfigureret foreslåede spørgsmål i Settings > Chat Conversation.
- Hide Human Contact Form (skjul kontaktformular) - skjuler handlingen for kontaktformularen i sidehovedet, mens velkomstskærmen vises
- Hide Live Chat (skjul Live Chat) - skjuler handlingen for live chat i sidehovedet, mens velkomstskærmen vises
Velkomstskærmen integrerer også med Lead Collection (lead-indsamling) og Privacy Policy consent (samtykke til privatlivspolitik) - hvis en af delene er påkrævet ved samtalens start, vises formularen eller samtykkeanmodningen på velkomstkortet i stedet for de foreslåede spørgsmål.
For alle detaljer, layoutvarianter og skærmbilleder af den besøgendes visning, se Welcome Screen.
Header Actions (handlinger i sidehovedet)
Styrer, hvordan Live Chat og Human Contact Form tilbydes i chat-widgettens sidehoved.
- Separate icons (separate ikoner) - hver handling får sit eget ikon i sidehovedet ved siden af lukkeknappen
- Menu (dropdown) (rullemenu) - begge handlinger flyttes ind i sidehovedets menu (ikonet med tre prikker) sammen med elementer som "Reset conversation" og sprogvælgeren, når disse er aktiveret
Nye chatrobotter bruger menuen, hvilket holder sidehovedet overskueligt, efterhånden som der tilføjes flere handlinger. Chatrobotter oprettet før 2. september 2026 beholder separate ikoner, så intet ændrer sig for deres besøgende. Du kan skifte når som helst - indstillingen påvirker kun visningen, ikke hvad handlingerne gør.
Typography (typografi)
Angiver skrifttypen og de tekststørrelser, der bruges overalt i widgetten - beskeder, foreslåede spørgsmål, sidehoved, formularer og teksten på launcheren.
- Widget font (widget-skrifttype) - en af otte skrifttyper: System default (systemstandard), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif og JetBrains Mono
- Message font size (skriftstørrelse på beskeder) - størrelse på beskedtekst (12-24 px)
- Suggested questions font size (skriftstørrelse på foreslåede spørgsmål) - størrelse på knapperne med foreslåede spørgsmål (12-24 px)
Inter er standard og svarer til, hvordan alle chatrobotter så ud, før denne indstilling blev introduceret, så der ændrer sig ingenting, før du vælger en anden skrifttype.
System default downloader slet ingenting - widgetten bruger den skrifttype, der allerede er installeret på den besøgendes enhed. Det gør det til den hurtigste mulighed, og widgetten falder naturligt ind på sider, der selv bruger systemskrifttypen, men chatten vil se en smule anderledes ud på henholdsvis Windows, macOS og Android. De øvrige syv er Google Fonts, som downloades én gang af den besøgendes browser. Hver enkelt har en fallback-skrifttype, så hvis en besøgendes netværk blokerer Google Fonts, forbliver teksten læselig, og layoutet går ikke i stykker.
Skrifttypefilen hentes ind i selve chatvinduet. Den indlæses kun på din egen side, når widgetten viser tekst uden for chatvinduet - det gælder launcheren i tilstanden Icon with text, den minimerede chatlinje eller velkomstbeskedbobler. En chatbot, der bruger det almindelige ikon som launcher, tilføjer ingen ekstra anmodninger på din side.
Widget Size (widget-størrelse)
Juster, hvor stor den åbne chat-widget vises på desktop og mobile enheder. Hver skyder har en Default-knap (Standard), som gendanner standardstørrelserne.
- Desktop width (desktop-bredde) - widget-bredde i desktop-browsere i pixels (330-800, standard 448)
- Desktop height (desktop-højde) - widget-højde i desktop-browsere i pixels (300-770, standard 660)
- Mobile size (mobilstørrelse) - widget-størrelse på mobile enheder som en procentdel af skærmen (60-100%, standard 100%)
Ved standardværdien bruger widgetten ChatLabs indbyggede responsive skalering. Enhver anden værdi anvender en fast størrelse.
På mobilen gør standardværdien (100%), at den åbne chat dækker hele skærmen. Hvis du vælger en lavere procentdel, formindskes widgetten til den pågældende del af skærmen og centreres i visningsområdet (viewport), så de besøgende stadig kan se siden udenom chatten.
Ved siden af skyderne finder du to Save & Preview-knapper (Gem og forhåndsvis) (fremhævet nedenfor) - én til desktop-rækkerne og én til mobil-rækken. Klik på en knap for at gemme eventuelle ugemte ændringer og derefter åbne chatten i et forhåndsvisningsvindue med dine aktuelle indstillinger:
- Desktop-knappen åbner et almindeligt browservindue, så du kan se den præcise størrelse på en computerskærm.
- Mobilknappen åbner en kompakt pop-up (400 x 700), så widgetten gengives i sit mobillayout, hvilket er praktisk, når du justerer skyderen for Mobile size fra en computer.
Drawer Mode (skuffetilstand)
Drawer mode giver den besøgende mulighed for at ændre chatten fra et svævende vindue til et sidepanel i fuld højde, der er fastgjort til skærmens kant, mens din side stadig er synlig ved siden af. Dette passer godt til samtaler, som den besøgende gennemgår, mens vedkommende læser siden - lange svar, produktsammenligninger, formularer eller andet indhold med meget tekst.
Når du slår funktionen til, vises der en knap i chathovedet; det er op til den besøgende, om de vil bruge den. Deres valg huskes i resten af browsersessionen.
- Panelet optager halvdelen af browservinduets bredde, op til 720 px, og har altid fuld højde. Det fastgøres i samme side som din launcher, så en widget placeret til venstre åbner et panel i venstre side.
- Desktop width og Desktop height gælder ikke her - de styrer udelukkende det almindelige svævende vindue.
- Knappen vises kun på computerskærme, der er mindst 1200 px brede, og som bruger en mus. På telefoner og tablets vises den aldrig, da chatten allerede fylder hele skærmen dér. Hvis en besøgende gør browseren smallere end denne bredde, foldes skuffen automatisk tilbage til det normale vindue.
- Launcheren skjules, mens panelet er åbent; den besøgende lukker det fra sidehovedet eller forlader tilstanden med den samme knap.
Drawer mode er slået fra som standard, så der ændrer sig ingenting for dine besøgende, før du aktiverer funktionen.
Andre indstillinger under Appearance
- Widget Shadow (widget-skygge) - aktivér eller deaktivér en skygge omkring chat-widgettens ramme
- Open links in (åbn links i) - vælg, om links i chatbeskeder skal åbne i en ny fane (new tab) eller i samme fane (same tab)
Der vises også en lukkeknap (X) i chathovedet på computeren, så besøgende kan lukke chatten tilbage til launcheren uden at genindlæse siden. Lukkeknappen er skjult, når chatten er indlejret som en iframe eller vises i fuldskærmstilstand.
Custom Chat Footer (brugerdefineret sidefod i chat)
Tilføj en tilpasset tekst, der vises i bunden af chat-widgetten (maks. 250 tegn). Markdown understøttes til indsættelse af links. En almindelig anvendelse er at linke til din privatlivspolitik eller dine servicevilkår.
Eksempel på markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS (tilpasset CSS)
Tilføj brugerdefinerede CSS-stile for at tilpasse udseendet af din chat-widget yderligere (maks. 5000 tegn):
Relaterede artikler
- Sådan opretter du din første chatbot
- Samtaleindstillinger - skriv velkomstbeskeden og de foreslåede spørgsmål
- Welcome Screen - startlayoutet i fuld skærm og varianterne set fra den besøgendes side
- Brugerdefinerede formularer - indsaml oplysninger fra besøgende direkte i chatten
- Lead-indsamling