Hostatun widgetin mukauttaminen

Mukauta valmista käyttöliittymää, joka ladataan osoitteesta https://chattybox.ai/widget.js. Katso viralliset framework- ja alustakohtaiset asennusesimerkit asennusoppaista.

Ennen mukauttamista

Luo projekti, indeksoi sen sisältö ja varmista edustavat vastaukset Test Chat -toiminnolla ennen kuin käytät aikaa ulkoasuun. Katso koko järjestys kohdasta Näin pääset alkuun.

Määritä hostattu widget

1. Avaa hallintapaneeli ja valitse projektisi.
2. Siirry Embed-välilehdelle.
3. Esikatsele ja tallenna widgetin ulkoasu ja kielitoiminta.

Embed-välilehti hallitsee esitystapaa ja luo asennuskoodin, mutta julkisia avaimia hallitaan erikseen. Kun olet valmis asentamaan:

1. Avaa Public Keys ja luo selainavain.
2. Rajoita sen sallitut origin-osoitteet tarkoitetuille verkkotunnuksille.
3. Palaa Embed-välilehdelle, valitse avain ja kopioi luotu koodinpätkä.
4. Noudata alustasi koskevia asennusoppaita.

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

vinkki

Hallintapaneelissa tallennetut widgetin esitystavan muutokset tulevat voimaan ilman, että sivustosi koodinpätkää tarvitsee vaihtaa.

---

Visuaalinen mukauttaminen

ChattyBoxissa on täysin integroitu visuaalinen editori. Voit säätää widgetin ulkoasun täydellisesti brändiisi sopivaksi koskematta koodiin.

Hallintapaneelin säätimet

1. Accent Color - Valitse brändisi pääväri. Se vaikuttaa avaajaan, tärkeisiin korostuksiin ja käyttäjän viesteihin.

2. Position - Valitse, missä widget näkyy näytöllä.

3. Header Title - Määritä chat-ikkunan yläosassa näytettävä otsikko.

4. Welcome Message - Mukauta ensimmäistä viestiä, jonka kävijät näkevät avatessaan chatin.

huomautus

Hallintapaneelissa tehdyt muutokset otetaan käyttöön heti. Sivuston upotuskoodia ei tarvitse päivittää.

Lisäasetukset

Hallintapaneelin asetukset ja skriptiattribuutit

Hallitse suurinta osaa widgetin toiminnasta hallintapaneelista, jotta verkkosivustoa ei tarvitse julkaista uudelleen yksinkertaisten muutosten vuoksi.

Käytä hallintapaneelia väreihin, sijaintiin, kuvakkeeseen, otsikkoon, tervetuloviestiin, oletuskieliin, julkisten avainten hallintaan, haravointiin ja Analyticsiin.

Jos projektisi käyttää julkisen avaimen origin-rajoituksia, pidä rajoitukset synkronoituna widgetin asennusverkkotunnusten kanssa.

Käytä skriptiattribuutteja 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. Tuotannossa se on hallintapaneelista saatava vakaa https://...convex.site/chat-URL.
• data-locale pakottaa haluttaessa tietyn widget-käyttöliittymän kielen kyseisellä sivulla.

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

Alustakohtaisia esimerkkejä saat aloittamalla Docusaurus-, MkDocs-, VitePress-, WordPress- tai GitBook-oppaasta.

Widgetin piilottaminen tietyillä sivuilla

Jos sinun on piilotettava widget valituilla sivuilla, voit tehdä sen CSS:llä:

.chattybox-widget {
  display: none;
}

Mukautetut integraatiot

Tarvitsetko hostattua widgetiä räätälöidymmän toteutuksen? Rakenna oma käyttöliittymä JavaScript SDK:lla tai pyydä arkkitehtuurineuvoja osoitteesta support@chattybox.ai.

Monikielinen tuki

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

Virallisesti tuetut kielet

Widgetin käyttöliittymä (painikkeet, tunnisteet ja järjestelmäviestit) on virallisesti tuettu 14 kielellä:

Kieli	Koodi	Widgetin käyttöliittymä	AI-vastausten laatu
Englanti	en	Täysi tuki	Erinomainen
Ranska	fr	Täysi tuki	Korkea
Saksa	de	Täysi tuki	Korkea
Espanja	es	Täysi tuki	Korkea
Italia	it	Täysi tuki	Korkea
Hollanti	nl	Täysi tuki	Korkea
Portugali	pt	Täysi tuki	Korkea
Puola	pl	Täysi tuki	Korkea
Ruotsi	sv	Täysi tuki	Korkea
Indonesia	id	Täysi tuki	Keskitaso
Viro	et	Täysi tuki	Keskitaso
Suomi	fi	Täysi tuki	Keskitaso
Kymri	cy	Täysi tuki	Keskitaso
Tšekki	cs	Täysi tuki	Keskitaso

:::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 korkealaatuisia vastauksia virallisen tuettujen kielten luettelon ulkopuolisilla kielillä. :::

Näin kielen tunnistus toimii

Widget käyttää ketjutettua tunnistusjärjestelmää:

1. data-locale-attribuutti - Korkein prioriteetti. Aseta tämä upotuskoodiin pakottaaksesi tietyn kielen.
2. Sivun <html lang> -attribuutti - Widget tarkistaa sivulle ilmoitetun kielen.
3. Selaimen kieli (navigator.language) - Käyttää kävijän selaimen kieliasetuksia.
4. Oletusvarakieli - Englanti, jos kieltä ei tunnisteta.

Kielen manuaalinen ohitus

Jos haluat widgetin näkyvän tietyllä kielellä selaimen asetuksista riippumatta, lisää data-locale-attribuutti:

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

:::tip Käyttötapaus Tämä on erityisen hyödyllistä monikielisillä sivustoilla, joissa jokaisella kieliversiolla on oma URL (esim. /de/, /fr/). Aseta data-locale vastaamaan kunkin sivun kieltä yhdenmukaisen käyttökokemuksen varmistamiseksi. :::

Hallintapaneelin kieliasetukset

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

• Auto-detect (suositus) - Sovittaa widgetin kielen automaattisesti kävijän selaimen kieleen
• Fixed Language - Pakottaa widgetin aina tietylle kielelle
• Allow Script Override - Ottaa data-locale-attribuutin ohituksen käyttöön tai pois käytöstä

Löydät nämä asetukset hallintapaneelista → Project → Embed-välilehti → Widget Language -osio.

Sisällön kielen yhteensovitus

Parhaan monikielisen kokemuksen saavuttamiseksi chatbotin tulisi vastata käyttäjän kysymyksen kielellä. Toimi näin:

1. Haravoi dokumentaation kaikki kieliversiot sitemap.xml-tiedoston avulla.
2. Haravointiohjelma merkitsee sisällön kielen automaattisesti.
3. RAG-järjestelmä hakee kyselyn perusteella sopivan kieliversion.

Käyttöönotto sovelluksen hallintapaneelissa: käytä haravointia määrittäessäsi sitemap.xml-URL-osoitetta (esim. https://yourdocs.com/sitemap.xml), jotta kaikki sisältösi kieliversiot löydetään ja indeksoidaan automaattisesti.

Vianmääritys

Widget näkyy edelleen englanniksi

• Pakota päivitys diagnostiikkaa varten - Lataa sivu uudelleen näppäinyhdistelmällä Ctrl+F5 tai Cmd+Shift+R ja tarkista widget- ja käännöspyynnöt selaimen verkkopaneelista
• Tarkista data-locale - Varmista, että attribuutti on asetettu oikein tuettuun kielikoodiin
• Varmista selaimen kieli - Tarkista, että selaimen ensisijainen kieli on asetettu oikein
• Tarkista sivun HTML lang - Varmista, että sivulla on <html lang="de"> (tai oikea koodi)

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

• Haravoi sisältö uudelleen - Varmista, että kaikki kieliversiot on indeksoitu
• Käytä sitemap.xml-tiedostoa - Näin haravointiohjelma löytää kaikki /de/, /fr/ jne. -URL-osoitteet
• Tarkista kyselyn kieli - AI pyrkii vastaamaan kyselyn kielellä

Käännöksiä puuttuu

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

Parhaat käytännöt

1. Aseta sivuille <html lang> - Se auttaa saavutettavuudessa ja widgetin tunnistuksessa
2. Testaa data-locale-attribuutilla kehityksen aikana - Varmista, että jokainen kieli näkyy oikein
3. Haravoi kaikki kieliversiot - Käytä sitemap.xml-tiedostoa kattavaan monikieliseen indeksointiin
4. Seuraa kielijakaumaa - Tarkista Analyticsista, mitä kieliä kävijäsi käyttävät eniten