Siirry pääsisältöön
ChattyBox Logo

Widgetin asennus ja mukautus

Lisää sivustollesi tekoälyllä toimiva chat-widget alle 5 minuutissa.

Nopea asennus​

Chatbotin julkaisu on yksinkertaista. Kopioi vain lyhyt koodinpätkä hallintapaneelista.

Vaihe 1: hae upotuskoodi​

  1. Avaa hallintapaneeli ja valitse projekti.
  2. Siirry välilehteen Upota.
  3. Valitse käytettävä API-avain tai luo uusi.
  4. Kopioi luotu koodinpätkä.

Vaihe 2: lisää se sivustolle​

Liitä koodinpätkä juuri ennen sulkevaa </body>-tagia jokaiselle sivulle, jolla widgetin pitää näkyä.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="fi"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Vinkki Siinä kaikki. Värejä tai asetuksia ei tarvitse määrittää koodissa; kaikki hallitaan hallintapaneelista. :::

Visuaalinen mukautus​

ChattyBox sisältää sisäänrakennetun visuaalisen editorin. Voit sovittaa widgetin ulkoasun brändiisi ilman koodimuutoksia.

Hallintapaneelin asetukset​

  1. Korostusväri - Valitse brändin pääväri käynnistimelle, korostuksille ja käyttäjäviesteille.
  2. Sijainti - Valitse, missä widget näkyy näytöllä.
  3. Otsikko - Määritä chat-ikkunan yläreunan otsikko.
  4. Tervetuloviesti - Muokkaa ensimmäistä viestiä, jonka kävijät näkevät.
huomautus

Hallintapaneelissa tehdyt muutokset tulevat voimaan heti. Upotuskoodia ei tarvitse päivittää sivustolla.

Lisäasetukset​

Hallintapaneelin asetukset ja skriptin attribuutit​

Suurin osa widgetin toiminnasta kannattaa hallita hallintapaneelista, jotta sivustoa ei tarvitse julkaista uudelleen pieniä muutoksia varten.

Käytä hallintapaneelia väreihin, sijaintiin, kuvakkeeseen, otsikkoon, tervetuloviestiin, oletuskieleen, julkisiin avaimiin, scrapingiin ja analytiikkaan.

Jos projekti käyttää julkisten avainten alkuperärajoituksia, pidä ne ajan tasalla niiden verkkotunnusten kanssa, joihin widget asennetaan.

Käytä skriptin attribuutteja vain arvoille, joita widget tarvitsee sivun latautuessa:

  • data-api-key tunnistaa julkisen widget-avaimen.
  • data-api-url kertoo widgetille, minne pyynnöt lähetetään.
  • data-locale voi pakottaa käyttöliittymän kielen kyseisellä sivulla.

Jos widget ei näy asennuksen jälkeen, katso vianmääritys.

Alustakohtaisia esimerkkejä varten aloita Docusaurus, MkDocs, VitePress, WordPress tai GitBook -oppaista.

Widgetin piilottaminen tietyillä sivuilla​

Voit piilottaa widgetin valituilla sivuilla CSS:n avulla:

.chattybox-widget {
  display: none;
}

Mukautetut integraatiot​

Tarvitsetko tavallista widgetiä tarkemman ratkaisun?

Ota yhteyttä osoitteeseen [email protected], niin autamme valitsemaan sopivan integraatiotavan.

Monikielinen tuki​

ChattyBox-widget mukautuu automaattisesti kävijöiden kieliasetuksiin ja tarjoaa lokalisoidun kokemuksen.

Virallisesti tuetut kielet​

Widgetin käyttöliittymä, mukaan lukien painikkeet, tekstit ja järjestelmäviestit, on virallisesti tuettu 14 kielellä:

KieliKoodiWidgetin käyttöliittymäAI-vastausten laatu
EnglantienTäysi tukiErinomainen
RanskafrTäysi tukiKorkea
SaksadeTäysi tukiKorkea
EspanjaesTäysi tukiKorkea
ItaliaitTäysi tukiKorkea
HollantinlTäysi tukiKorkea
PortugaliptTäysi tukiKorkea
PuolaplTäysi tukiKorkea
RuotsisvTäysi tukiKorkea
IndonesiaidTäysi tukiKeskitaso
ViroetTäysi tukiKeskitaso
SuomifiTäysi tukiKeskitaso
WalescyTäysi tukiKeskitaso
TšekkicsTäysi tukiKeskitaso

:::note Laajennettu kielituki Vaikka widgetin käyttöliittymä tukee virallisesti 14 kieltä, taustalla oleva AI ymmärtää ja vastaa yli 100 kielellä. Emme kuitenkaan voi taata samaa laatua virallisen luettelon ulkopuolisille kielille. :::

Miten kielentunnistus toimii​

Widget käyttää porrastettua tunnistusta:

  1. data-locale-attribuutti - Korkein prioriteetti. Aseta se koodiin pakottaaksesi tietyn kielen.
  2. Sivun <html lang> -attribuutti - Widget tarkistaa sivun ilmoitetun kielen.
  3. Selaimen kieli (navigator.language) - Käyttää kävijän asetuksia.
  4. Oletusvarmistus - Englanti, jos kieltä ei tunnisteta.

Kielen manuaalinen ohitus​

Pakottaaksesi widgetin kielen selaimen asetuksista riippumatta lisää data-locale:

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-locale="fi"
  data-api-url="https://adorable-woodpecker-629.convex.site/chat"
  async
></script>

:::tip Käyttötapaus Tämä on hyödyllistä, jos monikielisellä sivustolla on omat URL-osoitteet eri kielille, kuten /de/ tai /fr/. Aseta data-locale sivun kielen mukaan. :::

Kieliasetukset hallintapaneelissa​

Sovelluksen hallintapaneelissa voit määrittää widgetin kieliasetukset projektikohtaisesti:

  • Automaattinen tunnistus (suositus) - Vastaa kävijän selaimen kieltä.
  • Kiinteä kieli - Pakottaa widgetin käyttämään aina tiettyä kieltä.
  • Salli skriptin ohitus - Ottaa data-locale-ohituksen käyttöön tai pois käytöstä.

Asetukset löytyvät hallintapaneelista → Projekti → Upota → Widgetin kieli.

Sisällön kielen täsmäytys​

Parhaan monikielisen kokemuksen vuoksi chatbotin pitäisi vastata samalla kielellä kuin käyttäjän kysymys. Tee näin:

  1. Scrapeaa kaikki dokumentaation kieliversiot sitemap.xml-tiedoston avulla.
  2. Scraper merkitsee sisällön automaattisesti oikealla kielellä.
  3. RAG-järjestelmä hakee kyselyyn sopivan kieliversion.

Asetus hallintapaneelissa: käytä scrapinguin määrittelyssä sitemap.xml-URL-osoitetta, esimerkiksi https://yourdocs.com/sitemap.xml, jotta kaikki kieliversiot löydetään ja indeksoidaan.

Vianmääritys​

Widget näyttää edelleen englantia​

  • Tyhjennä selaimen välimuisti - widget.js voi olla välimuistissa. Tee pakotettu päivitys (Ctrl+F5 / Cmd+Shift+R).
  • Tarkista data-locale - Varmista, että attribuutissa on tuettu kielikoodi.
  • Tarkista selaimen kieli - Varmista, että ensisijainen kieli on oikea.
  • Tarkista HTML lang - Sivun tulisi käyttää <html lang="fi"> tai sopivaa koodia.

Lähteet ovat väärällä kielellä​

  • Scrapeaa sisältö uudelleen - Varmista, että kaikki kieliversiot on indeksoitu.
  • Käytä sitemap.xml-tiedostoa - Näin scraper löytää URL:t kuten /de/ ja /fr/.
  • Tarkista kysymyksen kieli - AI yrittää sovittaa vastauksen kielen kysymyksen kieleen.

Puuttuvat käännökset​

  • Tarkista tuetut kielet - Vain yllä mainituilla 14 kielellä on taatut käyttöliittymäkäännökset.

Parhaat käytännöt​

  1. Aseta <html lang> sivuille - Tämä auttaa saavutettavuutta ja widgetin tunnistusta.
  2. Testaa kehityksessä data-locale-attribuutilla - Varmista, että jokainen kieli näkyy oikein.
  3. Scrapeaa kaikki kieliversiot - Käytä sitemap.xml-tiedostoa täydelliseen monikieliseen indeksointiin.
  4. Seuraa kielijakaumaa - Katso analytiikasta, mitä kieliä kävijät käyttävät eniten.