Tekoäly-chatbotin asennus verkkosivuille: 6 vaihetta
Asenna tekoäly-chatbot verkkosivuille oikein. Ohjeet skriptiin, Tag Manageriin, WordPressiin ja Shopifyhin sekä testaukseen ja ylläpitoon.
Jarkko Oksanen · Perustaja ja teknologiajohtaja 
Tekoäly-chatbotin asentaminen verkkosivuille tarkoittaa yleensä toimittajan skriptin, lisäosan tai sovelluksen lisäämistä sivustolle. Pelkkä koodin julkaisu ei silti ole valmis käyttöönotto. Ennen avaamista pitää päättää, millä sivuilla chatbot näkyy, mitä se saa käsitellä, milloin se ohjaa ihmiselle ja miten tuloksia mitataan.
Tässä oppaassa viet asennuksen tuotantoon kuudessa vaiheessa. Ohje on platformista riippumaton, koska WordPressin, Shopifyn, tagienhallinnan ja itse rakennetun sivuston toteutustavat eivät ole keskenään samoja.
Jos olet vasta valitsemassa ratkaisua, aloita chatbot yritykselle -oppaasta. Jos toimittaja on jo valittu ja asennustunnus tai valmis koodinpätkä on saatavilla, jatka tästä.
Ennen asennusta: kerää nämä tiedot
Pyydä chatbotin toimittajalta tai oman organisaatiosi pääkäyttäjältä:
- tuotanto- ja testiympäristön tunnukset, jos ne ovat erilliset
- toimittajan ajantasainen asennusohje ja alkuperäinen koodinpätkä
- lista selaimessa ladattavista verkkotunnuksista Content Security Policya varten
- tieto käytetyistä evästeistä, paikallisesta tallennuksesta ja seurannasta
- käsiteltävät henkilötiedot, alikäsittelijät, säilytysajat ja datan sijainti
- tuetut analytiikkatapahtumat tai ohjelmointirajapinta
- poistamis- ja palautusohje
Älä kopioi verkosta löytyvää esimerkkiskriptiä tuotantoon. Oikea osoite, sivustotunnus, ympäristö ja lataustapa ovat toimittajakohtaisia. Myös skriptin paikka <head>- tai <body>-osassa määräytyy toimittajan ohjeen mukaan.
Vaihe 1: päätä missä ja kenelle chatbot näkyy
Asennuksen laajuus vaikuttaa sekä hyötyyn että riskiin. Määrittele vähintään:
- Näkyykö chatbot koko sivustolla vai vain valituilla sivuilla?
- Näkyykö se kirjautuneille käyttäjille, asiakasportaalissa tai maksuvaiheessa?
- Mitkä kielet ja maat kuuluvat ensimmäiseen julkaisuun?
- Onko mobiilinäkymässä tilaa avauspainikkeelle ilman, että se peittää muita toimintoja?
- Milloin keskustelu siirtyy ihmiselle ja mihin kanavaan?
Hyvä ensimmäinen julkaisu voi kattaa esimerkiksi tuote-, palvelu- ja yhteydenottosivut. Rajattu julkaisu helpottaa virheiden havaitsemista ennen koko sivuston avaamista.
Jos käytössä on suostumuksenhallinta, päätä yhdessä tietosuojasta vastaavan henkilön kanssa, saako chatbot latautua ennen käyttäjän valintaa. Ratkaisu riippuu siitä, mitä teknologioita widget käyttää ja mihin tarkoitukseen tietoja käsitellään. Kaikkia chatbotteja ei voi luokitella samalla tavalla.
Vaihe 2: määritä sisältö, rajat ja ulkoasu
Tee nämä päätökset ennen kuin widget tuodaan sivustolle:
- hyväksytyt tietolähteet ja niiden omistajat
- aiheet, joihin chatbot ei saa vastata
- epävarman vastauksen toimintamalli
- yhteystietojen kerääminen ja pakolliset kentät
- siirto myynnille tai asiakaspalvelulle
- tervehdys, avauskysymykset ja kieliversiot
- värit, sijainti, kuvake ja saavutettava nimi
Testaa, että chatbot kertoo käyttäjälle olevansa automaattinen palvelu. Älä anna sen pyytää tarpeettomia henkilötietoja tai käsitellä arkaluonteisia asioita ilman erikseen suunniteltua prosessia.
Mira AI:n tuotesivulla näet yhden toteutustavan, jossa yrityksen omat sisällöt, liidien kerääminen ja keskustelun jatkotoimet yhdistetään. Tuotteen soveltuvuus pitää silti arvioida oman sivuston, käyttötarkoituksen ja tietosuojavaatimusten perusteella.
Vaihe 3: valitse oikea asennuspolku
Yhtä kaikille sopivaa tapaa ei ole. Valitse reitti sen mukaan, kuka ylläpitää sivustoa, miten julkaisut hyväksytään ja tarvitseeko näkyvyyttä muuttaa ilman koodijulkaisua.
A. Skripti suoraan sivuston koodiin
Suora asennus sopii itse rakennettuun sivustoon tai tilanteeseen, jossa kehittäjä hallitsee yhteistä sivupohjaa.
- Tee oma kehityshaara tai käytä testiympäristöä.
- Lisää toimittajan antama koodinpätkä täsmälleen dokumentoituun paikkaan.
- Käytä yhteistä layoutia tai sivupohjaa, älä kopioi skriptiä jokaiselle sivulle.
- Lisää tarvittavat verkkotunnukset Content Security Policyyn mahdollisimman rajatusti.
- Julkaise ensin testiympäristöön ja tarkista selaimen konsoli sekä verkkopyynnöt.
Älä lisää async- tai defer-määritteitä omin päin. Ne voivat parantaa latauskäyttäytymistä, mutta ne voivat myös rikkoa toimittajan määrittelemän käynnistysjärjestyksen. Noudata dokumentaatiota ja mittaa vaikutus.
Suora koodiasennus on yleensä versionhallittava ja helposti katselmoitava. Haittana on, että näkyvyyden muuttaminen vaatii tavallisen julkaisuprosessin.
B. Google Tag Manager tai muu tagienhallinta
Tagienhallinta sopii organisaatiolle, jolla on jo hallittu tagien julkaisuprosessi. Se ei automaattisesti tee asennuksesta nopeampaa tai tietosuojan kannalta oikeaa.
- Luo chatbotille oma tagi toimittajan ohjeen mukaisesti.
- Määritä laukaisin valituille sivuille tai koko sivustolle.
- Kytke suostumusehdot käyttämänne consent-ratkaisun mukaan.
- Testaa esikatselutilassa, että tagi laukeaa kerran ja vain tarkoitetuilla sivuilla.
- Nimeä versio selkeästi, pyydä tarvittava hyväksyntä ja julkaise.
Tarkista, ettei sama skripti ole jo sivuston koodissa, toisessa tagissa tai lisäosassa. Kaksinkertainen lataus voi näyttää kaksi widgetiä, lähettää tapahtumia kahdesti tai aiheuttaa JavaScript-virheitä.
Tagienhallinnan etu on hallittu kohdennus ja nopea keskeytys. Haittana on, että sivuston toiminnallinen osa voi jäädä markkinointitagien käyttöoikeuksien ja julkaisukäytäntöjen varaan.
C. WordPress
WordPressissä sopiva tapa riippuu teemasta, palveluntarjoajasta ja siitä, tarjoaako chatbot-toimittaja virallisen lisäosan.
Virallinen lisäosa: Jos toimittajalla on ylläpidetty lisäosa, asenna se WordPressin hallinnasta tai toimittajan ohjeen mukaan. Tarkista tekijä, päivityshistoria, yhteensopivuus nykyisen WordPress-version kanssa ja lisäosan pyytämät oikeudet. Syötä sivustotunnus vain lisäosan omaan asetukseen.
Skriptien hallintalisäosa: Jos virallista lisäosaa ei ole, hyväksytty header- tai footer-skriptien hallintalisäosa voi olla teematiedostojen muokkaamista ylläpidettävämpi ratkaisu. Rajaa käyttäjäoikeudet ja dokumentoi, mihin kohtaan koodi lisättiin.
Teema tai oma lisäosa: Kehittäjä voi lisätä skriptin lapsiteemaan tai sivuston omaan lisäosaan WordPressin hookien avulla. Älä muokkaa aktiivisen pääteeman tiedostoja suoraan hallinnan Theme Editorissa, sillä teemapäivitys voi poistaa muutoksen ja syntaksivirhe voi rikkoa sivuston.
Välimuisti- ja optimointilisäosat voivat siirtää, yhdistää tai viivästää JavaScriptiä. Tyhjennä välimuistit ja testaa sekä kirjautuneena että uloskirjautuneena. Jos widget ei käynnisty, rajaa sen skripti optimoinnin ulkopuolelle vain toimittajan ohjeella.
D. Shopify
Shopifyssa vaihtoehdot riippuvat siitä, onko ratkaisulle sovellus ja käytetäänkö Online Store 2.0 -teemaa.
Shopify-sovellus ja app embed: Jos toimittaja tarjoaa vahvistetun sovelluksen, asenna se Shopify App Storesta tai toimittajan asennuslinkillä. Tarkista pyydetyt oikeudet. Ota app embed käyttöön teemaeditorissa, määritä asetukset ja tallenna.
Teeman koodi: Jos käytössä on vain skripti, kopioi nykyinen teema varmuuskopioksi. Lisää toimittajan koodi theme.liquid-tiedostoon juuri siihen kohtaan, jonka dokumentaatio määrää. Esikatsele kopiota ennen julkaisua.
Älä oleta, että verkkokaupan pääteemaan lisätty widget näkyy Shopifyn kassalla, asiakastilisivuilla tai muissa rajatuissa näkymissä. Näiden laajennettavuus riippuu Shopify-paketista, käytetyistä checkout-laajennuksista ja käyttöoikeuksista. Testaa kaupan etusivu, kokoelma, tuotesivu ja ostoskori erikseen.
E. Wix, Squarespace, Webflow ja muut sivukoneet
Etsi alustan virallisesta ohjeesta custom code-, code injection- tai integraatioasetus. Valikon nimi ja käyttöoikeus voivat muuttua paketin tai alustaversion mukaan.
Tarkista ennen julkaisua:
- hyväksyykö kenttä JavaScriptin vai vain HTML:n
- lisätäänkö koodi head- vai body-osaan
- voiko koodin rajata tietyille sivuille
- vaatiiko ominaisuus maksullisen paketin
- suodattaako alusta ulkoisia skriptejä
Jos alustalla on toimittajan virallinen integraatio, vertaa sen päivityksiä, oikeuksia ja poistettavuutta suoraan skriptiasennukseen.
Vaihe 4: tarkista tietosuoja ja tietoturva
Chatbotin käyttöönotto tuo verkkosivulle uuden tiedonkäsittelyketjun. Tarkistus ei rajoitu evästebanneriin.
Varmista ainakin:
- mikä on henkilötietojen käsittelyn tarkoitus ja oikeusperuste
- mitä keskusteluista, laitetiedoista ja yhteystiedoista tallennetaan
- missä data sijaitsee ja ketkä ovat alikäsittelijöitä
- kuinka kauan keskusteluja ja lokitietoja säilytetään
- miten käyttäjä voi käyttää tietosuojaoikeuksiaan
- kenellä on pääsy hallintaan ja käytetäänkö monivaiheista tunnistautumista
- miten tiedot poistetaan sopimuksen päättyessä
Päivitä tietosuojaseloste ja tarvittaessa evästeasetukset ennen tuotantojulkaisua. Tee vaikutustenarviointi, jos käsittely todennäköisesti aiheuttaa korkean riskin rekisteröidyille. Oikea arvio riippuu käyttötarkoituksesta ja datasta, ei siitä, kutsutaanko työkalua chatbotiksi.
Lisää käytännön tarkistuksia löydät oppaasta GDPR-yhteensopiva tekoäly-chatbot.
Vaihe 5: testaa ennen tuotantojulkaisua
Tee kirjallinen hyväksymistesti. Pelkkä widgetin avautuminen työpöytäselaimessa ei riitä.
Toiminnallinen testaus
- chatbot avautuu ja sulkeutuu hiirellä sekä näppäimistöllä
- avauspainike ei peitä evästebanneria, ostoskorin painiketta tai mobiilinavigaatiota
- sovitut kielet käynnistyvät oikein
- kymmenen tärkeintä asiakaskysymystä saa hyväksyttävän vastauksen
- tuntemattomaan kysymykseen ei keksitä vastausta
- linkit osoittavat oikeille sivuille
- yhteystietojen validointi ja suostumustekstit toimivat
- siirto ihmiselle, sähköpostiin, kalenteriin tai CRM:ään toimii
- virhetilanne kertoo käyttäjälle, miten hän voi jatkaa
Testaa vähintään nykyisillä Chrome-, Safari-, Firefox- ja Edge-versioilla sekä yhdellä iOS- ja Android-laitteella. Käytä selaimen yksityistä tilaa suostumuspolun ja ensikäynnin testaamiseen.
Suorituskyky
Mittaa sama sivu ennen asennusta ja sen jälkeen samalla menetelmällä. Tarkkaile erityisesti LCP-, INP- ja CLS-mittareita, JavaScriptin määrää, pääsäikeen työtä ja ulkoisia verkkopyyntöjä.
Chatbot voi olla asynkronisesti ladattu ja silti kuluttaa selaimen resursseja tai siirtää näkymää. Jos vaikutus on liian suuri, selvitä toimittajan kanssa voiko widgetin ladata vuorovaikutuksesta, suostumuksesta tai lyhyen viiveen jälkeen. Ratkaisun pitää säilyttää käyttökokemus ja mittauksen eheys.
Tietoturva
Tarkista selaimen konsolista virheet ja varmista, ettei sivustotunnuksen lisäksi julkaista salaisia avaimia. Selainkoodiin upotettu arvo on käyttäjän nähtävissä, joten palvelinpuolen API-avaimet eivät kuulu widgetin asetuksiin. Testaa myös, ettei vapaamuotoinen syöte päädy CRM:ään tai sähköpostiin vaarallisena HTML:nä.
Vaihe 6: julkaise, mittaa ja sovi ylläpito
Julkaise ensin rajatulle liikenteelle tai valituille sivuille, jos tekninen ratkaisu tukee sitä. Seuraa ensimmäisinä päivinä:
- lataus- ja JavaScript-virheitä
- keskustelujen aloituksia
- ratkaistuja asioita ja siirtoja ihmiselle
- laadukkaita liidejä ja sovittuja tapaamisia
- keskeytyksiä kriittisissä kohdissa
- sivuston suorituskykymittareita
- käyttäjien ja asiakaspalvelun palautetta
Pelkkä keskustelujen määrä ei kerro onnistumisesta. Valitse mittarit käyttötarkoituksen mukaan. Myynnissä tärkeä mittari voi olla hyväksytty liidi tai varattu tapaaminen. Asiakaspalvelussa se voi olla oikein ratkaistu asia, onnistunut siirto tai toistuvien yhteydenottojen väheneminen.
Analytiikan toteutus
Sovi yhtenäiset tapahtumanimet, esimerkiksi widgetin avaus, keskustelun aloitus, yhteystietojen lähetys, tapaamisen varaus ja siirto ihmiselle. Lähetä analytiikkaan vain mittaamiseen tarvittavat tiedot. Älä vie viestin sisältöä, sähköpostiosoitetta tai puhelinnumeroa analytiikkatapahtuman parametreihin.
Estä kaksinkertainen mittaus. Jos chatbot-toimittaja lähettää tapahtuman sekä suoraan analytiikkaan että sivuston data layeriin, valitse yksi hallittu reitti tai deduplikoi tapahtumat. Dokumentoi, missä konversio syntyy ja kuka omistaa raportin.
Ylläpito
Nimeä omistaja sisällölle, tekniselle asennukselle, tietosuojalle ja tulosten seurannalle. Käy kuukausittain läpi tärkeimmät epäonnistuneet kysymykset, vanhentuneet linkit, ihmiskäsittelyyn siirtyneet aiheet ja konversiopolut. Tarkista neljännesvuosittain käyttöoikeudet, tietolähteet, säilytysajat, integraatiot ja suorituskyky.
Testaa muutokset testiympäristössä aina, kun teema, tagienhallinta, suostumusalusta tai chatbotin konfiguraatio muuttuu. WordPress- ja Shopify-päivitykset voivat muuttaa latausjärjestystä tai näkymää, vaikka chatbotin omaa koodia ei olisi muutettu.
Tee palautussuunnitelma ennen julkaisua
Palautus ei saa riippua siitä, että alkuperäinen asentaja on tavoitettavissa.
- Suora skripti: palauta edellinen koodiversio tai poista keskitetty script-komponentti ja julkaise.
- Tagienhallinta: keskeytä chatbot-tagi ja julkaise uusi säiliöversio. Varmista, ettei skriptiä ole myös sivustokoodissa.
- WordPress: poista tagi käytöstä tai deaktivoi virallinen lisäosa. Teeman kautta tehty asennus palautetaan versionhallinnasta tai lapsiteemasta.
- Shopify: poista app embed käytöstä tai julkaise ennen muutosta kopioitu teema. Poista sovellus vasta, kun datan vienti- ja poistotarpeet on tarkistettu.
Widgetin poistaminen sivulta ei välttämättä poista jo kerättyä dataa, integraatioita tai käyttäjätilejä. Käsittele tekninen palautus ja tietojen elinkaaren päättäminen erillisinä tehtävinä.
Asennuksen tarkistuslista
Ennen kuin avaat chatbotin kaikille, varmista:
- näkyvät sivut, kielet ja käyttäjäryhmät on rajattu
- sisältölähteet, kielletyt aiheet ja siirto ihmiselle on testattu
- asennustapa ja omistaja on dokumentoitu
- tietosuojaseloste, sopimukset ja suostumuslogiikka on tarkistettu
- mobiili, selaimet, saavutettavuus ja virhetilanteet on testattu
- suorituskyky on mitattu ennen ja jälkeen
- analytiikkatapahtumat eivät sisällä henkilötietoja
- palautus on testattu tai vähintään kirjattu vaihe vaiheelta
- ylläpidolle on nimetty vastuuhenkilöt ja tarkistusrytmi
Haluatko asentaa Miran sivustollesi?
Hyvä käyttöönotto yhdistää teknisen asennuksen, rajatun sisällön, tietosuojan, testauksen ja jatkuvan seurannan. Kun nämä on sovittu, itse julkaisu on hallittu osa kokonaisuutta.
Jos haluat nähdä, miten Mira AI toimisi omalla sivustollasi, ota yhteyttä ja suunnitellaan käyttöönotto.
