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 ilme — 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 tapahtuu välittömästi kaikkialla, missä widget on upotettu, ilman koodimuutoksia sivustollasi.
• Kulmat ja fontti: Kaksi toisistaan riippumatonta tyyliasetusta. Kulmat määrittää, kuinka pyöristettyjä paneeli, kuplat ja painikkeet ovat (Pyöreä, Pehmeä tai Terävä), ja Fontti valitsee kirjasintyypin, jonka kävijät näkevät (Oletus, Serif, Pyöristetty tai Mono) — fontit tulevat kävijän 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 jokin sisäänrakennetuista kuvakkeista (chat-kupla, paperilennokki, kysymysmerkki jne.), käytä uudelleen lataamaasi logoa tai lataa erillinen oma kuvasi — kätevää, jos haluat näyttää kuvan tiimin jäsenestä tervehtimässä kävijöitä.
• Värit: Viisi väriä, joista jokainen nimeää widgetin osan, jonka se värittää. Brändiväri on kelluva painike, otsikko ja kävijän omat viestit, ja Brändin teksti 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ä kävijät erota bottisi vastauksia omista viesteistään. Vaaleanharmaa bottikupla tummalla tekstillä brändivärisi vieressä on varma yhdistelmä.
• Sijainti: Aseta kelluva chat-painike oikeaan alakulmaan tai vasempaan alakulmaan, ja määritä vaaka- ja pystysuuntainen siirtymä (pikseleinä), jos se peittää jotain muuta sivullasi.
• Aloituskysymykset: Pikavastausehdotukset (napsautettavat painikkeet), jotka näkyvät chatissa, jotta kävijät pääsevät alkuun yhdellä napautuksella kirjoittamisen sijaan — esimerkiksi “Mitkä ovat hintanne?” tai “Tarjoatteko tukea?” — enintään 10 kappaletta.

Käyttäytyminen #

• Tervehdysviesti: Ensimmäinen viesti, jonka kävijät näkevät avatessaan chatin (esimerkiksi “Kuinka voin auttaa?”).
• Ääni: Toista ääni, kun chattiin saapuu uusi viesti.
• Pyydä ilmoituslupaa: Kehota kävijöitä sallimaan selainilmoitukset, jotta he saavat tiedon vastauksista, vaikka he olisivat vaihtaneet välilehteä.
• Aktiivinen ponnahduskupla: Valinnainen pieni kupla, joka ponnahtaa chat-painikkeen viereen kutsuakseen kävijöitä keskusteluun. Ota se käyttöön määrittääksesi sen viestin, hyväksy/hylkää-painikkeiden tekstin sekä sen, kuinka monta sekuntia sen ilmestymistä odotetaan. Kupla piiloutuu itsestään 20 sekunnin kuluttua, jos kukaan ei klikkaa sitä (tämä luku on kiinteä), ja kun kävijä klikkaa Ei nyt, se pysyy poissa loppukäynnin ajan. Itse chat-ikkuna ei koskaan avaudu itsestään: se avautuu, kun kävijä klikkaa chat-painiketta tai kuplaa, ja pysyy auki, kunnes kävijä sulkee sen.
• Tekoälyn vastausnopeus: Liukusäädin välillä Hitaampi (inhimillisempi — tekoäly pitää tauon ennen vastaamista) ja Maksiminopeus (robottimaisempi — vastaukset tulevat mahdollisimman nopeasti). Tasapainotettu on keskivälillä.

Kielet #

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

• Se valitsee kävijän kielen automaattisesti. Ensin se tarkistaa sivusi HTML-koodissa ilmoitetun kielen (<html lang="it">), ja jos sitä ei löydy, se käyttää kävijän selaimen kieltä. Jos kumpikaan ei ole tukemamme kieli, se näyttää englannin.
• Tai valitse kieli itse. Käyttäytyminen-osion Widgetin kieli -kenttä on oletuksena asetettu tilaan Automaattinen, mikä tarkoittaa yllä mainittua tunnistusta. Valitse kieli tästä, niin widgetin omat tekstit (kävijälomakkeen Etunimi-, Sähköposti- ja Puhelin-kentät sekä niiden esimerkkitekstit, tietosuojailmoitus, painikkeet) pysyvät kyseisellä kielellä riippumatta sivun tai selaimen asetuksista. Käytä tätä, jos sivuston rakennustyökalusi ei ilmoita oikeaa kieltä tai jos haluat yhden kiinteän kielen kaikille kävijöille.
• Tuetut kielet: englanti, hollanti, saksa, ranska, espanja, italia, portugali, romania, puola, arabia, suomi ja filipino. Tämä on lista widgetin omille painikkeille ja teksteille.
• Viestisi käännetään puolestasi. Aina kun tallennat, tervehdysviestisi, aktiivinen ponnahduskupla ja aloitusviestit käännetään kaikille kahdelletoista yllä mainitulle kielelle. Kirjoitat ne vain kerran, millä tahansa haluamallasi kielellä.
• Kirjoita jokainen viesti vain yhdellä kielellä. Jos laitat samaan kenttään kaksi kieltä — esimerkiksi englanninkielisen ja italiankielisen rivin — koko teksti käsitellään yhtenä viestinä ja käännetään sellaisenaan, jolloin italialainen kävijä näkee saman lauseen kahdesti. Kirjoita se kerran, millä tahansa haluamallasi kielellä.
• Tekoäly vastaa kävijän kielellä. Riippumatta siitä, millä kielellä joku kirjoittaa, agenttisi vastaa samalla kielellä, riippumatta siitä, millä kielellä widgetin tekstit näkyvät. Jos haluat sen vastaavan aina yhdellä kiinteällä kielellä, määritä se agenttisi ohjeissa.

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ää vierailijan tiedot: Pois päältä oletuksena. Kun tämä on päällä, vierailijoilta kysytään nimi ja sähköpostiosoite (ja valinnaisesti puhelinnumero) ennen keskustelun alkamista, jotta saat liidin talteen, vaikka he poistuisivat kesken keskustelun.
• 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.

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ä.

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.
• Emojivalitsin: Lisää emojivalitsimen 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, Instagramin tai Messengerin.
• 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.
• Ohjaa nämä chatit kohteeseen: Valitse kampanja tai agentti, jonka tulisi käsitellä kopioimastasi koodista tulevat chatit. Jätä asetukseksi Tilin oletus, jos haluat käyttää normaalia chat-widgetin reititystä. Katso Lähetä eri sivut eri kampanjoihin alta.
• Upotuskoodi: Valitse Kelluva kupla tai Upotettu ja kopioi asennuskoodi (katso alta).
• Asiakasdemon linkki: Liitä mikä tahansa verkkosivun osoite saadaksesi jaettavan linkin, joka avaa kyseisen sivuston widgetisi kanssa – vastaanottajan ei tarvitse asentaa mitään. Katso Näytä widget jonkun toisen verkkosivustolla 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 tyylitiedostoja. Ulkoasu määräytyy teeman, kulmien, fontin ja värivalintojen mukaan — et voi lisätä omaa CSS:ää widgetiin, eivätkä sivusi säännöt vaikuta sen sisälle.
• Ei mukautettua paikkamerkkitekstiä viestikentässä.
• Ei maa- tai maantieteellisiä rajoituksia. Verkkotunnusten sallittujen luettelo rajoittaa sitä, mitkä sivustot voivat upottaa widgetin; sitä ei voi näyttää tai piilottaa kävijän sijainnin perusteella. Jos tarvitset tätä, piilota upotuskoodi itse niiltä sivuilta tai niiltä yleisöiltä, joille et halua sitä näyttää.
• Ei videoiden upottamista chatin sisälle.
• Ei automaattista piilotusajastinta. Kutsukupla katoaa itsestään 20 sekunnin kuluttua, eikä tätä lukua voi muuttaa; avoin chat-ikkuna ei sulkeudu koskaan itsestään. Jos kupla peittää sivusi sisältöä, siirrä widgetiä Sijainti-siirtymillä tai kytke kupla pois päältä ja käytä vain käynnistyspainiketta.

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.

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"></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.

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"></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 ja vieritä kohtaan Kanavat ja upotus.
2. Kirjoita kohtaan Asiakasdemon linkki verkkosivuston osoite (esimerkiksi www.theircompany.com).
3. Napsauta Kopioi kopioidaksesi linkin tai Avaa nähdäksesi sen itse ensin.
4. Lähetä linkki henkilölle, 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 chatit ovat aitoja. Viestit, jotka kävijä lähettää demossa, saapuvat postilaatikkoosi ja agenttisi vastaa niihin, ja ne käyttävät krediittejä kuten mikä tahansa muu keskustelu.
• Sivu on bränditön. Se näyttää heidän verkkosivustonsa ja sinun widgetisi, ei mitään muuta.
• Jotkin verkkosivustot eivät salli kehystämistä. Useat sivustot (pankit, suuret vähittäiskaupat, kaikki tiukkojen suojausasetusten takana olevat sivustot) estävät muita sivuja näyttämästä niitä. Kun näin tapahtuu, linkki toimii silti: se näyttää neutraalin valeselainikkunan todellisen sivuston sijaan, ja widgetisi on aktiivisena sen päällä, 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ä.

Demolinkki käyttää aina tilisi oletusreititystä, riippumatta siitä, mihin Ohjaa nämä chatit kohteeseen on asetettu. Jos haluat, että demochatit käsittelee tietty agentti, aseta kyseinen agentti ensin chat-widgetisi oletukseksi.

Lähetä eri sivut eri kampanjoihin #

Oletusarvoisesti jokainen widgetin kautta tuleva chat käsitellään saman kampanjan tai agentin toimesta. Voit ohittaa tämän sivukohtaisesti, jolloin hinnoittelusivullasi vierailevat keskustelevat myyntikampanjasi kanssa, kun taas ohjesivullasi vierailevat keskustelevat tukiagenttisi kanssa – kaikki samasta chat-widgetistä.

Koodin voi hankkia kahdella tavalla:

• Kampanjasta tai agentista. Avaa Kampanjat-sivulla kampanjan ⋮-valikko ja valitse Lisää verkkosivustolle. Napsauta Agentit-sivulla rivin </>-painiketta tai avaa agentti ja siirry sen Sisääntulopisteet-välilehdelle. Kummallakin tavalla saat valmiiksi kopioitavan koodinpätkän, joka on jo määritetty kyseiselle kampanjalle tai 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.

  Lisää verkkosivustolle näkyy vain kampanjoissa, jotka ovat käynnissä ja määritetty käsittelemään saapuvia keskusteluja. Luonnoskampanja ei voi vielä vastaanottaa kävijöitä, joten vaihtoehto on piilotettu, kunnes julkaiset sen. Agentit-sivulla se näkyy aktiivisilla agenteilla. Keskeytetty agentti vastaanottaisi keskustelun, mutta ei koskaan vastaisi siihen, joten vaihtoehto on piilotettu, kunnes kytket sen takaisin päälle. Agentille ei tarvitse määrittää kanavaa – agentti voi poimia keskustelun mistä tahansa kanavasta.

• Widgetin asetuksista. Kohdassa Asetukset → Kanavat → Hallitse chat-widgetissäsi, määritä Ohjaa nämä keskustelut 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?campaign=CAMPAIGN_ID"></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-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Agentin kohdalla sanamuoto muuttuu muotoon ?agent=AGENT_ID tai data-agent="AGENT_ID".

Muutama huomioitava asia:

• Käytä kopiointipainiketta sen sijaan, että kirjoittaisit tunnisteen käsin. Jos tunniste ei vastaa tilisi kampanjaa tai agenttia, chat toimii silti, mutta palaa tilisi oletusreititykseen.
• Henkilö, joka on jo keskustelun keskellä, pysyy sen henkilön kanssa, jonka kanssa hän aloitti, vaikka hän myöhemmin päätyisi sivulle, joka osoittaa muualle. Tämä estää keskustelua vaihtamasta persoonallisuutta kesken kaiken.
• Sivukohtainen kohde on ensisijainen tilisi oletusasetukseen ja avainsanalaukaisimiin 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"></script>

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

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 samalta tietokoneelta, jälkimmäinen aloittaa uuden keskustelun sen sijaan, että näkisi ensimmäisen henkilön chatin. Widget huomaa henkilön vaihtumisen ja nollaa itsensä.
• Tämä on tarkoitettu kontekstia varten, ei sisäänkirjautumiseen. Keskustelut pidetään edelleen erillään kuten ennenkin, joten id-tietojen välittäminen ei salli kenenkään avata toisen henkilön chattia, ja toista laitetta tai selainta käyttävä henkilö aloittaa siellä uuden keskustelun.
• Tämä on vapaaehtoista. Tavallisella julkisella sivulla oleva widget ei tarvitse mitään näistä ja toimii täsmälleen kuten ennenkin.

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-kohdan todellisella konfiguraatiotunnisteellasi.
2. Varmista, että skriptitunniste on sijoitettu ennen sulkevaa </body>-tunnistetta.
3. Tarkista koodi kirjoitusvirheiden varalta.

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.