Hoppa till huvudinnehållet
ChattyBox Logo

Widgetinställning och anpassning

Lägg till en AI-driven chattwidget på din webbplats på under 5 minuter.

Snabb installation​

Det är enkelt att få chatboten live. Kopiera bara ett kort kodutdrag från din instrumentpanel.

Steg 1: hämta inbäddningskoden​

  1. Öppna din instrumentpanel och välj projektet.
  2. Gå till fliken Bädda in.
  3. Välj API-nyckeln du vill använda eller skapa en ny.
  4. Kopiera det genererade kodutdraget.

Steg 2: lägg till det på webbplatsen​

Klistra in kodutdraget precis före den avslutande </body>-taggen på varje sida där widgeten ska visas.

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

:::tip Tips Det är allt. Färger och inställningar behöver inte ändras i koden; allt hanteras i instrumentpanelen. :::

Visuell anpassning​

ChattyBox har en inbyggd visuell editor. Du kan anpassa widgetens utseende efter varumärket utan att ändra kod.

Kontroller i instrumentpanelen​

  1. Accentfärg - Välj varumärkets huvudfärg för startknappen, markeringar och användarmeddelanden.
  2. Position - Välj var widgeten visas på skärmen.
  3. Rubrik - Ange titeln längst upp i chattfönstret.
  4. Välkomstmeddelande - Anpassa det första meddelandet som besökare ser.
notera

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

Avancerade alternativ​

Instrumentpanelens inställningar och skriptattribut​

Det mesta av widgetens beteende bör styras från instrumentpanelen så att du slipper publicera om webbplatsen för enkla ändringar.

Använd instrumentpanelen för färger, position, ikon, rubrik, välkomstmeddelande, standardspråk, publika nycklar, scraping och analys.

Om projektet använder ursprungsbegränsningar för publika nycklar ska de hållas synkade med de domäner där widgeten installeras.

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

  • data-api-key identifierar den publika widgetnyckeln.
  • data-api-url anger vart widgeten ska skicka förfrågningar.
  • data-locale kan tvinga ett visst gränssnittsspråk för sidan.

Om widgeten inte visas efter installationen, se felsökning.

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

Dölj widgeten på vissa sidor​

Du kan dölja widgeten på valda sidor med CSS:

.chattybox-widget {
  display: none;
}

Anpassade integrationer​

Behöver du en mer skräddarsydd lösning än standardwidgeten?

Kontakta oss på [email protected] så hjälper vi dig att välja rätt integrationssätt.

Flerspråkigt stöd​

ChattyBox-widgeten anpassar sig automatiskt till besökarnas språkpreferenser och ger en lokaliserad upplevelse.

Officiellt stödda språk​

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

SpråkKodWidgetgränssnittKvalitet på AI-svar
EngelskaenFullt stödUtmärkt
FranskafrFullt stödHög
TyskadeFullt stödHög
SpanskaesFullt stödHög
ItalienskaitFullt stödHög
NederländskanlFullt stödHög
PortugisiskaptFullt stödHög
PolskaplFullt stödHög
SvenskasvFullt stödHög
IndonesiskaidFullt stödMedel
EstniskaetFullt stödMedel
FinskafiFullt stödMedel
WalesiskacyFullt stödMedel
TjeckiskacsFullt stödMedel

:::note Utökat språkstöd Även om widgetgränssnittet officiellt stöder 14 språk kan den underliggande AI:n förstå och svara på 100+ språk. Vi kan däremot inte garantera lika hög kvalitet för språk utanför den officiella listan. :::

Så fungerar språkdeteckering​

Widgeten använder ett stegvis detekteringssystem:

  1. Attributet data-locale - Högsta prioritet. Ange det i koden för att tvinga ett språk.
  2. Sidans <html lang>-attribut - Widgeten läser sidans deklarerade språk.
  3. Webbläsarspråk (navigator.language) - Använder besökarens språkpreferenser.
  4. Standardreserv - Engelska om inget språk hittas.

Manuell språkstyrning​

För att styra widgetens språk oberoende av webbläsarinställningar, lägg till data-locale:

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

:::tip Användningsfall Detta är användbart om en flerspråkig webbplats har egna URL:er per språk, till exempel /de/ eller /fr/. Sätt data-locale efter sidans språk för en konsekvent upplevelse. :::

Språkinställningar i instrumentpanelen​

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

  • Identifiera automatiskt (rekommenderas) - Matchar besökarens webbläsarspråk.
  • Fast språk - Tvingar widgeten att alltid använda ett visst språk.
  • Tillåt skriptöverskrivning - Slår på eller av överskrivning via data-locale.

Inställningarna finns i instrumentpanelen → Projekt → Bädda in → Widgetspråk.

Matcha innehållets språk​

För bästa flerspråkiga upplevelse bör chatboten svara på samma språk som användarens fråga. Gör så här:

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

Inställning i instrumentpanelen: använd URL:en till sitemap.xml, till exempel https://yourdocs.com/sitemap.xml, när du konfigurerar scraping så att alla språkversioner hittas och indexeras.

Felsökning​

Widgeten visar fortfarande engelska​

  • Rensa webbläsarens cache - widget.js kan vara cachelagrad. Gör en hård omladdning (Ctrl+F5 / Cmd+Shift+R).
  • Kontrollera data-locale - Säkerställ att attributet har en stödd språkkod.
  • Kontrollera webbläsarspråket - Bekräfta att språkinställningen är korrekt.
  • Kontrollera HTML lang - Sidan bör använda <html lang="sv"> eller rätt kod.

Källor visas på fel språk​

  • Scrapa innehållet igen - Se till att alla språkversioner är indexerade.
  • Använd sitemap.xml - Då hittar scrapern URL:er som /de/ och /fr/.
  • Kontrollera frågans språk - AI:n försöker matcha svarets språk med frågan.

Saknade översättningar​

  • Kontrollera stödda språk - Endast de 14 språken ovan har garanterade UI-översättningar.

Bästa praxis​

  1. Sätt <html lang> på dina sidor - Hjälper tillgänglighet och widgetdetektering.
  2. Testa med data-locale under utveckling - Kontrollera att varje språk visas korrekt.
  3. Scrapa alla språkversioner - Använd sitemap.xml för komplett flerspråkig indexering.
  4. Följ språkfördelningen - Titta i analysen för att se vilka språk besökarna använder mest.