Anpassa den hostade widgeten

Anpassa det färdiga gränssnittet som laddas från https://chattybox.ai/widget.js. Se Installationsguiderna för kanoniska installationsexempel för framework och plattform.

Innan du anpassar

Skapa projektet, indexera innehållet och verifiera representativa svar i Test Chat innan du lägger tid på presentationen. Se Kom igång för hela ordningen.

Konfigurera den hostade widgeten

1. Gå till din instrumentpanel och välj projektet.
2. Öppna fliken Embed.
3. Förhandsgranska och spara widgetens utseende och språkbeteende.

Fliken Embed styr presentationen och genererar installationskod, men offentliga nycklar hanteras separat. När du är redo att installera:

1. Öppna Public Keys och skapa en webbläsarnyckel.
2. Begränsa dess tillåtna origins till de avsedda webbplatsdomänerna.
3. Gå tillbaka till Embed, välj nyckeln och kopiera det genererade kodfragmentet.
4. Följ Installationsguiderna för din plattform.

<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>

dricks

Ändringar av widgetens presentation som sparas i instrumentpanelen tillämpas utan att kodfragmentet på webbplatsen behöver bytas ut.

---

Visuell anpassning

ChattyBox har en helt integrerad visuell editor. Du kan justera widgetens utseende och känsla så att den passar varumärket perfekt utan att röra någon kod.

Kontroller i instrumentpanelen

1. Accent Color - Välj varumärkets primära färg. Den påverkar startknappen, viktiga markeringar och användarmeddelanden.

2. Position - Välj var widgeten ska visas på skärmen.

3. Header Title - Ange titeln som visas högst upp i chattfönstret.

4. Welcome Message - Anpassa det första meddelandet som besökare ser när de öppnar chatten.

notera

Ändringar i instrumentpanelen tillämpas direkt. Du behöver inte uppdatera inbäddningskoden på webbplatsen.

Avancerade alternativ

Inställningar i instrumentpanelen kontra skriptegenskaper

De flesta av widgetens beteenden bör hanteras från instrumentpanelen, så att enkla ändringar inte kräver att webbplatsen distribueras på nytt.

Använd instrumentpanelen för färger, position, ikon, rubrik, välkomstmeddelande, standardspråk, hantering av offentliga nycklar, skrapning och Analytics.

Om projektet använder begränsningar för offentliga nycklars origins ska du hålla begränsningarna synkroniserade med de domäner där widgeten är installerad.

Använd skriptegenskaper endast för värden som widgeten behöver när sidan laddas:

• data-api-key identifierar den offentliga widgetnyckeln.
• data-api-url anger vart widgeten ska skicka förfrågningar. I produktion är detta en stabil https://...convex.site/chat-URL från instrumentpanelen.
• data-locale kan valfritt tvinga ett specifikt språk för widgetens gränssnitt på sidan.

Om widgeten inte visas efter installationen kan du läsa Felsökning.

För plattformsspecifika exempel kan du börja med Docusaurus, MkDocs, VitePress, WordPress eller GitBook.

Dölj widgeten på specifika sidor

Om du behöver dölja widgeten på utvalda sidor kan du göra det med CSS:

.chattybox-widget {
  display: none;
}

Anpassade integrationer

Behöver du en mer skräddarsydd konfiguration än den hostade widgeten? Bygg ett eget gränssnitt med JavaScript SDK eller kontakta support@chattybox.ai för arkitekturhjälp.

Flerspråkigt stöd

ChattyBox-widgeten anpassar sig automatiskt efter besökarnas språkpreferenser och ger användare över hela världen en lokaliserad upplevelse.

Officiellt stödda språk

Widgetens gränssnitt (knappar, etiketter och systemmeddelanden) stöds officiellt på 14 språk:

Språk	Kod	Widgetgränssnitt	AI-svarskvalitet
Engelska	en	Fullt stöd	Utmärkt
Franska	fr	Fullt stöd	Hög
Tyska	de	Fullt stöd	Hög
Spanska	es	Fullt stöd	Hög
Italienska	it	Fullt stöd	Hög
Nederländska	nl	Fullt stöd	Hög
Portugisiska	pt	Fullt stöd	Hög
Polska	pl	Fullt stöd	Hög
Svenska	sv	Fullt stöd	Hög
Indonesiska	id	Fullt stöd	Medel
Estniska	et	Fullt stöd	Medel
Finska	fi	Fullt stöd	Medel
Walesiska	cy	Fullt stöd	Medel
Tjeckiska	cs	Fullt stöd	Medel

:::note Utökat språkstöd Även om widgetens gränssnitt officiellt stöder 14 språk kan den underliggande AI:n förstå och svara på över 100 språk. Vi kan dock inte garantera svar av hög kvalitet på språk utanför vår officiella lista. :::

Så fungerar språkidentifiering

Widgeten använder ett kaskadbaserat system för identifiering:

1. Attributet data-locale - Högsta prioritet. Ange detta i inbäddningskoden för att tvinga fram ett visst språk.
2. Sidans <html lang>-attribut - Widgeten kontrollerar sidans angivna språk.
3. Webbläsarens språk (navigator.language) - Använder besökarens webbläsarpreferenser.
4. Standardspråk som reserv - Engelska om inget språk identifieras.

Manuellt språkbyte

Om du vill tvinga widgeten att visas på ett visst språk oavsett webbläsarens inställningar lägger du till attributet data-locale:

<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 Användningsfall Detta är särskilt användbart på en flerspråkig webbplats där varje språkversion har en egen URL (t.ex. /de/, /fr/). Ange data-locale enligt sidans språk för en konsekvent användarupplevelse. :::

Språkinställningar i instrumentpanelen

I appens instrumentpanel kan du konfigurera widgetens språkpreferenser per projekt:

• Auto-detect (rekommenderas) - Matchar automatiskt widgetens språk med besökarens webbläsarspråk
• Fixed Language - Tvingar widgeten att alltid visas på ett visst språk
• Allow Script Override - Aktiverar eller inaktiverar åsidosättning med attributet data-locale

Du hittar inställningarna i din instrumentpanel → Project → fliken Embed → avsnittet Widget Language.

Matcha innehållets språk

För bästa flerspråkiga upplevelse bör chattboten svara på samma språk som användarens fråga. Så här gör du:

1. Skrapa alla språkversioner av dokumentationen med filen sitemap.xml.
2. Skraparen märker automatiskt innehållet med dess språk.
3. RAG-systemet hämtar rätt språkversion utifrån frågan.

Konfiguration i appens instrumentpanel: Använd URL:en till din sitemap.xml (t.ex. https://yourdocs.com/sitemap.xml) när du konfigurerar skrapningen, så att alla språkversioner av innehållet upptäcks och indexeras automatiskt.

Felsökning

Widgeten visas fortfarande på engelska

• Hård uppdatering som diagnostik - Läs in sidan med Ctrl+F5 eller Cmd+Shift+R och kontrollera widget- och översättningsförfrågningar i webbläsarens nätverkspanel
• Kontrollera data-locale - Kontrollera att attributet är korrekt inställt på en kod för ett stödspråk
• Verifiera webbläsarens språk - Kontrollera att webbläsarens föredragna språk är korrekt inställt
• Kontrollera sidans HTML lang - Kontrollera att sidan har <html lang="de"> (eller motsvarande kod)

Källorna är på fel språk

• Skrapa om innehållet - Kontrollera att alla språkversioner är indexerade
• Använd sitemap.xml - Då hittar skraparen alla URL:er som /de/, /fr/ och så vidare
• Kontrollera frågans språk - AI:n försöker matcha svarsspråket med frågans språk

Översättningar saknas

• Kontrollera stödda språk - Endast de 14 språk som listas ovan har garanterade gränssnittsöversättningar

Bästa praxis

1. Ange <html lang> på sidorna - Hjälper både tillgänglighet och identifiering av widgeten
2. Testa med data-locale under utvecklingen - Kontrollera att varje språk återges korrekt
3. Skrapa alla språkversioner - Använd sitemap.xml för heltäckande flerspråkig indexering
4. Övervaka språkfördelningen - Kontrollera i Analytics vilka språk dina besökare använder mest