:::note Versionsstatus Det publicerade npm-SDK:t 0.1.4 med hostade widget.js v15 stöder teardown via remove() eller window.ChattyBox.destroy(): UI/stilar tas bort och väntande initiering, försök och chattar avbryts. v15-chatten gör högst 10 försök inom en planeringsbudget på 30 sekunder, inte en hård timeout per begäran. Headless sendMessage() försöker inte igen automatiskt. :::

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. Den fungerar från webbläsarorigins som standard.
2. Aktivera vid behov en exakt originbegränsning i Edit origins som ytterligare skydd.
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 används vid nästa widgetinitiering utan att kodfragmentet på webbplatsen behöver bytas ut. Redan öppna sidor uppdateras inte live; ladda om för att hämta sparade inställningar.

---

Visuell anpassning

Instrumentpanelens editor låter dig justera stödda widgetfärger, placering, ikon och text utan att redigera webbplatsens kod. Kontrollera resultatet i den hostade widgeten; förhandsvisningen och loadern är inte identiska.

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.

5. Icon - Välj standardikon, emoji, bild-URL eller uppladdad bild. Kontrollera den hostade widgeten efter sparning; loadern använder för närvarande inte sparad ikonstorlek.

notera

Spara ändringarna och ladda sedan om den installerade sidan för att verifiera dem. Du behöver inte uppdatera inbäddningskoden, men redan öppna widgetar ändras inte direkt.

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 begär ett specifikt språk för widgetens gränssnitt vid initiering endast när projektet tillåter skriptåsidosättning.

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 löser UI-locale vid initiering enligt projektets Fixed- eller Auto-läge; den följer inte senare ändringar av attribut eller klientrutter.

Officiellt stödda språk

Widgeten har översättningskataloger för 14 språk. En katalog innebär inte att varje synlig eller tillgänglig sträng är översatt och garanterar inte svarskvalitet.

Språk	Kod
Engelska	en
Franska	fr
Tyska	de
Spanska	es
Italienska	it
Nederländska	nl
Portugisiska	pt
Polska	pl
Svenska	sv
Indonesiska	id
Estniska	et
Finska	fi
Walesiska	cy
Tjeckiska	cs

:::note UI-språk och svar UI-locale skickas inte som en språkparameter för chatten. Serverdelen upptäcker frågans språk och försöker språkmedveten hämtning och generering; svarens språk och kvalitet beror på indexerat innehåll och modell. :::

Så fungerar språkidentifiering

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

1. Tillåten skriptåsidosättning - Ett icke-tomt data-locale vinner bara när allowLocaleOverride inte är false, även i Fixed-läge.
2. Fixed-läge - Utan en tillåten åsidosättning används defaultLocale och sidans eller webbläsarens språk ignoreras.
3. Auto-läge - Det första icke-tomma värdet används: sidans <html lang>, webbläsarens navigator.language (eller äldre userLanguage) och sedan defaultLocale.
4. Normalisering - Stödda regionala värden som fr-CA reduceras till baskoden; ett ostött värde blir direkt engelska utan att nästa kandidat provas.

Manuellt språkbyte

För att begära ett visst språk oavsett webbläsarens inställningar aktiverar du Allow Script Override och lägger till attributet data-locale innan loadern körs:

<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 och kontrollera det renderade gränssnittet. :::

Språkinställningar i instrumentpanelen

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

• Auto-detect - Använder sidans språk före besökarens webbläsarspråk
• Fixed Language - Använder det konfigurerade standardspråket om inte ett tillåtet data-locale åsidosätter det
• 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 en användbar flerspråkig upplevelse ska du indexera offentligt innehåll på besökarnas språk och testa källorna; identifiering och hämtning är inte garanterade. Så här gör du:

1. Upptäck önskade publika språkversioner med sitemap.xml och kontrollera sedan vilka URL:er som faktiskt indexerades.
2. Skraparen försöker upptäcka sidans språk; granska innehåll och källor.
3. Hämtningen försöker föredra frågans språk men kan falla tillbaka på annat indexerat innehåll.

Konfiguration i appens instrumentpanel: Använd URL:en till din sitemap.xml (t.ex. https://yourdocs.com/sitemap.xml) när du konfigurerar skrapningen för att upptäcka språkversioner och kontrollera sedan de indexerade sidorna. Webbplatskartor kringgår inte crawlgränser eller undantag.

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 de önskade publika språkversionerna verkligen indexerades
• Använd sitemap.xml - Kontrollera att önskade URL:er verkligen indexerades; crawlgränser och undantag kan utelämna dem
• 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 koderna ovan har kataloger; saknade etiketter kan använda engelsk reservtext

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. Upptäck språkversioner - Använd sitemap.xml för upptäckt och kontrollera de indexerade sidorna; webbplatskartor kringgår inte crawlgränser eller undantag
4. Granska verkliga frågor - Kontrollera konversationer och språkspecifika innehållsluckor; instrumentpanelen visar för närvarande ingen fördelning av widgetens språkversioner

UI-katalogen översätter inte svar eller allt UI. Att dölja widgeten med CSS stoppar inte initiering, medan det publicerade SDK:t 0.1.4 och widget.js v15 stöder full teardown via remove() respektive window.ChattyBox.destroy().