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 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 ei ole tukemamme kieli, widgetin omat otsikot näkyvät englanniksi, ja aloitusviestisi, ponnahdusikkunasi sekä aloituskysymyksesi näkyvät täsmälleen niin kuin olet ne kirjoittanut.
• Tai valitse kieli itse. Behavior-osion Widget language -kenttä on oletuksena asetettu tilaan Auto, mikä tarkoittaa edellä mainittua tunnistusta. Valitse kieli kyseisestä kohdasta, niin widgetin omat otsikot (vierailijalomakkeen 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ä, jos sivustosi rakennustyökalu ei ilmoita oikeaa kieltä tai jos haluat yhden kiinteän kielen kaikille vierailijoille.
• Tuetut kielet: englanti, hollanti, saksa, ranska, espanja, italia, portugali, romania, puola, arabia, suomi, filipino, sloveeni, thai, bangla ja japani. Tämä on luettelo widgetin omille painikkeille ja otsikoille.
• Viestisi käännetään puolestasi. Aina kun tallennat, aloitusviestisi, proaktiivinen ponnahdusikkunasi ja aloituskysymyksesi käännetään kaikille kuudelletoista yllä mainitulle kielelle. Kirjoitat ne vain kerran, millä tahansa haluamallasi kielellä: 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 kukin viesti vain yhdellä kielellä. Jos laitat samaan kenttään kaksi kieltä – esimerkiksi englanninkielisen ja italiankielisen rivin – koko sisältöä käsitellään yhtenä viestinä ja se käännetään sellaisenaan, jolloin italialainen vierailija näkee saman lauseen kahdesti. Kirjoita se kerran, millä tahansa haluamallasi kielellä.
• 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ä tämä 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ä). DM Champ 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), DM Champ 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, 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 minkä tahansa verkkotunnuksen.
• 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 yrittämänsä keskustelut hylätään. Jätä tyhjäksi, jos haluat sallia kaikkien pääsyn. Katso Bottien ja krediittien kulutuksen estäminen alta.
• Ohjaa nämä keskustelut: Valitse kampanja tai agentti, jonka tulisi käsitellä kopioimastasi koodista tulevat keskustelut. Jätä asetukseen 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).
• Asiakkaan esittelylinkki: Liitä mikä tahansa verkkosivun osoite saadaksesi jaettavan linkin, joka avaa kyseisen sivuston widgetisi kanssa – vierailijan 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 tyylitiedostoa. Tyyli määräytyy teeman, kulmien, fontin ja värivalitsimien mukaan – et voi lisätä omaa CSS:ääsi widgetiin, eivätkä sivusi säännöt vaikuta sen sisälle.
• Ei mukautettua paikkamerkkitekstiä viestikentässä.
• Ei videon upotusta chatin sisällä.
• 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 poista kupla käytöstä ja jätä vain käynnistyspainike.

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. Kukaan, joka kopioi upotuskoodisi toiselle sivustolle, ei saa mitään näkyviin.
• Estetyt maat. Vierailijat, joiden verkkosijainti on estämässäsi maassa, eivät koskaan näe widgetiä, ja heidän yrittämänsä keskustelut hylätään. Sijainti määritetään vierailijan yhteyden perusteella: VPN:ää käyttävä näkyy VPN-maan mukaisesti, ja vierailija, jonka sijaintia ei voida määrittää, päästetään läpi estämisen sijaan. Oma esikatselusi sovelluksessa 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 jatkuvasti aloittaa uusia keskusteluja tekoälyvastausten kalasteluun, kuivuu 20 keskustelun jälkeen, kun taas todelliset vierailijat eivät huomaa mitään. Jos monet ihmiset jakavat saman yhteyden sivustollasi (esim. kampus tai puhelinkeskus), nosta lukua REST API:n kautta käyttämällä max_new_chats_per_ip_daily; 0 kytkee tarkistuksen pois päältä.
• Sisäänrakennetut rajoitukset. Tämän lisäksi jokaisen selainistunnon viestien määrää on rajoitettu minuutissa ja päivässä, ja chatia vastaava agentti lakkaa vastaamasta vierailijalle, kun se saavuttaa Max AI-viestiä per chat -rajan, joka on asetettu sen Vastausrajoitukset-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ä.

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.dmchamp.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.dmchamp.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.dmchamp.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.dmchamp.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.dmchamp.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.dmchamp.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.dmchamp.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.dmchamp.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 DM Champ 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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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.dmchamp.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.