Chatbottia käytetään nettisivun kautta asentamalla sivulle chat-ikkuna (chat widget). Rasa web chat -ohjeistuksesta löytyy tarvittaessa lisätietoa tämän dokumentin lisäksi: https://github.com/auroraai-bot-platform/rasa-webchat. Chat-ikkuna voidaan lisätä mille tahansa nettisivulle. Se on kirjoitettu react nimisellä ohjelmointikielellä, joten on olemassa erityiset react-ohjeet sekä yleiset ohjeet muille ympäristöille.

Odotettu toiminta

Kun widget on konfiguroitu sivulle oikein, staattinen chatbot-nappi on näkyvissä sivun oikeassa alalaidassa. Nappi ilmestyy vasta, kun chat-ikkuna saa yhteyden chatbottiin. Tätä toiminnallisuutta voi muuttaa Rasa web chat -ohjeistuksen mukaisesti

Tarvittavat asetukset

Normaalisti ainoana parametrina tarvitaan socketUrl mahdollistamaan kommunikointi chat-ikkunan (chat widget) ja chatbotin välillä. socketUrl osoittaa julkiseen osoitteeseen, jossa chatbotin backend sijaitsee.

Kuinka selvittää endpoint url

Ajoympäristössä on eukäteen määritelty endpoint url, ja tieto löytyy botfrontin asetuksista.

Esimerkki:

Ympäristön nimi on customer ja Botfront-projektin nimi on chitchat:

1. Avaa Botfront-käyttöliittymä https://customer.aaibot.link
2. Avaa projekti chitchat
3. Mene asetuksiin  ('Settings')
4. Klikkaa  tunnukset ('credentials') -välilehteä
5. Kopioi base_url

Kyseinen base_url on  socketUrl:ia vastaava osoite Rasa web chatille.
On hyvä käyttää  https-yhteyttä tietoturvan vuoksi.

React-ohjeet

Tällä ohjeella chat-ikkuna (chat widget) integroidaan react-ympäristöön:

import Widget from 'rasa-webchat';

function CustomWidget = () => {
  return (
    <Widget
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5005"}
      customData={{"language": "en"}}
    />
  )
}

Yleisohjeet muille ympäristöille

Näillä ohjeilla chat-ikkuna (chat widget) voidaan integroida muihin ympäristöihin:

<script>!(function () {
  let e = document.createElement("script"),
    t = document.head || document.getElementsByTagName("head")[0];
  (e.src =
    "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js"),
    // Replace 1.x.x with the version that you want
    (e.async = !0),
    (e.onload = () => {
      window.WebChat.default(
        {
          customData: { language: "en" },
          socketUrl: "http://localhost:5005",
          // add other props here
        },
        null
      );
    }),
    t.insertBefore(e, t.firstChild);
})();
</script>