Chat-widgetti #

Chat-widgetin integrointiopas verkkosivustolle #

Lisää verkkosivustollesi käyttäjäystävällinen chat-widget, jonka avulla vierailijat voivat viestiä suoraan sivustosi käyttöliittymän kautta. Integrointiprosessi on suoraviivainen ja tuo verkkosivustollesi sisäänrakennetut viestintäominaisuudet.

Chat-widgetin luominen ja määrittäminen #

Miten pääset sinne:

1. Napsauta Asetukset (Settings) vasemman sivupalkin alaosan lähellä. (Puhelimella napauta ensin valikkokuvaketta ☰ yläkulmassa avataksesi sivupalkin.)
2. Napsauta Asetusten vasemmassa reunassa kohdan Kanavat (Channels) alta Kanavat (Channels).
3. Etsi Verkkosivuston chat-widget (Website chat widget) -kortti.
4. Jos sinulla ei vielä ole widgetiä, napsauta Yhdistä (Connect) luodaksesi sellaisen näyttönimellä ja tervetuloviestillä.
5. Kun se on luotu, voit milloin tahansa napsauttaa Hallitse (Manage) avataksesi täydellisen määrityspaneelin.

Tallentamasi muutokset tulevat voimaan live-widgetissäsi automaattisesti — asennuskoodia ei tarvitse liittää uudelleen muutosten tekemisen jälkeen.

Live-esikatselu sijaitsee aivan asetusten vieressä: se on malliverkkosivu, jossa varsinainen widgetisi on käytössä. Se näyttää värisi, sijaintisi, logosi, käynnistinkuvakkeesi ja ennakoivan ponnahdusikkunasi täsmälleen sellaisina kuin kävijät ne näkevät. Se seuraa muokkauksiasi reaaliajassa, joten sinun ei tarvitse tallentaa nähdäksesi, miltä väri- tai teemamuutos näyttää. Voit jopa napsauttaa esikatselun chat-painiketta avataksesi widgetin ja kokeillaksesi sitä.

Mitä voit mukauttaa #

Hallintapaneeli on jaettu neljään osaan.

Ulkoasu #

• Tyyliteema: Muuta koko widgetin tyyli yhdellä napsautuksella. Kuusi teemaa määrittävät yhdessä ulkoasun, värit, kulmat ja fontin: Classic (alkuperäinen yhtenäinen ulkoasu — värillinen otsikkopalkki tasaisella paneelilla), Glass (huurrettu, läpikuultava paneeli, joka sumentaa pehmeästi sen takana olevan sivun, ja jossa otsikko ja viestikenttä kelluvat pyöristettyinä kortteina), Midnight (Glass tummissa väreissä), Bloom (pehmeä vaaleanpunainen, erittäin pyöristetty), Ember (lämmin oranssi Glass) ja Mono (mustavalkoinen, terävät kulmat). Teema on lähtökohta – valinnan jälkeen voit silti muuttaa mitä tahansa väriä tai asetusta yksitellen. Uudet widgetit alkavat Glass-teemalla; vaihtaminen on välitöntä kaikkialla, missä widget on upotettu, ilman koodimuutoksia sivustollasi.
• Kulmat ja fontti: Kaksi itsenäistä tyyliasetusta. Kulmat määrittää, kuinka pyöristettyjä paneeli, puhekuplat ja painikkeet ovat (Pyöreä, Pehmeä tai Terävä), ja Fontti valitsee kirjasintyypin, jonka vierailijat näkevät (Oletus, Serif, Pyöristetty tai Mono) – fontit tulevat vierailijan laitteelta, joten sivustollesi ei lataudu mitään ylimääräistä.
• Näytettävä nimi: Näkyy widgetin otsikossa.
• Logo: Lataa kuva, joka näkyy chatin yläosassa. Käytä yrityksesi logoa tai ystävällistä kasvokuvaa.
• Käynnistyskuvake: Kelluvan chat-painikkeen kuvake. Valitse yksi sisäänrakennetuista kuvakkeista (puhekupla, paperilennokki, kysymysmerkki jne.), käytä uudelleen lataamaasi logoa tai lataa oma erillinen kuvasi – kätevä, jos haluat näyttää kuvan tiimin jäsenestä tervehtimässä vierailijoita.
• Värit: Viisi väriä, joista jokainen nimeää widgetin osan, jonka se värittää. Brändiväri on kelluva painike, otsikko ja vierailijan omat viestit, ja Bränditeksti on sen päällä oleva teksti. Bottikupla on bottisi vastausten ja kirjoitusilmaisimen tausta, ja Bottikuplan teksti on niiden sisällä oleville sanoille ja animoiduille kirjoituspisteille. Chat-ikkuna on kaikkien viestien takana oleva paneeli. Valitse bottikuplan väri, joka eroaa selvästi brändiväristäsi – jos ne ovat samat, keskustelun molemmat puolet näyttävät samalta, eivätkä vierailijat erota bottisi vastauksia omista viesteistään. Vaaleanharmaa bottikupla tummalla tekstillä brändivärisi rinnalla on varma yhdistelmä.
• Sijainti: Aseta kelluva chat-painike oikeaan alakulmaan tai vasempaan alakulmaan, ja käytä vaaka- ja pystysuuntaista siirtymää (pikseleinä), jos se peittää jotain muuta sivullasi.
• Aloituskysymykset: Pikaehdotukset (napsautettavat painikkeet), jotka näkyvät chatissa, jotta vierailijat pääsevät alkuun yhdellä napautuksella kirjoittamisen sijaan – esimerkiksi “Mitkä ovat hintanne?” tai “Tarjoatteko tukea?” – enintään 10 kappaletta.
• Alatunniste: Valinnainen pieni oma tekstirivi viestikentän alla, esimerkiksi “Powered by Your Agency”. Se on oletuksena pois päältä, eikä viestikentän alla näy mitään, kun se on pois päältä. Kytke se päälle, kirjoita tekstisi (enintään 40 merkkiä) ja lisää halutessasi linkki, joka alkaa https://; tekstiä napsauttavat vierailijat avaavat kyseisen sivun uudessa välilehdessä. Toimistot käyttävät tätä lisätäkseen oman nimensä asiakkailleen rakentamiinsa widgeteihin.

Käyttäytyminen #

• Aloitusviesti: Ensimmäinen viesti, jonka kävijät näkevät avatessaan chatin (esimerkiksi “Miten voin auttaa?”).
• Ääni: Toista ääni, kun chattiin saapuu uusi viesti.
• Pyydä ilmoituslupaa: Kehota kävijöitä valinnaisesti sallimaan selainilmoitukset, jotta he saavat tiedon vastauksista, vaikka he olisivat vaihtaneet välilehteä.
• Aktiivinen ponnahduskupla: Valinnainen pieni kupla, joka ponnahtaa chat-painikkeen viereen kutsuakseen ihmisiä keskusteluun. Kytke se päälle määrittääksesi sen viestin, hyväksy/hylkää-painikkeiden tekstin sekä sen, kuinka monta sekuntia sen ilmestymistä odotetaan. Kupla sulkeutuu itsestään 20 sekunnin kuluttua, jos kävijä ei klikkaa sitä. Se on ainoa teksti, jonka widget näyttää chat-painikkeen lisäksi: painikkeen viereen ei ole asetusta pysyvälle tekstille.
• AI-vastauksen nopeus: Liukusäädin välillä Hitaampi (inhimillisempi — tekoäly pitää tauon ennen vastaamista) ja Maksiminopeus (robottimaisempi — vastaukset tulevat niin nopeasti kuin mahdollista). Tasapainoinen on keskellä. Vastauksen ensimmäinen viesti saapuu liukusäätimen asettaman viiveen mukaisesti, ja kirjoitusilmaisin näkyy hieman ennen sitä.
• Näytä varattu-ilmoitus tekoälyn työskennellessä: Pois päältä oletuksena. Kun vastaus kestää yli muutaman sekunnin, esimerkiksi koska agenttisi etsii tietoa toisesta järjestelmästä, kävijät näkevät lyhyen rivin kirjoituspisteiden vieressä: “Työstän vastaustasi” 5 sekunnin kuluttua, “Etsin sitä puolestasi” 15 sekunnin kuluttua, sitten “Työstän edelleen, melkein valmista” ja pahoittelun odotuksesta, jos se kestää pidempään. Nopeissa vastauksissa näkyvät edelleen vain pisteet. Rivi noudattaa widgetin kieltä, ja se näkyy vain silloin, kun tekoäly todella työskentelee vastauksen parissa, ei koskaan silloin, kun tekoäly on pois päältä kyseisessä chatissa tai ihminen on ottanut keskustelun hoitaakseen.

Kielet #

Widget on itsessään monikielinen – mitään ei tarvitse kytkeä päälle.

• Se valitsee vierailijan kielen automaattisesti. Ensin se tarkistaa kielen, jonka sivusi ilmoittaa HTML-koodissaan (<html lang="it">), ja jos sitä ei löydy, se käyttää vierailijan selaimen kieltä. Jos kumpikaan näistä ei ole tukemamme kieli, widgetin omat otsikot näkyvät sillä kielellä, jolla kirjoitit aloitusviestisi, ja aloitusviestisi, ponnahdusikkunasi ja aloituskeskustelusi näkyvät täsmälleen niin kuin ne kirjoitit.

• Sivun kieleen, joka on ristiriidassa tervehdyksesi kanssa, ei luoteta. Jotkin sivustonrakennustyökalut asettavat lang="en"-tunnisteen jokaiselle sivulle riippumatta sivuston kielestä. Kun sivu ilmoittaa yhden kielen ja olet kirjoittanut aloitusviestisi toisella, widget käsittelee sivun arvoa rakennustyökalun oletusarvona: se seuraa sen sijaan vierailijan selaimen kieltä, ja jos sekään ei ole tukemamme kieli, se käyttää kieltä, jolla kirjoitit. Sivua, joka vaihtaa lang-arvoaan, kun vierailija valitsee kielen sivustollasi, seurataan aina. Jos et halua luottaa tähän, lukitse kieli Käyttäytyminen-osiossa.

• Tai valitse kieli itse. Käyttäytyminen-osion Widgetin kieli -kenttä on oletusarvoisesti asetettu tilaan Auto, mikä tarkoittaa edellä mainittua tunnistusta. Valitse kieli kyseisestä kohdasta, niin widgetin omat otsikot (vierailijan lomakkeen Etunimi-, Sähköposti- ja Puhelin-kentät sekä niiden esimerkkitekstit, tietosuojailmoitus ja painikkeet) pysyvät kyseisellä kielellä riippumatta siitä, mitä sivu tai selain ilmoittaa. Käytä tätä, kun sivustonrakennustyökalusi ei ilmoita oikeaa kieltä tai kun haluat yhden kiinteän kielen jokaiselle vierailijalle.

• Tuetut kielet: englanti, hollanti, saksa, ranska, espanja, italia, portugali, romania, puola, arabia, suomi, filipino, sloveeni, thai, bangla, japani, norja (kirjanorja) ja turkki. Tämä on luettelo widgetin omille painikkeille ja otsikoille.

• Oikealta vasemmalle kirjoitettavat kielet näkyvät oikealta vasemmalle. Arabi-, heprea-, persia- ja urdukielisten vierailijoiden kohdalla koko chat-ikkuna peilautuu: otsikko, viestikuplat, kirjoituspisteet, vierailijan lomake ja viestikenttä alkavat oikealta. Kuplapainike pysyy valitsemassasi kulmassa. Heprean-, persian- ja urdunkieliset vierailijat näkevät otsikot englanniksi (tai valitsemallasi kielellä), mutta asettelu noudattaa silti heidän kieltään. Eri suunnassa kirjoitettu viesti, kuten englanninkielinen vastaus arabiankielisessä chatissa, luetaan silti oikeassa järjestyksessä.

• Viestisi käännetään puolestasi. Aina kun tallennat, aloitusviestisi, ennakoiva ponnahdusikkunasi ja aloituskeskustelusi käännetään kaikille kahdeksalletoista yllä mainitulle kielelle. Kirjoitat ne vain kerran, millä tahansa kielellä haluat: kirjoittamasi kieli tunnistetaan tekstistä itsestään, kyseinen versio säilytetään sanasta sanaan, ja kaikki muut kielet ovat sen käännöksiä. Sillä ei ole merkitystä, mikä kieli tilisi asetuksissa on valittuna.

• Kirjoita oma versiosi kielelle. Hallintapaneelin Käännökset-osio, aivan Käyttäytyminen-kohdan alapuolella, antaa sinun korvata automaattisen käännöksen omalla sanamuodollasi, esimerkiksi muodollisella espanjalla (“usted”), jos automaattinen käännös on epämuodollinen. Valitse kieli kohdasta Kieli ja täytä sitten jokin seuraavista: Aloitusviesti, Ponnahdusviesti, ponnahdusikkunan Hyväksy-teksti ja Hylkää-teksti (jotka näkyvät ponnahdusikkunan ollessa auki) sekä Aloituskeskustelut. Jokaisessa kentässä näkyy automaattinen käännös harmaalla; Aloita automaattisesta käännöksestä kopioi sen kenttään, jotta voit muokata sitä. Kaikki, minkä jätät tyhjäksi, säilyttää automaattisen käännöksen. Itse kirjoittamasi kielet on lueteltu ensimmäisenä ja merkitty tekstillä Oma sanamuotosi, ja Poista (kieli) sanamuotoni palauttaa kyseisen kielen automaattiseen käännökseen. Oma sanamuotosi säilyy, kun muokkaat alkuperäistä tekstiä myöhemmin; vain automaattiset käännökset tehdään uudelleen.

• Ponnahdusikkunan painikkeet käännetään myös. Ennakoivan ponnahdusikkunan Hyväksy- ja Hylkää-painikkeet käännetään muiden viestiesi mukana, joten espanjankielinen vierailija ei enää näe englanninkielisiä painikkeita.

• Kirjoita jokainen viesti vain yhdellä kielellä. Jos laitat samaan kenttään kaksi kieltä – esimerkiksi englanninkielisen rivin ja italiankielisen rivin – koko tekstiä käsitellään yhtenä viestinä ja se käännetään sellaisenaan, jolloin italiankielinen vierailija näkee saman lauseen kahdesti. Kirjoita se kerran, millä tahansa kielellä haluat.

• Tekoäly vastaa vierailijan kielellä. Riippumatta siitä, millä kielellä joku kirjoittaa, agenttisi vastaa samalla kielellä, riippumatta siitä, millä kielellä widgetin otsikot näkyvät. Jos haluat sen vastaavan aina yhdellä kiinteällä kielellä, määritä se agenttisi ohjeissa.

• Aseta kieli sivukohtaisesti upotuskoodissa. Käytätkö yhtä widgetiä englanninkielisellä sivustolla ja sen käännettyä kopiota? Lisää data-lang widgetin skriptitunnisteeseen jokaisella sivulla. data-lang="es" näyttää widgetin espanjaksi kyseisellä sivulla selaimen asetuksista riippumatta; data-lang="page" saa sen seuraamaan sivun omaa <html lang="...">-arvoa (joten lang="es-MX" tuottaa espanjan), vaikka avausviestisi olisi kirjoitettu toisella kielellä. Tämä asetus ohittaa Widgetin kieli -kentän, joka puolestaan ohittaa automaattisen tunnistuksen. Esimerkiksi:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" data-lang="page" defer></script>

Pidä hallintapaneelin upotuskoodi sellaisenaan ja lisää vain data-lang-attribuutti. Jos kyseessä on upotettu chat-paneeli, lisää data-lang kohtaan <div data-chat-widget="…">.

Vinkki: jos verkkosivustosi ei määritä lang-attribuuttia <html>-tunnisteessaan, lisää se. Se on vahvin merkki, jonka perusteella valitsemme oikean kielen, erityisesti ulkomailta selaaville vierailijoille.

Liidien kerääminen ja yksityisyys #

• Kerää kävijätiedot: Pois päältä oletuksena. Kun tämä on päällä, kävijöiltä kysytään nimi ja sähköpostiosoite (ja valinnaisesti puhelinnumero) ennen keskustelun alkua, jotta saat liidin talteen, vaikka he poistuisivat kesken chatin.
• Lomakkeen otsikko ja Lomakkeen alaotsikko: Mukauta lomakkeen yläpuolella näkyvää otsikkoa ja lyhyttä selitettä.
• Kerää puhelinnumero: Kytke päälle, jos haluat kysyä myös puhelinnumeroa; pois päältä -asetus kerää vain nimen ja sähköpostin.
• Kerää sukunimi: Pois päältä oletuksena. Kytke päälle lisätäksesi pakollisen Sukunimi-kentän heti etunimen jälkeen. Se tallennetaan yhteystietoihin sukunimenä, joten tekoälylläsi ja kaikella, mitä se etsii omista järjestelmistäsi, on käytettävissään koko nimi ensimmäisestä viestistä alkaen. Kävijöiltä, jotka täyttivät lomakkeen ennen kuin kytkit tämän päälle, ei kysytä sitä uudelleen.
• Lukemattomat vastaussähköpostit kävijöille: Kävijä, joka on jättänyt sähköpostiosoitteen eikä ole nähnyt vastaustasi 15 minuuttiin, saa sähköpostin, joka ohjaa hänet takaisin chattiin. Kytke se pois päältä kohdasta Asetukset → Ilmoitukset → Chat-widgetin kävijät. Katso Sähköpostit chat-widgetin kävijöille.

Vierailija jätti puhelinnumeron ja poistui sivustoltasi – voinko jatkaa WhatsAppissa? Kyllä. Avaa heidän keskustelunsa ja valitse Jatka WhatsAppissa kolmen pisteen valikosta (WhatsApp Web tai WhatsApp Business on oltava yhdistettynä). Your AI Connector luo linkitetyn WhatsApp-keskustelun samalle henkilölle, kopioi heidän nimensä, sähköpostinsa ja tietonsa, ja tekoäly siirtää aiemmin sivustolla käydyn keskustelun, joten kenenkään ei tarvitse toistaa itseään. Sivuston chat pysyy ennallaan ja molemmat keskustelut viittaavat toisiinsa yhteystietopaneelin kohdassa Linkitetyt keskustelut. Katso Chat-käyttöliittymä.

Vierailija jätti sähköpostiosoitteensa, mutta ei tehnyt varausta – voinko lähettää jatkoviestin sähköpostitse? Kyllä, automaation avulla. Luo yhteystieto -vaihe, jossa Kanavaksi on asetettu Sähköposti, muuttaa vierailijan jättämän osoitteen sähköpostiyhteystiedoksi yhdistetyssä Sähköpostikanavassasi, ja sen jälkeen tuleva Lähetä viesti -vaihe lähtee sähköpostina; vastaukset tulevat takaisin Chatit-osioon sähköpostiagenttiasi varten. Koko ohje, mukaan lukien se, miten sarja keskeytetään, kun he ilmoittavat tehneensä varauksen, löytyy kohdasta Automaatiot → Esimerkki: sähköpostin jatkoviestit verkkosivuston chat-liideille.

Voiko tekoälyagentti itse ehdottaa siirtymistä WhatsAppiin? Kyllä, eikä se vaadi erillistä ominaisuutta – yksi rivi agentin ohjeissa riittää. Luo lyhytlinkki WhatsApp-numeroosi esitäytetyllä viestillä, kuten “Hei, keskustelin sivustollanne ja haluaisin jatkaa tässä”, ja kerro sitten agentille, milloin se lähetetään, esimerkiksi: “Jos vierailija joutuu lähtemään, haluaa jatkaa myöhemmin tai kysyy WhatsAppia, ehdota siirtymistä sinne ja lähetä tämä linkki: (lyhytlinkkisi)”. Widgetin linkit ovat klikattavia, joten vierailija päätyy WhatsAppiin numerosi valittuna ja viesti esikirjoitettuna, ja heidän ensimmäinen viestinsä avaa WhatsApp-keskustelun postilaatikkoosi. Jos vierailija jätti widget-lomakkeessa puhelinnumeron, josta hän kirjoittaa (maakoodin kera), Your AI Connector linkittää keskustelut automaattisesti, ja WhatsAppin tekoäly tietää jo sivuston keskustelusta, aivan kuten Jatka WhatsAppissa -toiminnossa. Jos puhelinnumeroa ei kerätty, keskusteluja ei linkitetä, joten pidä esitäytetty viesti riittävän tarkkana, jotta WhatsApp-agentti tietää, mistä henkilö tuli.

• Vaadi tietosuojakäytännön hyväksyminen: Voit halutessasi vaatia vierailijoita hyväksymään tietosuojakäytäntösi ennen keskustelun aloittamista ja määrittää URL-osoitteen, johon se viittaa.

Mitä widget tallentaa vierailijan selaimeen, ja pitääkö se asettaa evästebannerin taakse? Mitään ei tallenneta pelkästään sivun lataamisen yhteydessä. Widget ei kirjoita evästeitä eikä käytä selaimen tallennustilaa ennen kuin vierailija päättää aloittaa keskustelun: lähettää ensimmäisen viestin, täyttää vierailijan tietolomakkeen tai hyväksyy tietosuojakäytäntösi. Siitä hetkestä alkaen se säilyttää satunnaisen keskustelutunnisteen ja kopion keskustelusta kyseisessä selaimessa ensimmäisen osapuolen tallennustilana omalla verkkotunnuksellasi, jotta keskustelu on edelleen tallella, kun vierailija palaa sivustolle. Se ei lataa analytiikka- tai seurantaskriptejä eikä aseta kolmannen osapuolen evästeitä. Koska mitään ei kirjoiteta ennen kuin vierailija pyytää keskustelua, se kuuluu vierailijan pyytämän palvelun kannalta välttämättömään tallennukseen, joten voit ladata sen ilman, että se on suostumusbannerin takana. Jos sivustosi käyttää joka tapauksessa suostumustyökalua, widgetin voi hyvin pitää sen takana; keskustelu ilmestyy näkyviin heti, kun vierailija antaa suostumuksensa.

Kanavat ja upotus #

• Liitepainike: Antaa vierailijoiden lähettää kuvia ja tiedostoja chatissa.
• Emoji-valitsin: Lisää emoji-valitsimen viestikentän viereen.
• Kanavalinkit: Voit halutessasi lisätä WhatsApp-, Instagram- tai Messenger-linkkejä, jotta vierailijat voivat jatkaa keskustelua haluamallaan alustalla. Tämä näkyy vasta, kun olet yhdistänyt WhatsApp-numeron (WhatsApp Business tai WhatsApp Web), Instagramin tai Messengerin. WhatsApp-linkin kytkeminen päälle täyttää yhdistetyn numerosi; linkki on muokattavissa, joten numeron vaihtamisen jälkeen voit kirjoittaa uuden numeron siihen.
• Toimintopainikkeet: Chatin yläreunassa oleva pikavalintarivi, joka ohjaa vierailijan muualle keskustelun sijaan – katso Toimintopainikkeet alta.
• Verkkotunnusten sallittujen luettelo: Rajoita, mitkä verkkosivustot saavat upottaa widgetisi. Lisää verkkotunnukset, joihin olet asentanut sen (esim. example.com tai *.example.com); jätä tyhjäksi, jos haluat sallia kaikki verkkotunnukset.
• Estetyt maat: Pidä widget poissa sellaisten maiden vierailijoilta, joita et palvele. Vierailijat, joiden verkkosijainti on valitsemassasi maassa, eivät koskaan näe widgetiä, ja kaikki heidän aloittamansa keskusteluyritykset hylätään. Jätä tyhjäksi, jos haluat sallia kaikki. Katso Bottien ja turhan käytön estäminen alta.
• Ohjaa nämä chatit: Valitse agentti, jonka tulisi käsitellä chatit, jotka tulevat kopioimastasi koodista. Jätä asetukseksi Tilin oletus, jos haluat käyttää normaalia chat-widgetin reititystä. Katso Eri sivujen ohjaaminen eri agenteille alta.
• Upotuskoodi: Valitse Kelluva kupla tai Upotettu ja kopioi asennuskoodi (katso alta).
• Asiakasdemolinkki: Liitä mikä tahansa verkkosivuston osoite ja napsauta Luo linkki saadaksesi jaettavan linkin, joka avaa kyseisen sivuston widgetisi kanssa ilman, että vastaanottajan tarvitsee asentaa mitään. Jokainen luomasi linkki listataan, ja voit kytkeä jokaisen niistä pois päältä. Katso Widgetin näyttäminen jonkun toisen verkkosivustolla alta.
• Jakolinkki: Valmis linkki, joka avaa avustajasi omalla sivullaan koko näytön tilassa ilman verkkosivustoa. Kopioi se ja lähetä minne tahansa. Katso Suoran linkin jakaminen chattiin alta.

Paneelin alaosassa oleva Poista chat-widget -toiminto poistaa widgetin verkkosivustoltasi välittömästi — tätä ei voi kumota, eivätkä vierailijat näe enää chat-kuplaa.

Toimintopainikkeet #

Jotkut vierailijat eivät halua chattailla. He haluavat puhelinnumerosi, osoitteesi tai sähköpostisi, ja he haluavat ne yhdellä napautuksella. Toimintopainikkeet ovat juuri tätä varten tarkoitettu pikavalintarivi chat-paneelin yläreunassa.

Lisää enintään kuusi painiketta. Jokaisella on otsikko (painikkeessa näkyvä teksti) ja kohde, ja kohde riippuu valitsemastasi toiminnosta:

Nämä painikkeet eivät kuluta krediittejä. Yhden napauttaminen ei lähetä viestiä eikä aloita keskustelua – se vain ohjaa vierailijan haluamaansa paikkaan. Vain varsinainen keskustelu tekoälyagenttisi kanssa kuluttaa krediittejä, aivan kuten ennenkin.

Muutama huomioitava asia:

• Painikkeet pysyvät näkyvissä vierailijan chattaillessa. Käyttäjä voi kysyä kaksi kysymystä ja napauttaa silti Reittiohjeet-painiketta lataamatta sivua uudelleen.
• Otsikkosi näkyvät täsmälleen kirjoittamassasi muodossa. Toisin kuin aloitusviestisi ja aloituskeskustelukysymyksesi, painikkeiden otsikoita ei käännetä automaattisesti. Jos palvelet vierailijoita useilla kielillä, pidä otsikot lyhyinä ja selkeinä (tai kirjoita ne pääkielelläsi).
• Täytä painikkeen tiedot oikein, muuten niitä ei tallenneta. Jos puhelinnumero, sähköpostiosoite tai linkki ei ole kelvollinen, paneeli ilmoittaa tästä ja estää Tallenna muutokset -toiminnon sen sijaan, että julkaisisi painikkeen, joka ei tee mitään.
• Nämä eivät ole UKK-vastauksia. Toimintopainikkeet ohjaavat ihmisiä vain muualle; ne eivät vastaa valmiilla tekstillä. Kysymykset ovat tekoälyagenttisi tehtävä, ja se vastaa niihin tietokantasi perusteella. Jos haluat ehdottaa, mitä kysyä, käytä Ulkoasu-kohdan aloituskeskustelukysymyksiä.

Mitä et voi mukauttaa #

Hallintapaneeli sisältää kaikki käytettävissä olevat asetukset. Erityisesti:

• Ei mukautettua CSS:ää tai tyylitiedostoa. Tyylittely rajoittuu siihen, mitä teema-, kulma-, fontti- ja värivalitsimet tarjoavat – et voi lisätä omaa CSS:ääsi widgetiin, eivätkä sivusi säännöt ulotu sen sisälle.
• Ei mukautettua paikkamerkkitekstiä viestikentässä.
• Ei videoiden upottamista chatin sisälle.

Jos jokin näistä on esteenä, sisäinen upotus antaa sinulle eniten hallintaa: widget sijaitsee omalla sivullasi olevassa säilössä, jonka koon ja sijainnin määrität itse.

Bottien ja krediittien kulutuksen estäminen #

Jokainen tekoälyn vastaus maksaa krediittejä, joten skripti (tai yksi tylsistynyt henkilö), joka avaa keskusteluja toisensa jälkeen verkkosivustollasi, on asia, jolta julkisen widgetin on suojauduttava. Widget hoitaa suurimman osan tästä itse, ja kaksi Hallinta-paneelin asetusta mahdollistavat sen tiukentamisen sivustollasi.

• Verkkotunnusten sallittujen luettelo. Vain listaamasi verkkosivustot voivat näyttää widgetin. Jos joku kopioi upotuskoodisi toiselle sivustolle, se ei toimi.
• Estetyt maat. Vierailijat, joiden verkkosijainti on estämässäsi maassa, eivät näe widgetiä, ja heidän aloittamansa keskusteluyritykset hylätään. Sijainti määritetään vierailijan yhteyden perusteella: VPN-yhteyttä käyttävä vierailija näkyy VPN-palvelimen maassa, ja vierailija, jonka sijaintia ei voida määrittää, päästetään läpi estämisen sijaan. Sovelluksen sisäinen esikatselu toimii edelleen, vaikka estäisit maan, jossa itse olet.
• Uudet keskustelut yhteyttä kohden. Yksi yhteys (käytännössä yksi kotitalous tai toimiston osoite) voi avata 20 uutta keskustelua päivässä widgetissä. Palaavat vierailijat, jotka jatkavat olemassa olevaa keskustelua, eivät kerrytä tätä määrää, vain täysin uudet keskustelut lasketaan. Näin skripti, joka yrittää jatkuvasti aloittaa uusia keskusteluja tekoälyvastausten kalasteluun, pysähtyy 20 keskustelun jälkeen, kun taas todelliset vierailijat eivät huomaa mitään. Jos monet ihmiset jakavat saman yhteyden sivustollasi (esim. kampus tai puhelinkeskus), voit nostaa määrää REST API:n kautta käyttämällä max_new_chats_per_ip_daily-arvoa; 0 kytkee tarkistuksen pois päältä.
• Ihmistarkistus (valinnainen). Vierailijat läpäisevät nopean Cloudflare Turnstile -tarkistuksen ennen ensimmäisen viestin lähettämistä, joten skriptit eivät voi aloittaa keskusteluja lainkaan. Useimpien ihmisten ei tarvitse klikata mitään; Cloudflare näyttää valintaruudun vain, jos se on epävarma. Se käyttää omia ilmaisia Turnstile-avaimiasi, katso Lisää ihmistarkistus alta.
• Sisäänrakennetut rajoitukset. Tämän lisäksi jokaisen selainistunnon viestien määrää on rajoitettu minuutti- ja päiväkohtaisesti, ja keskusteluun vastaava agentti lakkaa vastaamasta vierailijalle, kun se saavuttaa Max AI messages per chat -rajan, joka on asetettu Response limits -kohdassa.

Mikään tästä ei tunnista laitteita tai ihmisiä: widget ei tallenna mitään vierailijan selaimeen ennen kuin he päättävät aloittaa chatin (katso yllä), eikä sormenjälkien tunnistusta (fingerprinting) käytetä.

Lisää ihmistarkistus (Cloudflare Turnstile) #

Ota tämä käyttöön, jos botit avaavat jatkuvasti keskusteluja sivustollasi eivätkä yllä olevat asetukset riitä. Tarkistus suoritetaan kerran, juuri ennen kuin vierailijan ensimmäinen viesti lähetetään. Tarkistuksen läpäissyt vierailija voi jatkaa keskustelua 24 tuntia ilman, että tarkistus näkyy uudelleen, ja aiempaan keskusteluun palaava vierailija voi lukea sen ennen tarkistusta.

1. Kirjaudu Cloudflare-tilillesi (ilmainen tili riittää) ja avaa Turnstile.
2. Klikkaa Add widget, anna sille nimi ja lisää jokainen verkkotunnus, jolla chat-widgetisi toimii (esimerkiksi yourshop.com). Jätä widget-tila tilaan Managed.
3. Kopioi Cloudflaren näyttämä Site key ja Secret key.
4. Avaa sovelluksessa chat-widgetisi Manage-paneeli, kytke päälle Human check before chatting, liitä molemmat avaimet ja tallenna.

Mitä odottaa:

• Tarkistus pysyy pois päältä, kunnes molemmat avaimet on täytetty, joten sen kytkeminen päälle ilman avaimia ei estä vierailijoiden pääsyä.
• Jos vierailija epäonnistuu tarkistuksessa tai jättää sen tekemättä, viestiä ei lähetetä ja hän saa Retry-painikkeen.
• Tarkistus näkyy vain Cloudflaren asetuksiin lisäämilläsi verkkotunnuksilla. Muilla verkkotunnuksilla Cloudflare hylkää sen, eikä kukaan kyseisellä sivustolla voi lähettää viestiä, joten lisää jokainen verkkotunnus ennen kuin kytket toiminnon päälle.
• Jos verkkosivustosi käyttää Content Security Policy -käytäntöä, salli https://challenges.cloudflare.com skripteille ja kehyksille, muuten tarkistus ei lataudu.
• Avaimet ovat oman Cloudflare-tilisi avaimia, eikä salaista avainta (secret key) koskaan lähetetä vierailijoiden selaimiin.

Asennusohjeet #

Lisätäksesi chat-widgetin verkkosivustollesi, lisää yksi koodirivi sivustosi HTML-koodiin.

1. Avaa verkkosivustosi HTML-tiedosto tekstieditorissa.
2. Etsi sulkeva </body>-tunniste – se on yleensä aivan tiedoston lopussa.
3. Liitä tämä koodirivi juuri ennen </body>-tunnistetta, jotta sivusi muu sisältö latautuu ensin:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

4. Korvaa CONFIG_ID yksilöllisellä konfiguraatiotunnisteellasi, joka näkyy Hallinta-paneelin Kanavat ja upotukset (Channels & Embed) -osiossa. Tämä tunniste on tiliäsi vastaava ja yhdistää widgetin viestintäjärjestelmääsi.

Pätkä ei hidasta sivustoasi: se on pieni latausohjelma, ja itse widget latautuu taustalla estämättä sivun toimintaa. Jos haluat silti, että widget odottaa, kunnes sivu on latautunut kokonaan, voit kääriä saman URL-osoitteen sen sijaan näin:

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

Ja jos haluat viivästyttää pientä kutsuikkunaa widgetin lataamisen sijaan, se onnistuu yllä olevan Käyttäytyminen-osion Proaktiivinen ponnahdusikkuna -viiveellä – koodia ei tarvita.

Asennus Shopify-kauppaan #

1. Siirry Shopify-ylläpidossasi kohtaan Online Store > Themes.
2. Klikkaa nykyiseksi (julkaistuksi) teemaksi merkityn teeman kohdalla …-painiketta ja valitse Edit code. Luonnosversion tai teemakopion muokkaaminen ei muuta mitään live-kaupassasi.
3. Avaa layout/theme.liquid ja vieritä alas lähellä loppua olevaan </body>-tunnisteeseen.
4. Liitä asennusrivisi aivan </body>-tunnisteen yläpuolelle ja klikkaa Save:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Jos asensit widgetin ennen kuin asennusrivi sisälsi defer-tunnisteen, Shopifyn koodieditori näyttää sen alla punaisen alleviivauksen. Alleviivaus on Shopifyn koodintarkistimen varoitus skriptiriveistä, joista puuttuu defer tai async, ei virhe: teema tallentuu silti ja widget toimii normaalisti. defer-tunnisteen lisääminen yllä olevan mukaisesti poistaa alleviivauksen, eikä se muuta widgetin toimintaa, joten uudelleenasennus muille sivustoille ei ole tarpeen.

Tässä on täydellinen esimerkki siitä, miltä HTML-tiedostosi tulisi näyttää chat-widgetin toteutuksen jälkeen:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
</body>
</html>

Upottaminen sivun sisään (edistynyt) #

Jos haluat chatin näkyvän osana sivuasi – esimerkiksi erillisessä “Ota yhteyttä” -osiossa, ohjevälilehdessä tai sivupalkissa – kelluvan kuplan sijaan sivun kulmassa, vaihda Upotuskoodi (Embed snippet) -asetukseksi Upotettu (Inline) Hallinta-paneelissa ja kopioi upotuskoodi.

Se näyttää tältä:

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

<div> on liitospiste – chat-paneeli hahmonnetaan sen sisään ja se täyttää sen mitat. Muotoile div-elementti haluamallasi tavalla (anna sille kiinteä korkeus, sijoita se flex-säiliöön, aseta se ruudukon soluun jne.), niin chat-paneeli seuraa perässä.

Tarvitset sivulle vain yhden <script>-tunnisteen, vaikka upottaisit useita chat-widgetejä. Skripti etsii sivulta jokaisen <div data-chat-widget="…">-elementin ja liittää chat-paneelin jokaiseen niistä.

Milloin valita upotettu vs. kelluva:

• Kelluva kupla sopii sivustonlaajuiseksi, aina saatavilla olevaksi “Tarvitsetko apua?” -painikkeeksi.
• Upotettu chat sopii tilanteisiin, joissa chatin tulee sijaita tietyssä paikassa – tukisivulla, tietokannan sivupalkissa, sovelluksen sisäisessä ohjevälilehdessä – ja tuntua sivun luonnolliselta osalta.

Upotettu chat käyttää samaa konfiguraatiota kuin kelluva kupla (logo, aloitusviesti, liidien keruu, aloituskysymykset jne.), joten sinun ei tarvitse määrittää mitään kahdesti.

Näytä widget jonkun toisen verkkosivustolla #

Voit näyttää chat-widgetisi toiminnassa verkkosivustolla, jota et hallitse – ilman koodia tai pääsyä heidän sivustolleen. Se on nopein tapa näyttää potentiaaliselle asiakkaalle, miltä avustaja näyttäisi heidän omilla sivuillaan.

1. Avaa Hallinta-paneeli (Manage) ja vieritä kohtaan Kanavat ja upotukset (Channels & Embed).
2. Kirjoita Asiakasdemon linkki (Client demo link) -kenttään verkkosivuston osoite (esimerkiksi www.theircompany.com).
3. Valinnainen: valitse kentän alta Agentti (Agent), jonka tulisi vastata tässä demossa, esimerkiksi agentti, jonka loit potentiaalisen asiakkaan omilta verkkosivuilta, jotta se puhuu heidän palveluistaan, hinnoistaan ja usein kysytyistä kysymyksistään. Jätä valinnaksi Tilin oletus (Account default), jos haluat käyttää normaalia chat-widgetin reititystäsi.
4. Napsauta Luo linkki (Create link). Linkki kopioidaan puolestasi ja se ilmestyy kentän alapuolella olevaan luetteloon, jossa on Kopioi (Copy)- ja Avaa (Open) -painikkeet sekä tieto käytetystä agentista.
5. Lähetä linkki kenelle tahansa, jolle haluat näyttää sen.

Linkin avaaminen lataa kyseisen verkkosivuston siten, että chat-widgetisi kelluu sen päällä täsmälleen samalla tavalla kuin se näyttäisi asennettuna. Kuka tahansa, jolla on linkki, voi avata sen – mitään ei tarvitse kirjautua sisään.

Muutama huomioitava asia:

• Demosta tulevat keskustelut ovat aitoja. Viestit, jotka vierailija lähettää demossa, saapuvat postilaatikkoosi, agenttisi vastaa niihin, ja ne kuluttavat krediittejä kuten mikä tahansa muukin keskustelu.
• Sivu on bränditön. Se näyttää heidän verkkosivustonsa ja sinun widgetisi, ei mitään muuta.
• Kaikkia verkkosivustoja ei voi kehystää. Jotkin sivustot (pankit, suuret vähittäiskauppiaat ja kaikki tiukkojen suojausasetusten takana olevat sivustot) estävät muita sivuja näyttämästä niitä. Kun näin käy, linkki toimii silti: se näyttää todellisen sivuston sijasta neutraalin valeselainikkunan, jonka päällä widgetisi on aktiivisena, joten demo toimii edelleen.
• Se ei muuta heidän verkkosivustoaan. Mitään ei asenneta eikä mitään muuteta – demo on olemassa vain kyseisen linkin sisällä.
• Kytke linkki pois päältä, kun demo on ohi. Napsauta linkin vieressä olevaa Kytke pois päältä -painiketta luettelossa ja vahvista. Tästä eteenpäin jokainen linkin avaava näkee sivun, jossa kerrotaan linkin olevan pois päältä. Widgetisi ja muut demolinkkisi toimivat edelleen. Pois kytkettyä linkkiä ei voi kytkeä takaisin päälle; luo sen sijaan uusi.
• Ennen 25. syyskuuta 2026 kopioidut linkit. Ennen luettelon olemassaoloa luodut demolinkit eivät näy siinä. Ne toimivat edelleen, kunnes napsautat luettelon alla olevaa Kytke ne pois päältä -painiketta, joka kytkee ne kaikki kerralla pois päältä (ja Kytke ne takaisin päälle kumoaa tämän).

Ilman agenttia luotu demolinkki käyttää tilisi oletusreititystä riippumatta siitä, miksi Ohjaa nämä keskustelut -asetus on määritetty. Kun agentti on valittu, jokainen kyseisestä linkistä tuleva keskustelu osoitetaan kyseiselle agentille ja se vastaa siihen. Widget säilyttää oman ulkoasunsa, nimensä ja aloitusviestinsä. Linkki sisältää sen muodossa &agent=AGENT_ID; sen lisääminen käsin vanhempaan linkkiin toimii myös (käytä &, älä ?, koska linkki sisältää jo ?).

Jos poistat myöhemmin agentin, jota demolinkki käyttää, linkki toimii edelleen: sen chatit ohjautuvat tilisi oletusreititykseen, ja luettelossa näkyy sen vieressä teksti “poistettu agentti, käyttää oletusta”. Chat-widgetin oletusagentin poistaminen ei vaikuta linkkeihin, jotka on kiinnitetty toiseen agenttiin.

Jaa suora linkki chattiin #

Joskus widgetiä ei ole mahdollista lisätä verkkosivustolle – haluat ehkä antaa jollekulle linkin, jotta hän voi keskustella avustajasi kanssa välittömästi. Jokaisella chat-widgetillä on sellainen:

1. Avaa Hallinta-paneeli ja vieritä kohtaan Kanavat ja upotukset.
2. Etsi Jakolinkki (se sijaitsee heti Asiakasdemon linkin alapuolella).
3. Napsauta Kopioi saadaksesi linkin tai Avaa kokeillaksesi sitä itse.

Sen avaaminen näyttää vain avustajasi koko näytön kokoisena – taustalla ei ole verkkosivustoa, ei klikattavaa kuplaa, eikä mitään asennettavaa. Lisää se Instagram-bioosi, lentolehtisen QR-koodiin, sähköpostin allekirjoitukseen tai WhatsApp-viestiin potentiaaliselle asiakkaalle.

Jakolinkki noudattaa chat-widgetisi oletusreititystä. Jos haluat avata keskustelun tietyn agentin kanssa, lisää linkin loppuun ?agent=AGENT_ID; jokainen kyseisestä linkistä tuleva keskustelu osoitetaan tällöin kyseiselle agentille ja se vastaa siihen, samalla kun sivu säilyttää widgetisi nimen ja aloitusviestin.

Muutama huomioitava asia:

• Linkin kautta tulevat chatit ovat aitoja. Ne saapuvat postilaatikkoosi, agenttisi vastaa niihin, ja ne kuluttavat krediittejä kuten mikä tahansa muu keskustelu.
• Sivu ei sisällä meidän brändäystämme. Se näyttää vain avustajasi, eikä se näy hakutuloksissa.
• Se toimii omassa osoitteessasi. Jos palveluntarjoajasi käyttää sovellusta omalla verkkotunnuksellaan, linkki käyttää myös kyseistä osoitetta, joten siinä ei näy mitään vierasta.
• Yksi kävijä per linkki, per selain. Kuka tahansa, joka avaa sen, säilyttää saman identiteetin kyseisessä selaimessa, joten myöhemmin palaaminen jatkaa samaa keskustelua sen sijaan, että aloittaisi uuden. Eri selain tai eri widgetin linkki tarkoittaa eri kävijää.

Lähetä eri sivut eri agenteille #

Oletusarvoisesti jokainen widgetin kautta tuleva chatti käsitellään saman agentin toimesta. Voit ohittaa tämän sivukohtaisesti, jolloin hinnoittelusivullasi olevat vierailijat puhuvat myyntiagentillesi, kun taas ohjesivullasi olevat vierailijat puhuvat tukiagentillesi – kaikki saman chat-widgetin kautta.

Koodin voi hankkia kahdella tavalla:

• Agentin kautta. Napsauta AI-agentit-sivulla rivin </>-painiketta tai avaa agentti ja siirry sen Sisääntulopisteet-välilehdelle. Kummassakin tapauksessa saat kopioitavan koodinpätkän, joka on jo osoitettu kyseiselle agentille.

  Agentin Sisääntulopisteet-välilehdellä on myös Verkkosivuston chat-widget -paneeli, joka näyttää, kuinka monta verkkosivuston chatia kyseinen agentti jo käsittelee. Upotuksesta tulevat chatit tavoittavat agentin suoraan, joten sinun ei tarvitse luoda niille sisääntulopistesääntöä – agentti, jolla ei ole lainkaan sääntöjä, vastaa silti upotukseensa.

  </>-painike näkyy vain aktiivisilla agenteilla. Keskeytetty agentti vastaanottaisi chatin, mutta ei koskaan vastaisi, joten vaihtoehto on piilotettu, kunnes kytket sen takaisin päälle. Agentille ei tarvitse määrittää kanavaa – agentti voi poimia chatin miltä tahansa kanavalta.

• Widgetin asetuksista. Aseta chat-widgetin kohdassa Asetukset → Kanavat → Hallitse kohta Ohjaa nämä chatit kohteeseen ja kopioi sen alla oleva koodinpätkä. Pudotusvalikon muuttaminen kirjoittaa koodinpätkän uudelleen.

Kelluva koodinpätkä sisältää kohteen osoitteessa:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></script>

Upotettu koodinpätkä sisältää sen sen sijaan kohdassa <div>, joten yhdellä sivulla voi olla useita chatteja, jotka menevät eri paikkoihin:

<div data-chat-widget="CONFIG_ID" data-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Ennen kampanjoiden käytöstä poistamista kopioidut koodinpätkät sisältävät ?campaign= tai data-campaign=. Ne toimivat edelleen, joten niitä ei tarvitse kopioida uudelleen.

Muutama huomioitava asia:

• Käytä kopiointipainiketta sen sijaan, että kirjoittaisit tunnisteen käsin. Jos tunniste ei vastaa tilisi agenttia, chatti toimii silti, mutta palaa käyttämään oletusreititystäsi.
• Henkilö, joka on jo keskustelun keskellä, pysyy sen henkilön kanssa, jonka kanssa hän aloitti, vaikka hän päätyisi myöhemmin sivulle, joka osoittaa muualle. Tämä estää keskustelua vaihtamasta persoonallisuutta kesken kaiken.
• Sivukohtainen kohde on ensisijainen tilin oletusasetukseen ja avainsanalaukaisijoihin nähden.

Kerro widgetille, kuka vierailija on (edistynyt) #

Jos sijoitat chat-widgetin jäsenalueelle, asiakasportaaliin tai sovellukseen, johon käyttäjät ovat jo kirjautuneet, sivustosi tietää jo, keitä he ovat. Voit välittää nämä tiedot widgetille, jotta vierailijalta ei kysytä tietoja, jotka hän on jo antanut, ja jotta tekoälysi voi hyödyntää jo olemassa olevaa tietoa hänestä.

Lisää pieni asetuslohko ennen widget-skriptiä:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Sivustosi tulisi täyttää nämä arvot palvelinpuolella sen mukaan, kuka on kirjautuneena sisään.

Jos haluat tallentaa myös sukunimen, lisää last_name kohdan name viereen visitor-lohkossa (data-visitor-last-name upotetussa versiossa). Se on valinnaista: nimi ja sähköpostiosoite riittävät edelleen lomakkeen ohittamiseen, riippumatta siitä, onko Kerää sukunimi päällä vai ei.

Tapahtuu kaksi asiaa:

• “Ennen kuin aloitamme…” -lomake ohitetaan. Kun nimi ja sähköpostiosoite on annettu, vierailija siirtyy suoraan keskusteluun, ja nämä tiedot tallennetaan hänen yhteystietoihinsa aivan kuin hän olisi itse ne kirjoittanut.
• Kaikki kohdan data alla oleva välitetään tekoälyllesi. Kaikki, mitä siihen lisäät — tilaus, tilausnumero, uusimispäivä, saldo, paikkojen määrä — tulee osaksi tekoälyn tietämystä kyseisestä henkilöstä. Näin se voi vastata kysymykseen “milloin tilaukseni uusiutuu?” ilman, että sen tarvitsee ensin kysyä, kuka käyttäjä on. Käytä kenttien nimiä, jotka tuntuvat sinusta järkeviltä; ne näkyvät yhteystiedoissa mukautettuina kenttinä (Custom Fields). Voit lähettää enintään 20 arvoa, jotka päivittyvät jokaisen viestin mukana, joten jos tilaus muuttuu kesken keskustelun, tekoäly näkee uudet tiedot.

Upotettujen (inline) widgetien kohdalla voit lisätä samat tiedot sen sijaan kohtaan <div>, mikä on kätevää, kun yhdellä sivulla on useita chat-ikkunoita:

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Jos sivustosi tietää vierailijan henkilöllisyyden vasta sivun latautumisen jälkeen — esimerkiksi yhden sivun sovelluksessa (SPA), jossa kirjautuminen tapahtuu ilman sivun uudelleenlatausta — kutsu tätä aina, kun tiedot ovat saatavilla, niin widget päivittää itsensä:

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

Muutama huomioitava asia:

• Jos kaksi eri henkilöä kirjautuu sisään samalla tietokoneella, toinen heistä aloittaa uuden keskustelun sen sijaan, että näkisi ensimmäisen keskustelun. Widget huomaa henkilön vaihtumisen ja nollaa itsensä.
• Tämä on tarkoitettu kontekstia varten, ei sisäänkirjautumiseen. Keskustelut pidetään edelleen erillään kuten aina ennenkin, joten id välittäminen ei salli kenenkään avata toisen henkilön keskustelua, ja eri laitetta tai selainta käyttävä henkilö aloittaa siellä uuden keskustelun. Jos haluat jatkaa keskustelua laitteiden välillä, allekirjoita id seuraavassa kuvatulla tavalla.
• Tämä on valinnaista. Tavallisella julkisella sivulla oleva widget ei tarvitse mitään tästä ja toimii täsmälleen kuten ennenkin.

Jatka samaa keskustelua millä tahansa laitteella (allekirjoitettu vierailijan tunnus) #

Jos asiakkaillasi on tilit, voit saada keskustelun seuraamaan heitä: kirjaudu sisään puhelimella, jatka kannettavalla tietokoneella, ja kyseessä on sama keskustelu saman yhteyshenkilön kanssa postilaatikossasi, ja tekoäly tietää edelleen kaiken, mitä on sanottu. Tätä varten Your AI Connector tarvitsee todisteen siitä, että vierailija on todella se, kuka sivusi sanoo hänen olevan. Muuten kuka tahansa voisi kirjoittaa asiakasnumeron selaimeensa ja lukea kyseisen asiakkaan keskustelun. Todiste on allekirjoitus, jonka lasket palvelimellasi.

1. Etsi widgetin Hallinta-paneelista kohdasta Kanavat ja upotukset (Channels & Embed) kohta Kirjautuneet vierailijat (Signed-in visitors) ja napsauta Luo salaisuus (Generate secret). Kopioi tunnistautumissalaisuus. Säilytä se vain palvelimellasi; älä koskaan lisää sitä itse sivulle.

2. Kun palvelimesi muodostaa sivun kirjautuneelle asiakkaalle, laske kyseisen asiakkaan tunnuksesta HMAC-SHA256-tiiviste käyttäen salaisuutta, pienenä heksadesimaalimerkkijonona:

// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()

3. Aseta tunnus ja tiiviste asetuksiin sen nimen ja sähköpostiosoitteen viereen, jotka välität jo valmiiksi:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Upotettu widget käyttää samaa arvoa kuin data-visitor-hash kohdassa <div>, ja window.chatWidget.setVisitor({ visitor: { id, hash } }) toimii sovelluksissa, jotka kirjautuvat käyttäjiä sisään ilman sivun uudelleenlatausta.

Mitä tapahtuu, kun allekirjoitus on tarkistettu:

• Asiakkaan keskustelu tallennetaan hänen tilinsä alle selaimen sijaan, joten se on sama keskustelu jokaisella laitteella ja selaimella, joilla hän on kirjautuneena, ja yksi yhteyshenkilö postilaatikossasi.
• Hänen aiemmat viestinsä latautuvat uudelle laitteelle, ja tekoäly jatkaa siitä, mihin hän jäi.
• Jos allekirjoitus on väärä, widget toimii hiljaa kuten ennenkin, tavallisena selainkohtaisena keskusteluna, ja tulostaa syyn selaimen konsoliin, jotta kehittäjä voi huomata sen. Vierailijasi eivät koskaan näe virhettä.
• Tunnus verrataan täsmälleen sellaisena kuin lähetit sen, joten allekirjoita sama arvo, jonka välität muodossa id, ja käytä samaa tunnusta samalle henkilölle kaikkialla.

Kaksi asiaa, jotka on hyvä tietää:

• Luo uudelleen -painike hallintapaneelissa antaa sinulle uuden salaisuuden. Sivut, jotka allekirjoittavat edelleen vanhalla salaisuudella, palaavat normaaleihin selainkohtaisiin keskusteluihin, kunnes palvelimesi käyttää uutta salaisuutta. Olemassa olevat keskustelut säilyvät; ne on sidottu asiakkaan tunnukseen, ei salaisuuteen.
• Keskustelu, jonka joku kävi ennen sisäänkirjautumista anonyyminä vierailijana, pysyy erillisenä keskusteluna. Tilipohjainen keskustelu alkaa ensimmäisestä viestistä, jonka he lähettävät sisäänkirjautuneena.

Muuta widgetin asetuksia omasta koodistasi (API) #

Kaikki widgetin Hallinta-paneelin asetukset voidaan muuttaa myös REST API -rajapinnan kautta, mikä on kätevää, jos hallinnoit useita verkkosivustoja tai haluat poistaa liitetiedostopainikkeen käytöstä automaattisesti asiakasta varten. Lähetä PATCH osoitteeseen https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID API-avaimesi ja vain ne kentät, joita haluat muuttaa — esimerkiksi {"show_upload_button": false} piilottaa liitetiedostopainikkeen, {"show_emoji_button": false} piilottaa emojivalitsimen ja {"launcher_icon": "chat-dots"} vaihtaa käynnistinkuvakkeen. CONFIG_ID on sama tunniste kuin upotusskriptissäsi. Täydellinen luettelo hyväksytyistä kentistä (nimi, avausviesti, värit, käynnistinkuvake, sallitut verkkotunnukset, vierailijatietolomake, tietosuojailmoitus, teema, kulmien ja fontin tyyli) löytyy API-viitteestä kohdasta Chat Widget. Verkkosivustot ottavat muutokset käyttöön seuraavan sivun latauksen yhteydessä.

Mitä odottaa asennuksen jälkeen #

Kun olet lisännyt skriptin verkkosivustollesi, chat-widget luo automaattisesti chat-painikkeen sivustosi kulmaan (oletuksena oikeaan alakulmaan). Widget pysyy kiinteässä paikassa käyttäjien selatessa sivujasi, mikä varmistaa, että se on aina käytettävissä.

Kun vierailijat klikkaavat tätä painiketta, se laajenee koko chatin ikkunaksi, jossa he voivat aloittaa keskustelun ja nähdä avausviestisi. Jos Kerää vierailijan tiedot on päällä, näkyviin tulee ensin pieni lomake, jossa kysytään nimeä ja sähköpostia (ja mahdollisesti puhelinnumeroa) ennen kuin he voivat kirjoittaa.

Chat-käyttöliittymä mukautuu automaattisesti eri näytön kokoihin, joten se toimii saumattomasti sekä pöytäkoneilla että mobiililaitteilla.

Toteutuksen testaaminen #

Kun olet lisännyt widgetin sivustollesi, testaa sen toimivuus:

1. Avaa verkkosivustosi selaimessa.
2. Avaa widget napsauttamalla chat-painiketta.
3. Lähetä testiviesti ja varmista, että saat vastauksen.
4. Toista testi toisella laitteella tai selaimella varmistaaksesi, että se toimii kaikkialla.

Jos chat-widget ei näy sivustollasi, tarkista seuraavat asiat:

1. Varmista, että korvasit CONFIG_ID-tunnisteen todellisella konfiguraatiotunnisteellasi.
2. Varmista, että skriptitunniste on sijoitettu ennen sulkevaa </body>-tunnistetta.
3. Tarkista koodi kirjoitusvirheiden varalta.
4. Varmista Shopifyssa, että muokkasit julkaistua teemaa ja klikkasit Save. Luonnosversioon tai kopioituun teemaan tehdyt muutokset eivät koskaan näy live-kaupassasi.

Yrityksen palomuurin takana #

Jos widget latautuu julkisesti, mutta ei henkilökunnalle toimiston verkossa, verkko estää lähes varmasti verkkotunnuksen, josta se latautuu. Pyydä IT-tiimiäsi sallimaan seuraavat tavallisen HTTPS-yhteyden kautta portissa 443:

• Upotuskoodisi verkkotunnus — osoite <script src="...">-rivillä, jonka kopioit hallintapaneelista.
• api.youraiconnector.com — widget lähettää viestinsä myös tänne.

Muuta ei tarvitse avata: ei ylimääräisiä portteja eikä saapuvia sääntöjä. Jos widget ei vieläkään näy tämän jälkeen, avaa selaimesi kehittäjäkonsoli kyseisellä sivulla ja lähetä meille sen raportoimat tiedot — estetty pyyntö nimeää hylätyn verkkotunnuksen, mikä on yleensä koko vastauksen avain.