Chatbot WordPress-sivulle – asennusopas 2026

Chatbot lisätään WordPress-sivulle yleensä yhdellä skriptillä eli lyhyellä koodinpätkällä. Voit asentaa sen teeman head-kenttään, erilliseen header-lisäosaan tai Elementorin HTML-lohkoon. Aihiossa rakennat chatbotin ensin omilla verkkosivutiedoillasi ja kopioit sitten upotuskoodin WordPressiin, samaan tapaan kuin analytiikan tai evästehallinnan skriptin. Tärkeintä on asentaa koodi paikkaan, joka latautuu kaikilla niillä sivuilla, joilla chatbotin pitää näkyä. Tarkista samalla suostumuskäytännöt, sivuston välimuisti, mobiilinäkymä ja mahdollinen Content Security Policy (CSP) eli selaimen turvasääntö, joka voi estää ulkopuoliset skriptit. Ilmainen Aihio-tili riittää ensimmäiseen kokeiluun, joten asennusta voi testata ennen maksullista pakettia. Hyvä testi kattaa sivuston tietokoneella ja puhelimella sekä vähintään kolme oikeaa asiakaskysymystä. Jos käytössä on evästebanneri, testaa myös hyväksytty ja hylätty suostumus. Näin löydät ongelmat ennen kuin asiakkaat näkevät ne. Tässä oppaassa käymme läpi asennustavat ilman koodausta: mitä koodi tekee, miten testaat chatbotin ennen julkaisua ja mitä teet, jos se ei näy sivulla.

Nopein tapa: WordPress-sivustoille on virallinen Aihio Chatbot -lisäosa, joka liittää chatbotin yhdellä napsautuksella ilman koodia. Katso WordPress-lisäosan ohje. Tämä opas kattaa manuaalisen asennuksen, joka sopii kaikkiin julkaisujärjestelmiin.

Ennen kuin aloitat

Tarvitset:

• Ylläpitäjän käyttöoikeudet WordPress-hallintapaneeliin
• Aihio-tilin (ilmainen tili riittää)
• Brändivärisi valmiina (pääväri + tekstiväri chatbotille)

Kirjaudu Aihioon ja syötä verkkosivusi osoite. Tekoäly lukee sivustosi sisällön ja luo siitä tietopohjan eli aineiston, josta chatbot hakee vastauksensa. Tämä kestää muutamasta sekunnista pariin minuuttiin sivuston koosta riippuen. Kun tietopohja on valmis, siirry kohtaan Asetukset → Upotus ja kopioi koodi talteen.

Koodi näyttää tältä:

<script>
  window.AihioWidget =
    window.AihioWidget ||
    function () {
      (window.AihioWidget.q = window.AihioWidget.q || []).push(
        [].slice.call(arguments),
      );
    };
  AihioWidget("init", { chatbotId: "your-chatbot-id" });
  (function () {
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://aihio.ai/widget/aihio-loader.js";
    document.head.appendChild(s);
  })();
</script>

Tapa 1: Lisää koodi teemaan (suoraviivaisin)

WordPressin perusasennuksessa voit lisätä koodin kahdella tavalla.

Vaihtoehto A: Ulkoasu → Mukauta → Lisäasetukset → Head-koodi

Jos teemasi sallii head-koodin muokkaamisen mukautusnäkymässä (useimmat nykyteemat sallivat), käytä sitä. Lisäät koodin vain kerran, ja se säilyy teemapäivitysten yli.

1. Avaa Ulkoasu → Mukauta

   Klikkaa yläpalkista “Mukauta”. Etsi valikosta “Lisäasetukset” tai “Custom Code”. Kohdan nimi vaihtelee teemoittain.

2. Liitä koodi head-kenttään

   Avaa “Head” tai “Header scripts” -kenttä ja liitä Aihion <script>-pätkä. Tallenna.

3. Päivitä sivu ja testaa

   Siirry verkkosivustollesi ja odota muutama sekunti. Chatbot-ikkuna ilmestyy oikeaan alakulmaan.

Vaihtoehto B: Lisäosa (esim. “Insert Headers and Footers”)

Jos teemasi ei tue head-muokkausta, asenna ilmainen lisäosa kuten Insert Headers and Footers (WPCode) tai Head, Footer and Post Injections. Liitä Aihion koodi lisäosan “Header”-kenttään.

Tapa 2: Elementor + Custom HTML

Jos sivustosi on rakennettu Elementorilla, voit lisätä chatbotin yksittäiselle sivulle tai koko sivustolle.

1. Yksittäinen sivu

   Muokkaa sivua Elementorilla, lisää “HTML”-widget ja liitä koodi sen sisään. Chatbot näkyy vain tällä sivulla.

2. Globaalisti kaikilla sivuilla

   Elementor Pro -käyttäjät: mene kohtaan Mallit → Teemarakennus → Header, avaa header-template ja lisää HTML-widget headerin sisälle. Koodi suoritetaan nyt jokaisella sivulla.

Tapa 3: WordPress-lisäosa

Jos hallitset skriptejä WordPress-lisäosalla, valitse sellainen, joka säilyttää koodin teemapäivitysten yli ja jolla voit rajata näkyvyyden sivukohtaisesti. Seuraa Aihion muutoslokia, jos haluat tietää uusista WordPressiin liittyvistä julkaisuista.

Mikä asennustapa kannattaa valita?

Valitse tapa sen mukaan, kuka ylläpitää sivustoa ja missä chatbotin pitää näkyä.

Useimmille pienille yrityssivustoille luonteva valinta on header-lisäosa. Se ei vaadi teeman tiedostojen muokkaamista, ja koodin voi myöhemmin poistaa samasta paikasta.

GDPR ja suostumus

Chatbot tallentaa selaimen paikallismuistiin (local storage) muutaman avaimen: keskustelun tunnisteen ja istunnon tilan. Ne eivät ole evästeitä, mutta toteutuksesta ja kontekstista riippuen niitä voidaan silti pitää verkkotunnisteina. Tarkista asia organisaatiosi DPIA:ssa eli tietosuojaa koskevassa vaikutustenarvioinnissa. Monet suostumusalustat käsittelevät silti kaikkia kolmannen osapuolen skriptejä samalla tavalla.

Cookiebotin, Complianzin ja muiden kanssa

Useimmat suomalaiset WordPress-sivustot käyttävät suostumuksen hallintaan Complianzia tai Cookiebottia. Molemmat osaavat ladata skriptin ehdollisesti:

Jos linjaat, että chatbot vaatii suostumuksen, merkitse latauskoodi suostumuksen taakse:

<!-- Complianz: odota suostumusta ennen lataamista -->
<script type="text/plain" data-category="functional">
  window.AihioWidget =
    window.AihioWidget ||
    function () {
      (window.AihioWidget.q = window.AihioWidget.q || []).push(
        [].slice.call(arguments),
      );
    };
  AihioWidget("init", { chatbotId: "your-chatbot-id" });
  (function () {
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://aihio.ai/widget/aihio-loader.js";
    document.head.appendChild(s);
  })();
</script>

Testaa, että chatbot todella näkyy, kun kävijä hyväksyy evästeet. Complianz vaatii joskus sivun uudelleenlatauksen.

Yleisimmät ongelmat

”Chatbot ei näy mitenkään”

Tarkista ensin selaimen kehittäjätyökalut: paina F12 ja avaa Console-välilehti.

• Näetkö virheen 404 aihio-loader.js? Skriptin URL on väärin kirjoitettu, selaimen lisäosa tai palomuuri estää sen, tai tiedostoa ei löydy annetusta polusta.
• Näetkö virheen CSP blocked? Sivustollasi on Content Security Policy, joka estää kolmannen osapuolen skriptit. Lisää aihio.ai poikkeuksiin.

”Chatbot vastaa hitaasti”

Ensimmäinen vastaus voi kestää 2–5 sekuntia, koska tekoäly käsittelee kysymyksen. Jos odotusaika on yli 10 sekuntia, tarkista hallintapaneelista, kuinka suuri tietopohja on. Erittäin laaja tietopohja voi hidastaa vastauksia.

”Chatbot pyytää kävijää kirjautumaan”

Sivuston CSP-asetus voi estää ulkopuolisen skriptin tai yhteyden. Chatbotin julkaisua hallitset Aihion chatbot-asetuksissa, eivätkä sivuston kävijät tarvitse erillistä kirjautumista.

Testaa ennen julkaisua

Kun olet lisännyt koodin, tee ennen live-julkaisua näin:

1. Avaa sivustosi incognito-ikkunassa

   Näin varmistat, että näet saman kuin tavallinen kävijä. Älä testaa kirjautuneena ylläpitäjänä.

2. Odota 3–5 sekuntia

   Chatbot-ikkunan pitäisi latautua tässä ajassa. Jos se ei näy, avaa kehittäjätyökalujen Console-välilehti.

3. Kysy testikysymys

   Kysy chatbotilta jotain sivustosi sisällöstä, esimerkiksi aukioloaikoja tai yhteystietoja. Oikean vastauksen pitäisi tulla muutamassa sekunnissa.

4. Tarkista mobiilinäkymä

   Avaa sivusto puhelimella. Chatbot-ikkuna mukautuu mobiiliin automaattisesti, mutta se ei saa peittää tärkeää sisältöä tai toimintapainikkeita.

Usein kysytyt kysymykset

Asennus valmis

Kun koodi on sivullasi ja testikysymys toimii, chatbot on käytössä. Seuraa ensimmäisen viikon ajan keskusteluja: mitkä aiheet toistuvat, missä chatbot ei osaa vastata ja mitä tietopohjasta vielä puuttuu.

Luo chatbot ilmaiseksi ja upota se WordPress-sivullesi.