Appearance-asetukset (Ulkoasuasetukset) määrittävät, miltä chatbotisi chat-widget näyttää verkkosivustosi vierailijoille - ylätunnisteen, viestien värit ja fontit, käynnistinkuvakkeen, aloitusnäkymän, widgetin koon ja paljon muuta. Täällä saat widgetin vastaamaan brändiäsi.
Tarvitset chatbotin, ennen kuin voit muokata sen tyyliä. Jos et ole vielä luonut sellaista, aloita ohjeesta Kuinka luot ensimmäisen chatbotisi.
Mistä Appearance-asetukset löytyvät
Valitse chatbotisi ja siirry kohtaan Settings > Appearance (Asetukset > Ulkoasu). Napsauta ChatLabin pääsivulta Chatbots (Chatbotit), avaa chatbotisi, siirry Settings-välilehdelle (Asetukset) ja valitse sitten vasemmanpuoleisesta valikosta Appearance.
Widgetisi esikatselu näkyy sivun oikeassa reunassa ja päivittyy sitä mukaa, kun muutat asetuksia.
Chat Header
Määritä, miltä chat-widgetisi yläosa näyttää:
- Chatbot name (Chatbotin nimi) - chat-ylätunnisteessa näkyvä näyttönimi (enintään 60 merkkiä)
- Tagline (Iskulause) - valinnainen alaotsikko, joka näkyy chatbotin nimen alla (enintään 60 merkkiä)
- Avatar (Profiilikuva) - lataa oma kuva, jonka asiakkaat näkevät keskustellessaan chatbotin kanssa. Käytä Remove-painiketta (Poista, korostettu alla) poistaaksesi nykyisen kuvan.
- Background (Tausta) - ylätunnistealueen taustaväri
- Name color (Nimen väri) - chatbotin nimen tekstiväri
- Tagline color (Iskulauseen väri) - iskulauseen tekstiväri
- Reset conversation tooltip (Keskustelun nollauksen työkaluvihje) - työkaluvihjeteksti, joka näytetään vierailijan viedessä hiiren widgetin ylätunnisteessa olevan keskustelun nollauspainikkeen päälle (enintään 40 merkkiä, oletusarvo "Reset conversation")
Message
Mukauta viestikenttää ja keskusteluviestien ulkoasua:
- Input placeholder (Syöttökentän paikkamerkkiteksti) - widgetin alareunan uuden viestin kirjoituskentässä näkyvä paikkamerkkiteksti (enintään 50 merkkiä, oletusarvo "Type a message..."). Käytä tätä kannustaaksesi vierailijoita aloittamaan kirjoittamisen.
- User background (Käyttäjän tausta) - vierailijan lähettämien viestien taustaväri
- User text (Käyttäjän teksti) - vierailijan viestien tekstiväri
- Resp. background (Vastauksen tausta) - chatbotin vastausten taustaväri
- Response text (Vastausteksti) - chatbotin vastausten tekstiväri
Viestin tekstikoko määritetään Typography -osiossa yhdessä widgetin fontin kanssa.
Suggested Questions
Ehdotetut kysymykset ovat valmiita kehotteita, joita napauttamalla vierailija voi aloittaa keskustelun. Itse kysymykset kirjoitetaan kohdassa Settings > Chat Conversation (Asetukset > Keskustelu); täällä määrität, miltä painikkeet näyttävät:
- Background (Tausta) - ehdotettujen kysymysten painikkeiden taustaväri
- Text (Teksti) - ehdotettujen kysymysten painikkeiden tekstiväri
- Stack (Pinoa) - kun tämä on käytössä, pidemmät ehdotetut kysymykset pinoituvat päällekkäin vaakasuuntaisen vierityspalkin sijaan
Ehdotettujen kysymysten tekstikoko määritetään Typography -osiossa.
Minimized-Mode Settings
Määritä, miltä chat-widget näyttää pienennettynä (ennen kuin vierailija avaa chatin):
- Minimized display mode (Pienennetyn tilan näyttötapa) - valitse seuraavista:
- Icon (Kuvake) - perinteinen pyöreä chatin käynnistinkuvake (oletus)
- Minified chat bar (Pienennetty chat-palkki) - sivun alareunassa näkyvä kompakti tekstinsyöttöpalkki
- Icon with text (Kuvake ja teksti) - leveämpi pillerinmuotoinen käynnistin: kuvake sekä lyhyt kaksirivinen teksti
- Icon color / Mini bar color (Kuvakkeen väri / Pikkupalkin väri) - käynnistinkuvakkeen tai minipalkin taustaväri
- Custom chat icon (Mukautettu chat-kuvake, vain kuvaketilassa) - ota käyttöön ladataksesi omat kuvakkeet chatin avaamiseen ja sulkemiseen
- Position on screen (Sijainti näytöllä) - sijoita widget näytön vasempaan tai oikeaan reunaan
- Move up chat icon/bar by (Siirrä chat-kuvaketta/-palkkia ylös) - pystysuuntainen siirtymä pikseleinä alareunasta
- Move icon/bar left/right by (Siirrä kuvaketta/palkkia vasemmalle/oikealle) - vaakasuuntainen siirtymä pikseleinä lähimmästä näytön reunasta
Icon with Text
Icon with text -tila antaa käynnistimelle lyhyen tekstin, jotta vierailijat näkevät chatin käyttötarkoituksen ennen sen avaamista. Se on hyödyllinen silloin, kun pelkkä kuvake ei ole tarpeeksi selkeä - esimerkiksi "Kirjoita meille / Vastaamme heti" tai "Tarvitsetko apua? / Kysy assistentiltamme".
Tämän tilan valitseminen tuo neljä uutta asetusta:
- Label line 1 (Otsikkorivi 1) - tekstin ensimmäinen, vahvempi rivi (enintään 60 merkkiä)
- Label line 2 (Otsikkorivi 2) - toinen, vaaleampi rivi (enintään 60 merkkiä). Jätä tyhjäksi, jos haluat yksirivisen käynnistimen
- Text color (Tekstin väri) - tekstin väri. Jätä tämä koskemattomaksi, niin ChatLab valitsee mustan tai valkoisen automaattisesti sen mukaan, kuinka vaalea tai tumma käynnistimesi väri on
- Show close cross (Näytä sulkemisrasi) - lisää käynnistimeen pienen rastin, jotta vierailijat voivat piilottaa sen
Molemmat rivit katkaistaan kolmella pisteellä, jos ne eivät mahdu, joten käynnistin ei koskaan kasva näyttöä leveämmäksi. Käynnistin kutistuu takaisin ympyräksi chatin ollessa auki.
Jos monikielisyystuki on käytössä, molemmat tekstirivit käännetään samalla tavalla kuin muutkin vierailijoille näkyvät tekstit.
Show close cross on oletuksena pois päältä ja käytettävissä vain tässä tilassa. Kun se on päällä, rastia napsauttava vierailija piilottaa käynnistimen loppuselausistuntonsa ajaksi - se pysyy piilossa sivujen välillä liikuttaessa ja palaa näkyviin seuraavalla vierailukerralla tai uudessa välilehdessä. Automaattisesti avautuvaksi asetettu chatbot kunnioittaa tätä valintaa eikä avaudu uudelleen sen jälkeen, kun vierailija on sulkenut sen.
Auto Open Chat Widget After Page Load
Määritä chat avautumaan automaattisesti, kun vierailijat lataavat sivun:
- Auto open on mobile (Automaattinen avaus mobiililaitteilla) - avaa chatin automaattisesti mobiililaitteilla
- Auto open on desktop (Automaattinen avaus tietokoneella) - avaa chatin automaattisesti tietokoneen näytöillä
- Open chat with delay (Avaa chat viiveellä) - ottaa käyttöön viiveen ennen automaattista avaamista (käytettävissä vain, kun automaattinen avaus on päällä)
- Delay by (Viiveen kesto) - odotusaika sekunneissa ennen avaamista (0-60 sekuntia)
Human-Like Messaging
Simuloi ihmismäistä kirjoittamista jakamalla vastaukset useisiin viestikupliin, jotka näytetään vähitellen lause lauseelta:
- Human-Like Messaging - kytkin toiminnon ottamiseksi käyttöön tai poistamiseksi käytöstä
- Delay Between Bubbles (Kuplien välinen viive) - aika sekunneissa kunkin viestikuplan näyttämisen välillä (0-200 sekuntia)
Welcome Message Bubble
Näytä tervetuloviesti kuplassa chatin käynnistinkuvakkeen yläpuolella, jotta vierailijat huomaisivat chatin helpommin. Tämä toiminto on käytettävissä vain kuvaketilassa, eikä se toimi iframe-tilassa tai silloin, kun automaattinen avaus on käytössä.
- Show on desktop (Näytä tietokoneella) - näytä tervetuloviestikupla tietokoneella
- Show on mobile (Näytä mobiililaitteilla) - näytä tervetuloviestikupla mobiililaitteilla
- Delay (Viive) - odotusaika sekunneissa sivun latautumisen jälkeen ennen kuplan näyttämistä (0-60 sekuntia)
Jos sinulla on useita tervetuloviestejä, ne pinoutuvat chat-kuvakkeen yläpuolelle.
Äänisyöte (mikrofonipainike chatin syöttökentässä) määritetään kohdassa Settings > Chat Conversation, ei täällä Appearance-osiossa.
Welcome Screen
Vaihda widgetiin erityinen avausnäkymä, joka tervehtii uusia vierailijoita suurella tervetuloviestillä ja keskitetylle valkoiselle kortille pinotuilla ehdotetuilla kysymyksillä. Aloitusnäkymä näkyy vain uuden istunnon alussa ja siirtyy tavalliseen chat-näkymään heti, kun vierailija lähettää ensimmäisen viestinsä.
- Special Welcome Screen (Erityinen aloitusnäkymä) - kytkee aloitusnäkymätilan päälle tai pois päältä (oletuksena pois päältä)
- Suggested questions intro (Ehdotettujen kysymysten johdanto) - lyhyt teksti, joka näkyy ehdotettujen kysymysten kortin yläpuolella aloitusnäkymässä (esimerkiksi "Valitse vaihtoehto tai kirjoita viesti"). Jätä tyhjäksi piilottaaksesi tekstin. Vaatii, että ehdotetut kysymykset on määritetty kohdassa Settings > Chat Conversation.
- Hide Human Contact Form (Piilota yhteydenottolomake) - piilottaa yhteydenottolomakkeen toiminnon ylätunnisteesta aloitusnäkymän ollessa näkyvissä
- Hide Live Chat (Piilota Live Chat) - piilottaa live chat -toiminnon ylätunnisteesta aloitusnäkymän ollessa näkyvissä
Aloitusnäkymä integroituu myös Lead Collection- (Liidien keruu) ja Privacy Policy consent -toimintoihin (Tietosuojaselosteen suostumus) - jos jompaakumpaa vaaditaan keskustelun alussa, lomake tai suostumuspyyntö näytetään aloituskortilla ehdotettujen kysymysten sijaan.
Täydelliset tiedot, asetteluvaihtoehdot ja kuvakaappaukset vierailijanäkymästä löydät ohjeesta Welcome Screen.
Header Actions
Määrittää, miten Live Chat ja Human Contact Form (Yhteydenottolomake) tarjotaan chat-widgetin ylätunnisteessa.
- Separate icons (Erilliset kuvakkeet) - kukin toiminto saa oman kuvakkeensa ylätunnisteeseen sulkemispainikkeen viereen
- Menu (dropdown) (Valikko (pudotusvalikko)) - molemmat toiminnot siirtyvät ylätunnisteen valikkoon (kolmen pisteen kuvake) sellaisten kohtien viereen kuin "Reset conversation" ja kielivalitsin, kun nämä ovat käytössä
Uudet chatbotit käyttävät valikkoa, mikä pitää ylätunnisteen siistinä toimintojen määrän kasvaessa. Ennen 2. syyskuuta 2026 luodut chatbotit säilyttävät erilliset kuvakkeet, joten niiden vierailijoille mikään ei muutu. Voit vaihtaa asetusta milloin tahansa - se vaikuttaa vain ulkoasuun, ei toimintojen toimintaan.
Typography
Määrittää koko widgetissä käytettävän kirjasintyypin ja tekstikoot - viesteissä, ehdotetuissa kysymyksissä, ylätunnisteessa, lomakkeissa ja käynnistimen tekstissä.
- Widget font (Widgetin fontti) - yksi kahdeksasta kirjasintyypistä: System default (Järjestelmän oletus), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif ja JetBrains Mono
- Message font size (Viestin fonttikoko) - viestitekstin koko (12-24 px)
- Suggested questions font size (Ehdotettujen kysymysten fonttikoko) - ehdotettujen kysymysten painikkeiden koko (12-24 px)
Inter on oletusarvo ja vastaa sitä, miltä jokainen chatbot näytti ennen tämän asetuksen julkaisua, joten mikään ei muutu ennen kuin valitset toisen fontin.
System default ei lataa mitään verkosta - widget käyttää vierailijan laitteelle jo valmiiksi asennettua kirjasintyyppiä. Tämä tekee siitä nopeimman vaihtoehdon, ja se sulautuu sivustoihin, jotka käyttävät itse järjestelmäfonttia, mutta chat näyttää hieman erilaiselta Windowsilla, macOS:llä ja Androidilla. Muut seitsemän ovat Google Fonts -fontteja, jotka vierailijan selain lataa kerran. Jokaisella on varafontti, joten jos vierailijan verkko estää Google Fonts -palvelun, teksti pysyy luettavana eikä asettelu hajoa.
Fonttitiedosto ladataan itse chat-ikkunaan. Se lisätään omalle sivullesi vain silloin, kun widget näyttää tekstiä chat-ikkunan ulkopuolella - Icon with text -käynnistimessä, pienennetyssä chat-palkissa tai tervetuloviestikuplissa. Pelkkää kuvakekäynnistintä käyttävä chatbot ei tee ylimääräisiä pyyntöjä sivullasi.
Widget Size
Säädä, kuinka suurena avoin chat-widget näkyy tietokoneella ja mobiililaitteilla. Jokaisessa liukusäätimessä on Default-painike (Oletus), joka palauttaa sisäänrakennetun mitoituksen.
- Desktop width (Tietokoneen leveys) - widgetin leveys työpöytäselaimissa pikseleinä (330-800, oletusarvo 448)
- Desktop height (Tietokoneen korkeus) - widgetin korkeus työpöytäselaimissa pikseleinä (300-770, oletusarvo 660)
- Mobile size (Mobiilikoko) - widgetin koko mobiililaitteilla prosentteina näytöstä (60-100 %, oletusarvo 100 %)
Oletusarvolla widget käyttää ChatLabin sisäänrakennettua responsiivista mitoitusta. Mikä tahansa muu arvo ottaa käyttöön kiinteän koon.
Mobiililaitteilla oletusarvo (100 %) saa avoimen chatin peittämään koko näytön. Pienemmän prosenttiosuuden valitseminen kutistaa widgetin kyseiseen osaan näyttöä ja keskittää sen näyttöalueelle, jotta vierailijat näkevät edelleen sivun chatin ympärillä.
Liukusäätimien vierestä löydät kaksi Save & Preview -painiketta (Tallenna ja esikatsele, korostettu alla) - toisen työpöytäriveille ja toisen mobiiliriville. Painikkeen napsauttaminen tallentaa tallentamattomat muutokset ja avaa sitten chatin esikatseluikkunassa nykyisillä asetuksillasi:
- Työpöytäpainike avaa tavallisen selainikkunan, jotta näet tarkan koon tietokoneen näytöllä.
- Mobiilipainike avaa kompaktin ponnahdusikkunan (400 x 700), jotta widget renderöityy mobiiliasettelussaan, mikä on hyödyllistä säätäessäsi Mobile size -liukusäädintä pöytätietokoneelta.
Maximise Button (Drawer Mode)
Drawer mode (Vetolaatikkotila) antaa vierailijalle mahdollisuuden muuttaa chatin kelluvasta ikkunasta koko näytön korkuiseksi paneeliksi, joka on kiinnitetty näytön reunaan siten, että sivusi näkyy edelleen sen vieressä. Se sopii keskusteluihin, joita vierailija käy läpi samalla kun hän lukee sivua - pitkiin vastauksiin, tuotevertailuihin, lomakkeisiin tai mihin tahansa, missä on paljon tekstiä.
Ota Maximise button (Suurenna-painike) käyttöön kohdassa Widget Size, jolloin chat-ylätunnisteeseen tulee näkyviin painike; vierailija päättää itse, käyttääkö hän sitä. Hänen valintansa muistetaan loppuselausistunnon ajan.
- Paneeli on puolet selainikkunan leveydestä (enintään 720 px) ja aina koko näytön korkuinen. Se telakoituu samalle puolelle kuin käynnistimesi, joten vasemmalle sijoitettu widget avaa sivupaneelin vasemmalle.
- Desktop width ja Desktop height eivät vaikuta tähän - ne määrittävät vain tavallisen kelluvan ikkunan koon.
- Painike näytetään vain tietokoneen näytöillä, jotka ovat vähintään 1 200 px leveitä ja joissa käytetään hiirtä. Puhelimilla ja tableteilla sitä ei koskaan näytetä, koska chat täyttää niissä jo koko näytön. Jos vierailija pienentää selaimen tämän leveyden alapuolelle, paneeli palautuu tavalliseksi ikkunaksi.
- Käynnistin on piilossa paneelin ollessa auki; vierailija sulkee sen ylätunnisteesta tai poistuu vetolaatikkotilasta samasta painikkeesta.
Vetolaatikkotila on oletusarvoisesti pois päältä, joten vierailijoillesi ei muutu mikään, ennen kuin otat sen käyttöön.
Other Appearance Settings
- Widget Shadow (Widgetin varjo) - ota käyttöön tai poista käytöstä chat-widgetin säiliön ympärillä oleva varjo
- Open links in (Avaa linkit kohteessa) - valitse, avautuvatko chat-viestien linkit uudessa välilehdessä (new tab) vai samassa välilehdessä (same tab)
Chatin ylätunnisteessa näytetään tietokoneella myös sulkemispainike (X), jotta vierailijat voivat pienentää chatin takaisin käynnistimeksi lataamatta sivua uudelleen. Sulkemispainike pysyy piilossa, kun chat on upotettu iframe-kehyksenä tai koko näytön tilassa.
Custom Chat Footer
Lisää mukautettu teksti, joka näkyy chat-widgetin alareunassa (enintään 250 merkkiä). Markdown-muotoilua tuetaan linkkien lisäämiseksi. Yleinen käyttötapa on linkittää tietosuojaselosteeseen tai käyttöehtoihin.
Esimerkki markdown-muotoilusta:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS
Lisää mukautettuja CSS-tyylejä muokataksesi chat-widgetisi ulkoasua entisestään (enintään 5 000 merkkiä):
Aiheeseen liittyvät artikkelit
Muutokset tallentuvat automaattisesti. Odota ilmoitusta Saved (Tallennettu) ja tarkista sitten Overview (Yleiskatsaus) sekä upotettu widget tietokoneella ja mobiililaitteella. Asetusten esikatselu näyttää chat-ikkunan; käynnistimen sijoittelu ja sivutason automaattisen avautumisen toiminta kannattaa tarkistaa myös verkkosivustoupotuksessasi.
- Kuinka luot ensimmäisen chatbotisi
- Keskusteluasetukset - kirjoita tervetuloviesti ja ehdotetut kysymykset
- Welcome Screen - koko näytön aloitusnäkymä ja sen vaihtoehdot vierailijalle
- Mukautetut lomakkeet - kerää vierailijoiden tietoja chatin sisällä
- Liidien keruu