Ulkoasu

Chatbotin ulkoasu vaikuttaa merkittävästi käyttäjäkokemukseen. Tässä ohjeessa käymme läpi kaikki muokkausmahdollisuudet.

Värimaailma

Pääväri

Pääväri määrittää:

• Otsikkopalkin taustan
• Lähetä-painikkeen värin
• Linkkien ja korostusten värin

Valitse väri, joka sopii brändisi ilmeeseen. Voit syöttää HEX-koodin (esim. #0066CC) tai käyttää värivalitsinta.

Tekstin väri

Varmista riittävä kontrasti luettavuuden takaamiseksi. Suosittelemme:

• Tummalla taustalla: valkoinen teksti
• Vaalealla taustalla: tumma teksti

Käyttäjän viestien väri

Asiakkaan lähettämät viestit näkyvät omalla värillään. Tyypillisesti käytetään:

• Brändisi pääväriä
• Neutraalia harmaata

Logo

Lataa yrityksesi logo näkymään chat-ikkunan otsikossa.

Suositukset:

• Kuvan koko: 40x40px tai 80x80px (retina)
• Tiedostomuoto: PNG (läpinäkyvä tausta) tai SVG
• Tiedostokoko: max 100KB

Sijainti

Valitse missä widget näkyy:

Marginaalit

Säädä widgetin etäisyys sivun reunoista:

• Sivumarginaali: 16-32px
• Alamarginaali: 16-32px

Koko ja muoto

Widgetin koko

Pyöristys

Säädä kulmien pyöristystä:

• 0px – Terävät kulmat (moderni, minimalistinen)
• 8px – Kevyt pyöristys (suositus)
• 16px – Voimakas pyöristys (pehmeä ilme)

Chat-kuplat

Muokkaa viestikuplien ulkoasua:

Botin viestit

• Taustaväri (yleensä vaalea harmaa)
• Tekstin väri
• Pyöristys

Käyttäjän viestit

• Taustaväri (brändisi pääväri)
• Tekstin väri
• Pyöristys

Avaus-nappi

Customize the floating button that opens the chat:

Tyyli

• Pyöreä – Klassinen chat-ikoni
• Suorakaide – Teksti-nappi (esim. "Kysy meiltä")

Animaatio

• Pulssi – Huomiota herättävä pulssiefekti
• Bounce – Pomppiva animaatio
• Ei animaatiota – Rauhallinen, staattinen

Esikatselu

Käytä Live Preview -toimintoa nähdäksesi muutokset reaaliajassa ennen tallentamista.

Testaa ulkoasua sekä vaalean että tumman taustan edessä varmistaaksesi hyvän näkyvyyden.

Seuraavaksi

Säädä miten botti kommunikoi

Lisää widget sivuillesi