Widgetin mukauttaminen
Sovita chat-widget brändiinne ja määritä sen käyttäytyminen täsmälleen haluamallanne tavalla. Kaikki mukautukset tehdään hallintapaneelissanne — muutokset päivittyvät verkkosivullenne automaattisesti, ilman upotuskoodin muokkausta.
Asetukset löytyvät Dashboard → Chatbots → valitse chatbot:
- Widget-välilehti hallitsee ulkoasua (sijainti, värit, koko, tekstit)
- Behavior-välilehti hallitsee, miten widget on vuorovaikutuksessa kävijöiden kanssa
Klikkaa sivun yläreunasta Save Changes soveltaaksesi muutoksia.
Widget-välilehti: Ulkoasu
Sijainti
Valitse, missä widget näkyy verkkosivullasi:
| Position | Description |
|---|---|
| Bottom Right | Kelluva keskustelupallo sivun oikeassa alakulmassa (oletus) |
| Bottom Left | Kelluva keskustelupallo sivun vasemmassa alakulmassa |
| Inline (Embedded) | Widget upotettuna suoraan sivulle kellumisen sijaan |
Inline-sijainnilla keskustelu upotetaan siihen kohtaan, mihin upotusskripti on sijoitettu, ja se on aina auki — ei kuplaa, ei sulkupainiketta. Ihanteellinen omille chat- tai tukisivuille. Katso lisätietoja Widget Embedding.
Väriteema
Valitse yksi kolmesta väriesiasetuksesta:
| Preset | Description |
|---|---|
| Default | ChatReactin vakio-värimaailma |
| Brand | Yrityksenne brändivärit Company Settings -asetuksista |
| Custom | Valitse omat värisi |
Brand-esiasetus on saatavilla vasta, kun brändivärit on asetettu. Siirry Company Settings -kohtaan poimiaksesi värit verkkosivultanne.
Kun Custom on valittuna, voit määrittää neljä perusväriä:
- Primary — kupla, otsikon liukuväri, painikkeet ja kävijän viestit
- Secondary — otsikon liukuvärin toinen väri
- Background — chat-ikkunan tausta
- Text — viestien tekstiväri
Kehittyneet väriasetukset
Tarvitsetteko enemmän säätömahdollisuuksia? Kun Custom on valittuna, avaa Advanced Color Settings ylikirjoittaaksesi automaattisesti lasketut värit:
- Visitor Messages — kävijän viestikuplien tausta- ja tekstiväri
- Bot Messages — botin viestikuplien tausta- ja tekstiväri
- Header Text Color — otsikon ja alatunnisteen väri widgetin otsikossa
Kaikki jättämäsi kentät lasketaan automaattisesti hyvän kontrastin varmistamiseksi. Jokaisessa ylikirjoituksessa on Reset to automatic -painike, jolla palautat lasketun värin.
Koko ja tyyli
| Setting | Range | Default |
|---|---|---|
| Border Radius | 0–32 px | 24 px |
| Width | 300–500 px | 380 px |
| Height | 400–700 px | 600 px |
Pienillä mobiilinäytöillä widget vaihtaa automaattisesti täysleveään asetteluun näistä mitoista riippumatta.
Logo
Ota käyttöön Use company logo in widget header näyttääksesi yrityksenne logon chat-otsikossa. Logo ladataan Company Settings -kohtaan — suositus: neliö, vähintään 200×200 px (JPG, PNG, GIF, WebP tai SVG, max. 5 MB).
Tämä vaihtoehto on saatavilla Professional-planilla ja sitä korkeammilla, sekä kaikilla Agency-suunnitelmilla.
Otsikon nimi, alatunniste & kuplateksti
| Field | Description | Default |
|---|---|---|
| Header Title | Otsikko, joka näkyy chat-ikkunan yläosassa | "Chat with us" |
| Header Subtitle | Pienempi rivi otsikon alla | "We typically reply within minutes" |
| Bubble Text | Teksti, joka näytetään chat-kuplan vieressä, kun widget on suljettu | None |
Jos et koskaan määritä otsikkoa tai alatunnistetta, widget näyttää oletustekstin — automaattisesti lokalisoituna kunkin kävijän kielelle.
Miten otsikon alatunniste toimii: Kun et ole määrittänyt alatunnistetta, widget näyttää lokalisoidun oletuksen, ja asetusten lomake esitäyttää tämän oletuksen niin, että voit nähdä ja muokata sitä. Piilottaaksesi alatunnisteen kokonaan, tyhjennä kenttä ja tallenna — tarkoituksella tyhjennetty alatunniste pysyy piilotettuna.
Kuplateksti näkyy pienenä tunnisteena suljetun chat-kuplan vieressä (esim. "Got questions?"). Jätä kenttä tyhjäksi näyttääksesi vain pyöreän kuplan.
Widgetin käännökset
Jos chatbotinne tukee useita kieliä, Widget Translations -kortti ilmestyy ulkoasuasetusten alle. Siellä voit kääntää tervetuloviestin, varaviestin, otsikon nimen, otsikon alatunnisteen ja kuplatekstin kutakin käytössä olevaa kieltä varten.
Tervetulo- ja varaviestit määritellään itse Persona-välilehdellä chatbotin asetuksissa.
Live-esikatselu
Widget-välilehden oikeassa sarakkeessa näkyy Live Preview widgetistä, joka päivittyy asetuksia muuttaessasi. Se on interaktiivinen: sulje chat-ikkuna X:llä nähdäksesi suljetun kuplan (mukana kuplatekstisi), ja klikkaa kuplaa avataksesi sen uudelleen.
Behavior-välilehti: Vuorovaikutus
Käyttäytymisasetukset
| Setting | Description | Default |
|---|---|---|
| Proactive Greeting | Bot tervehtii kävijöitä automaattisesti viiveen jälkeen (1–10 sekuntia) | On, 3 s |
| Auto-Open | Widget avautuu automaattisesti kävijöille viiveen jälkeen (1–15 sekuntia) | Off, 5 s |
| Sound Enabled | Toista ilmoitusäänet | On |
| Typing Indicator | Näytä animaatio, kun botti kirjoittaa | On |
| Pre-Chat Form | Kerää kävijän tiedot ennen keskustelun aloittamista | Off |
| Show on Mobile | Näytä widget mobiililaitteissa | On |
Maksimi viestipituus
Rajoita, kuinka monta merkkiä kävijät voivat kirjoittaa per viesti (100–10 000 merkkiä, oletus 2 000). Tämä auttaa estämään liiallista resurssien käyttöä erittäin pitkistä syötteistä. Tyhjennä kenttä tai klikkaa Remove limit salliaksesi viestit ilman pituusrajaa.
Pre-Chat-lomake
Kun pre-chat-lomake on päällä, kävijät täyttävät lyhyen lomakkeen ennen keskustelun aloittamista. Määritätte kentät itse:
- Field types: Text, Email, Phone, Textarea
- Jokaisella kentällä on label, valinnainen placeholder ja required-kytkin
- Järjestä kenttiä ylös/alas -painikkeilla tai poista niitä
Jos chatbot tukee useita kieliä, kenttäeditorin alle ilmestyy käännösosio. Syötä käännökset jokaiselle kielelle manuaalisesti, tai klikkaa Translate with AI kääntääksesi kaikki etiketit ja paikkamerkit automaattisesti.
Live Chat
Behavior-välilehti sisältää myös Live Chat Settings -kortin. Ota live chat käyttöön, jotta kävijät voivat keskustella ihmispalvelijoiden kanssa, ja valitse tila:
| Mode | Description |
|---|---|
| Handoff Only | Live chat vain, kun botti ei pysty auttamaan |
| Standalone | Kävijät voivat keskustella suoraan agenteille |
| Both | Handoff ja suora live chat molemmat käytettävissä |
Live Chat on saatavilla Professional-planilla ja sitä korkeammilla, sekä kaikilla Agency-suunnitelmilla. Katso Live Chat ohjeet saapuvien keskustelujen hallintaan.
Brändäys
Suunnitelmissa, jotka sisältävät white-labelin, Behavior-välilehden alaosaan ilmestyy Branding-kortti. ChatReact-brändäys on oletuksena piilotettu näillä suunnitelmilla — ota käyttöön Show "Powered by ChatReact" jos haluat näyttää sen widgetin alatunnissa.
Oppimisvaihe
Kun uusi chatbot on oppimisvaiheessa, voit säätää, kuinka varovaisesti se vastaa — Cautious, Balanced (suositus) tai Confident — saman asetussivun Confidence-välilehdellä. Tämä välilehti näkyy suunnitelmissa, jotka sisältävät Improvement Agentin. Katso Improvement Agent -opas lisätiedoiksi.