Ulkoasuasetukset (Appearance settings) määrittävät, miltä chatbotisi chat-widget näyttää verkkosivustosi vierailijoille - ylätunnisteen, viestien värit ja fontit, käynnistyskuvakkeen, 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 artikkelista Kuinka luot ensimmäisen chatbotisi.
Mistä ulkoasuasetukset löytyvät
Valitse chatbotisi ja siirry kohtaan Settings > Appearance (Asetukset > Ulkoasu). Napsauta ChatLabin pääsivulta Chatbots (Chatbotit), avaa chatbotisi, avaa Settings-välilehti (Asetukset) ja valitse sitten vasemmanpuoleisesta valikosta Appearance (Ulkoasu).
Sivun oikeassa reunassa näkyy reaaliaikainen esikatselu widgetistäsi, ja se päivittyy sitä mukaa kun muutat asetuksia.
Chat Header (Chatin ylätunniste)
Määritä, miltä chat-widgetisi yläosa näyttää:
- Chatbot name (Chatbotin nimi) - chatin ylätunnisteessa näkyvä nimi (enintään 60 merkkiä)
- Tagline (Iskulause) - valinnainen alaotsikko, joka näkyy chatbotin nimen alapuolella (enintään 60 merkkiä)
- Avatar (Profiilikuva) - lataa oma kuva, jonka asiakkaat näkevät keskustellessaan chatbotin kanssa. Käytä Remove-painiketta (Poista, korostettu alla) nykyisen kuvan poistamiseen.
- Background (Tausta) - ylätunnistealueen taustaväri
- Name color (Nimen väri) - chatbotin nimen tekstin väri
- Tagline color (Iskulauseen väri) - iskulauseen tekstin väri
- Reset conversation tooltip (Keskustelun nollauksen työkaluvihje) - työkaluvihjeen teksti, joka näytetään vierailijan viedessä kursorin widgetin ylätunnisteessa olevan keskustelun nollauspainikkeen päälle (enintään 40 merkkiä, oletuksena "Reset conversation")
Message (Viesti)
Mukauta viestikenttää ja keskusteluviestien ulkoasua:
- Input placeholder (Syöttökentän paikkamerkki) - widgetin alareunassa olevassa uuden viestin syöttökentässä näkyvä paikkamerkkiteksti (enintään 50 merkkiä, oletuksena "Type a message..."). Käytä sitä rohkaisemaan vierailijoita aloittamaan kirjoittaminen.
- 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
Viestien tekstikoko määritetään Typography -osiossa yhdessä widgetin fontin kanssa.
Suggested Questions (Kysymysehdotukset)
Kysymysehdotukset ovat valmiita kehotteita, joita napauttamalla vierailija voi aloittaa keskustelun. Itse kysymykset kirjoitetaan kohdassa Settings > Chat Conversation (Asetukset > Chat-keskustelu); täällä muokataan painikkeiden ulkoasua:
- Background (Tausta) - kysymysehdotuspainikkeiden taustaväri
- Text (Teksti) - kysymysehdotuspainikkeiden tekstiväri
- Stack (Pinoa) - kun asetus on käytössä, pidemmät kysymysehdotukset pinotaan pystysuunnassa vaakasuuntaisen vierityspalkin näyttämisen sijaan
Kysymysehdotusten tekstikoko määritetään Typography -osiossa.
Minimized-Mode Settings (Pienennetyn tilan asetukset)
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) - tavallinen pyöreä chatin käynnistyskuvake (oletus)
- Minified chat bar (Pienennetty chat-palkki) - kompakti tekstinsyöttöpalkki sivun alareunassa
- Icon with text (Kuvake tekstin kera) - leveämpi pillerinmuotoinen käynnistin: kuvake sekä lyhyt kaksirivinen teksti
- Icon color / Mini bar color (Kuvakkeen väri / Minipalkin väri) - käynnistyskuvakkeen tai minipalkin taustaväri
- Custom chat icon (Mukautettu chat-kuvake, vain kuvaketilassa) - ota käyttöön ladataksesi omat chatin avaus- ja sulkemiskuvakkeet
- 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 etäisyys pikseleinä alareunasta
- Move icon/bar left/right by (Siirrä kuvaketta/palkkia vasemmalle/oikealle) - vaakasuuntainen etäisyys pikseleinä lähimmästä näytön reunasta
Icon with Text (Kuvake tekstin kera)
Icon with text -tila antaa käynnistimelle lyhyen kuvatekstin, 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 näkyviin neljä asetusta:
- Label line 1 (Tekstirivi 1) - kuvatekstin ensimmäinen, korostetumpi rivi (enintään 60 merkkiä)
- Label line 2 (Tekstirivi 2) - toinen, kevyempi rivi (enintään 60 merkkiä). Jätä tyhjäksi, jos haluat yksirivisen käynnistimen
- Text color (Tekstin väri) - kuvatekstin väri. Jos jätät tämän koskemattomaksi, ChatLab valitsee automaattisesti mustan tai valkoisen sen mukaan, kuinka vaalea tai tumma käynnistimen 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 tilaan, joten käynnistin ei koskaan kasva näyttöä leveämmäksi. Käynnistin kutistuu takaisin ympyräksi chatin ollessa auki.
Jos chatbotisi on monikielinen, molemmat kuvatekstirivit käännetään muiden vierailijoille näkyvien tekstien tavoin, joten jokainen vierailija näkee tekstin omalla kielellään.
Show close cross on oletusarvoisesti pois päältä ja käytettävissä vain tässä tilassa. Kun se on käytössä, rastia napsauttava vierailija piilottaa käynnistimen loppuselausistuntonsa ajaksi - se pysyy piilossa sivulta toiselle siirryttäessä ja palaa näkyviin seuraavalla käynnillä tai uudessa välilehdessä. Automaattisesti avautumaan asetettu chatbot kunnioittaa tätä valintaa eikä avaudu uudelleen sen jälkeen, kun vierailija on sulkenut sen.
Auto Open Chat Widget After Page Load (Avaa chat-widget automaattisesti sivun latauduttua)
Määritä chat laajenemaan 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 sekunteina ennen avaamista (0-60 sekuntia)
Human-Like Messaging (Ihmismäinen viestintä)
Simuloi ihmismäistä kirjoittamista jakamalla vastaukset useisiin viestikupliin, jotka näytetään vähitellen lause kerrallaan:
- Human-Like Messaging - kytkin toiminnon ottamiseksi käyttöön tai poistamiseksi käytöstä
- Delay Between Bubbles (Kuplien välinen viive) - aika sekunteina kunkin viestikuplan näyttämisen välillä (0-200 sekuntia)
Welcome Message Bubble (Tervetuloviestikupla)
Näytä tervetuloviesti kuplassa chatin käynnistyskuvakkeen yläpuolella, jotta vierailijat huomaavat 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) - aika sekunteina sivun latautumisesta ennen kuplan näyttämistä (0-60 sekuntia)
Jos sinulla on useita tervetuloviestejä, ne näytetään pinottuna chat-kuvakkeen yläpuolella.
Äänisyöte (mikrofonipainike chatin tekstikentässä) määritetään kohdassa Settings > Chat Conversation, ei täällä ulkoasuasetuksissa.
Welcome Screen (Aloitusnäkymä)
Vaihda widget erityiseen aloitusnäkymään, joka toivottaa uudet vierailijat tervetulleiksi suurella tervetuloviestillä ja keskitetylle valkoiselle kortille pinotuilla kysymysehdotuksilla. Aloitusnäkymä näytetään vain uuden istunnon alussa, ja se 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 (Kysymysehdotusten esittelyteksti) - lyhyt teksti, joka näkyy kysymysehdotuskortin yläpuolella aloitusnäkymässä (esimerkiksi "Valitse vaihtoehto tai kirjoita viesti"). Jätä tyhjäksi piilottaaksesi tekstin. Edellyttää, että kysymysehdotukset on määritetty kohdassa Settings > Chat Conversation.
- Hide Human Contact Form (Piilota yhteydenottolomake) - piilottaa yhteydenottolomaketoiminnon 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 liidien keräämiseen (Lead Collection) ja tietosuojaselosteen suostumukseen (Privacy Policy consent) - jos jompaakumpaa vaaditaan keskustelun alussa, lomake tai suostumuspyyntö näytetään aloitusnäkymän kortilla kysymysehdotusten sijaan.
Tarkemmat tiedot, asetteluvaihtoehdot ja kuvakaappaukset vierailijanäkymästä löydät artikkelista Welcome Screen.
Header Actions (Ylätunnisteen toiminnot)
Määrittää, miten Live Chat ja ihmisen yhteydenottolomake (Human Contact Form) tarjotaan chat-widgetin ylätunnisteessa.
- Separate icons (Erilliset kuvakkeet) - kumpikin 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 kielenvaihdin, kun ne ovat käytössä
Uudet chatbotit käyttävät valikkoa, mikä pitää ylätunnisteen siistinä toimintojen lisääntyessä. Ennen 2. syyskuuta 2026 luodut chatbotit säilyttävät erilliset kuvakkeet, joten mikään ei muutu niiden vierailijoille. Voit vaihtaa asetusta milloin tahansa - se vaikuttaa vain esitystapaan, ei siihen, mitä toiminnot tekevät.
Typography (Typografia)
Määrittää kirjasintyypin ja tekstikoot koko widgetissä - viesteissä, kysymysehdotuksissa, 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 (Kysymysehdotusten fonttikoko) - kysymysehdotuspainikkeiden 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 verkon yli - widget käyttää vierailijan laitteelle valmiiksi asennettua fonttia. Se tekee siitä nopeimman vaihtoehdon, ja se sulautuu sivustoihin, jotka käyttävät itsekin järjestelmän kirjasintyyppiä, 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 (fallback), joten jos vierailijan verkko estää Google Fonts -palvelun, teksti pysyy luettavana eikä asettelu hajoa.
Fonttitiedosto noudetaan 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 aiheuta ylimääräisiä pyyntöjä sivullesi.
Widget Size (Widgetin koko)
Säädä, kuinka suurena avattu chat-widget näkyy tietokoneella ja mobiililaitteilla. Jokaisella liukusäätimellä on Default-painike (Oletus), joka palauttaa sisäänrakennetun mitoituksen.
- Desktop width (Tietokoneen leveys) - widgetin leveys tietokoneen selaimissa pikseleinä (330-800, oletus 448)
- Desktop height (Tietokoneen korkeus) - widgetin korkeus tietokoneen selaimissa pikseleinä (300-770, oletus 660)
- Mobile size (Mobiilikoko) - widgetin koko mobiililaitteilla prosentteina näytöstä (60-100 %, oletus 100 %)
Oletusarvolla widget käyttää ChatLabin sisäänrakennettua responsiivista mitoitusta. Mikä tahansa muu arvo soveltaa kiinteää kokoa.
Mobiilissa oletusarvo (100 %) saa avatun chatin peittämään koko näytön. Pienemmän prosenttiosuuden valitseminen kutistaa widgetin kyseiseen osaan näyttöä ja keskittää sen näkymään, 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 tietokoneriveille ja toisen mobiiliriville. Painikkeen napsauttaminen tallentaa kaikki tallentamattomat muutokset ja avaa sitten chatin esikatseluikkunassa nykyisillä asetuksillasi:
- Tietokonepainike avaa tavallisen selainikkunan, jotta näet tarkan koon tietokoneen näytöllä.
- Mobiilipainike avaa kompaktin ponnahdusikkunan (400 x 700), jotta widget renderöityy mobiiliasettelussaan. Tämä on hyödyllistä, kun säädät Mobile size -liukusäädintä pöytätietokoneelta käsin.
Drawer Mode (Sivupaneelitila)
Drawer mode antaa vierailijan vaihtaa chatin kelluvasta ikkunasta koko näytön korkuiseksi, näytön reunaan kiinnitetyksi paneeliksi, jolloin sivusi pysyy näkyvissä sen rinnalla. 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 se käyttöön, ja chatin ylätunnisteeseen ilmestyy painike; vierailija päättää itse, käyttääkö sitä. Hänen valintansa muistetaan loppuselausistunnon ajan.
- Paneeli on puolet selainikkunan leveydestä, enintään 720 px, ja aina koko näytön korkuinen. Se kiinnittyy samalle puolelle kuin käynnistimesi, joten vasemmalle sijoitettu widget avaa paneelin vasemmalle.
- Desktop width ja Desktop height eivät päde tässä - ne määrittävät vain normaalin kelluvan ikkunan koon.
- Painike näytetään vain tietokoneiden näytöillä, joiden leveys on vähintään 1 200 px ja joissa käytetään hiirtä. Puhelimissa ja tableteissa se ei näy koskaan, koska chat täyttää näytön niissä jo valmiiksi. Jos vierailija pienentää selaimen leveyttä tämän alle, paneeli palaa normaaliksi ikkunaksi.
- Käynnistin on piilotettu paneelin ollessa auki; vierailija sulkee sen ylätunnisteesta tai poistuu sivupaneelitilasta samalla painikkeella.
Drawer mode on oletusarvoisesti pois päältä, joten mikään ei muutu vierailijoillesi ennen kuin otat sen käyttöön.
Other Appearance Settings (Muut ulkoasuasetukset)
- Widget Shadow (Widgetin varjostus) - 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ä vai samassa välilehdessä
Tietokoneella chatin ylätunnisteessa näytetään myös sulkemispainike (X), jotta vierailijat voivat kutistaa 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 (Mukautettu chatin alatunniste)
Lisää chat-widgetin alareunassa näkyvä mukautettu teksti (enintään 250 merkkiä). Markdown-muotoilua tuetaan linkkien lisäämiseksi. Yleinen käyttötapa on linkittää tietosuojaselosteeseen tai käyttöehtoihin.
Esimerkki markdownista:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS (Mukautettu CSS)
Lisää mukautettuja CSS-tyylejä muokataksesi chat-widgetisi ulkoasua entisestään (enintään 5 000 merkkiä):
Aiheeseen liittyvät artikkelit
- Kuinka luot ensimmäisen chatbotisi
- Keskusteluasetukset - kirjoita tervetuloviesti ja kysymysehdotukset
- Welcome Screen - koko näytön aloitusasettelu ja sen vierailijanäkymän vaihtoehdot
- Mukautetut lomakkeet - kerää vierailijoiden tietoja suoraan chatissa
- Liidien kerääminen