Miten lisätä chatbot verkkosivuille — vaiheittainen opas (2026)

Lyhyt vastaus: Lataa chatbot-palvelun (esim. AI Chatti) tarjoama JavaScript-koodirivi ja liitä se sivustosi </body>-tagin yläpuolelle. WordPressissä, Shopifyssa, Wixissä ja Squarespacessa on omat asennuspaikkansa, joihin voit liittää koodin ilman teknistä osaamista. Koko prosessi vie yleensä alle 15 minuuttia.

AI-chatbotin lisääminen verkkosivulle on huomattavasti yksinkertaisempaa kuin moni luulee. Tämä opas käy läpi 5 vaihetta, joiden jälkeen sinulla on toimiva, suomenkielinen AI-chatbot verkkosivuilla. Ohjeet toimivat kaikilla suosituilla alustoilla: WordPress, Shopify, Wix, Squarespace ja omat HTML-sivut.

Mitä tarvitset etukäteen

Ennen kuin aloitat, varmista että sinulla on:

1. Käyttöoikeus verkkosivun lähdekoodiin tai hallintapaneeliin. Yleensä riittää, että pääset käsiksi joko teemaan/templateen tai hallintapaneelin "custom code" -osioon.
2. Yrityksesi tietopankki valmiina. Tekstidokumentit FAQ-vastauksista, tuotetiedoista ja palveluista. Bot oppii näistä.
3. Sähköpostiosoite tilin luomista varten. Useimmat palvelut tarjoavat ilmaisen kokeilun ilman luottokorttia.

Aikaa kuluu yhteensä noin 15 minuuttia ensimmäiseen julkaistuun chatbottiin.

Vaihe 1: Valitse chatbot-palvelu

Markkinoilla on kymmeniä vaihtoehtoja. Suomalaisille pk-yrityksille suosittelemme AI Chattia — se on suunniteltu erityisesti suomalaisille yrityksille, säilyttää datan EU:ssa ja alkaa 19 €/kk. Jos haluat vertailla muita, lue erillinen artikkelimme parhaista AI-chatboteista yrityksille.

Tämän oppaan loppuosa käyttää AI Chattia esimerkkinä, mutta vaiheet ovat pääosin samat muillakin palveluilla.

Vaihe 2: Luo tili ja aloita ilmainen kokeilu

1. Mene osoitteeseen aichatti.com ja klikkaa "Aloita ilmaiseksi".
2. Anna sähköpostisi ja luo salasana.
3. Vahvista sähköposti.
4. Olet hallintapaneelissa (/hallinta) noin 30 sekunnin kuluttua.

Ilmainen kokeilu kestää 30 päivää eikä vaadi luottokorttia.

Vaihe 3: Lataa yrityksesi tietopankki

Tämä on tärkein vaihe — bot vastaa juuri sen perusteella, mitä lataat tietopankkiin.

1. Hallintapaneelissa klikkaa "Tietopankki".
2. Klikkaa "Lisää dokumentti".
3. Voit ladata seuraavissa muodoissa:
   • PDF (esim. tuotekuvasto, hinnasto)
   • DOCX (Word-dokumentit)
   • TXT (raakateksti)
   • URL (bot lukee sivuston sisällön, esim. yrityksesi muut sivut)
4. AI Chatti lukee dokumentit ja luo niistä vektorikielen tietopankin (RAG). Tämä vie yleensä 1–2 minuuttia per dokumentti.

Käytännön vinkki: Aloita lataamalla yrityksesi FAQ-sivu, tuotekuvasto ja palveluiden hinnasto. Voit lisätä lisää dokumentteja milloin tahansa.

Vaihe 4: Kopioi asennuskoodi

1. Hallintapaneelissa klikkaa "Asennus" tai "Embed".
2. Näet pienen JavaScript-koodirivin, joka näyttää tältä:

<script
  src="https://aichatti.com/widget.js"
  data-bot-id="bot_xxxxxxxxxxxxxxxxxx"
  async
></script>

3. Klikkaa "Kopioi" — koodi on nyt leikepöydälläsi.

Tämä yksi rivi on kaikki, mitä tarvitaan sivustolle. Bot latautuu asynkronisesti, joten se ei hidasta sivun latausta.

Vaihe 5: Liitä koodi verkkosivulle

Asennus riippuu siitä, mikä alusta sinulla on. Alla ohjeet 5 yleisimpään.

A) WordPress

Vaihtoehto 1: Insert Headers and Footers -lisäosa (suositeltu, ei koodausta)

1. Asenna ilmainen lisäosa "Insert Headers and Footers by WPCode" (tai vastaava).
2. Mene Asetukset → Insert Headers and Footers.
3. Liitä koodi kohtaan "Scripts in Footer".
4. Tallenna.

Vaihtoehto 2: Teeman functions.php (kehittäjille)

Lisää teemasi functions.php -tiedostoon:

function aichatti_widget() {
  echo '<script src="https://aichatti.com/widget.js" data-bot-id="bot_xxx" async></script>';
}
add_action('wp_footer', 'aichatti_widget');

B) Shopify

1. Mene Online Store → Themes.
2. Klikkaa "..." → "Edit code" aktiivisen teeman vieressä.
3. Avaa Layout/theme.liquid.
4. Etsi </body>-tagi (yleensä tiedoston lopussa).
5. Liitä AI Chattin koodi juuri tagin yläpuolelle.
6. Tallenna.

C) Wix

1. Hallintapaneelissa: Settings → Advanced → Custom Code.
2. Klikkaa "+ Add Custom Code".
3. Liitä AI Chattin skripti.
4. Aseta "Place Code in" → "Body — end".
5. Apply to "All pages".
6. Tallenna.

D) Squarespace

1. Hallintapaneelissa: Settings → Advanced → Code Injection.
2. Liitä koodi "Footer" -kenttään.
3. Tallenna.

E) Oma HTML / Webflow / Custom React-sovellus

Liitä koodi </body>-tagin yläpuolelle. Jos käytät Next.js:ää tai Reactia, voit lisätä sen _document.tsx:ään tai vastaavaan.

<!-- juuri ennen </body>-tagia -->
<script src="https://aichatti.com/widget.js" data-bot-id="bot_xxx" async></script>
</body>

Testaus: tarkista että kaikki toimii

1. Mene verkkosivullesi (avaa selaimessa tai päivitä sivu jos jo auki).
2. Odota 1–3 sekuntia — chat-painikkeen pitäisi ilmestyä oikeaan alanurkkaan (oletuksena).
3. Klikkaa painiketta ja kysy esimerkkikysymys, esim. "Mitkä ovat hinnat?" tai "Voinko tehdä peruutuksen?".
4. Botin tulisi vastata yrityksesi tietopankin perusteella.

Jos chat ei ilmesty:

• Tarkista, että koodi on liitetty </body>-tagin yläpuolelle (ei </head>-osioon)
• Tarkista, että data-bot-id -arvo täsmää hallintapaneelin botin ID:hen
• Avaa selaimen Developer Console (F12) ja katso, onko siellä virheitä

Bonus: chatbotin ulkonäön muokkaaminen

Useimmat palvelut, mukaan lukien AI Chatti, antavat muokata botin ulkonäköä hallintapaneelista:

• Värit — yhdistä bot brändiisi
• Sijainti — vasen tai oikea alanurkka
• Tervetuloviesti — "Hei! Miten voin auttaa?"
• Botin nimi — esim. "Maija" tai "Asiakaspalvelu"
• Avatar — kuva tai ikoni
• Oma logo (vaatii premium-paketin useimmissa palveluissa)

Voit muokata näitä milloin tahansa — muutokset näkyvät heti sivustolla ilman uudelleenasennusta.

Yleisiä virheitä, joita kannattaa välttää

1. Liian iso tietopankki kerralla. Aloita 3–5 keskeisellä dokumentilla. Voit aina lisätä lisää.
2. Ristiriitaiset vastaukset. Jos sinulla on kaksi versiota hinnoittelusta dokumenteissa, bot voi sekoilla. Pidä yksi totuuden lähde.
3. Liian rajaava system prompt. Älä yritä kontrolloida botin vastauksia liikaa — anna sen vastata luontevasti.
4. Bot painikkeen piilottaminen mobiilissa. Muista, että 50–70 % verkkokauppojen liikenteestä on mobiilia.

Mitä seuraavaksi?

Kun bot on toiminnassa, seuraavat askeleet ovat:

1. Seuraa analytiikkaa. Mitä asiakkaat kysyvät? Mistä bot ei osannut vastata?
2. Päivitä tietopankkia. Lisää puuttuvat vastaukset.
3. Säädä ohjausta. Kun bot ei osaa vastata, mihin keskustelu ohjautuu? (Sähköposti, lomake, ihmisagentti?)
4. Optimoi konversiota. Voit lisätä botin tervehdykseen erikoistarjouksia tai linkkejä keskeisille sivuille.

Aloita ilmainen 30 päivän kokeilu AI Chattilla — bot pystyssä alle 15 minuutissa, ei luottokorttia.

Lähteet ja lisämateriaali

• AI Chatti — viralliset asennusohjeet: aichatti.com/ominaisuudet
• WordPress — Insert Headers and Footers -lisäosan dokumentaatio
• Shopify — Theme editing documentation
• Wix — Custom Code documentation
• Squarespace — Code Injection documentation