Miniapp Chatbot

1. Upotuskoodi asiakkaan sivulle

Lisää asiakkaan sivuston HTML-koodiin (esim. juuri ennen </body>-tagia) seuraava <script>-elementti:

<script
  src="https://chatbot.miniapp.fi/chatbot/embed.js"
  data-site="esimerkki.fi"
  data-lead-option="Ota yhteyttä"
  async
></script>

data-site-attribuuttiin laitetaan sivuston domain, esim. teampercheet.fi tai miniapp.fi. Tätä käytetään sivukohtaisiin asetuksiin (aukioloajat, tekstit, FAQ jne.).

Kun valintanapeissa klikataan data-lead-option-tekstin mukaista nappia (oletus: Ota yhteyttä), chatti näyttää yhteystietolomakkeen ja tallentaa tiedot keskusteluun.

2. Mitä tämä sivu tekee?

Tämä sivu toimii sisäisenä testi- ja infonäkymänä. Se lataa saman embed.js-tiedoston kuin asiakkaiden sivut, joten oikeassa alakulmassa pitäisi näkyä chat-painike myös tällä sivulla.

Voit testata toimintaa avaamalla selaimen kehittäjätyökalut (F12) ja seuraamalla Network-välilehdellä pyyntöjä osoitteeseen /chatbot/chatbot.php.

3. Tekninen yhteenveto

embed.js luo kelluvan chat-widgetin asiakkaan sivulle.
Viestit lähetetään POST-pyynnöllä osoitteeseen /chatbot/chatbot.php JSON-muodossa.
Palvelin tallentaa viestit tietokantaan ja vastaa yksinkertaisella logiikalla (FAQ / aukioloajat / fallback).

Jatkokehityksessä voidaan lisätä mm. OpenAI/Gemini-integraatio, sähköposti-ilmoitukset ja admin-näkymä keskustelujen selaamiseen.