Installationsguider

Den hostade widget.js-integrationen är vägen utan bygge när du vill att ChattyBox ska underhålla gränssnitt och transport. Om appen ska initiera samma gränssnitt från npm-kod använder du mountWidget(). Om du vill äga gränssnittet använder du headless SDK.

Innan du installerar

Slutför först flödet Kom igång: konfigurera och skrapa källan, granska indexerade sidor och verifiera representativa svar i Test Chat.

Skapa sedan en webbläsarsäker nyckel i Public Keys och begränsa dess tillåtna origins. Gå tillbaka till Embed, välj nyckeln, slutför eventuell anpassning av den hostade widgeten och kopiera det genererade kodfragmentet. Det innehåller projektets offentliga nyckel och API-URL:

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="YOUR_WIDGET_API_URL"
  async
></script>

För dokumentationsinriktade plattformar kan du läsa guiderna MkDocs AI-chattbot, VitePress AI-chattbot och GitBook AI-chattbot.

Ersätt YOUR_API_KEY med den offentliga widgetnyckeln från instrumentpanelen. Behåll värdet för data-api-url exakt som det visas i instrumentpanelen. I produktion är detta en stabil https://...convex.site/chat-URL för det offentliga widget-API:t.

Vad som ska finnas i skriptet

Använd skriptegenskaper för värden som måste finnas tillgängliga innan widgeten kan starta:

Attribut	Krävs	Använd det för
`src`	Ja	Laddar ChattyBox-widgetens JavaScript.
`data-api-key`	Ja	Identifierar projektets offentliga widgetnyckel.
`data-api-url`	Ja	Skickar widgetförfrågningar till ChattyBox API.
`data-locale`	Nej	Tvingar widgetens gränssnittsspråk på en viss sida.

Använd inställningarna i instrumentpanelen för allt som ska hanteras utan att webbplatsen distribueras på nytt:

Widgetens färger, position, ikon, titel och välkomstmeddelande.
Standardläge för språk och om data-locale-åsidosättningar tillåts.
Skapande och borttagning av offentliga nycklar samt eventuella begränsningar av tillåtna origins för projektet.
Skrapning, omskrapning, testchatt, Analytics och innehållsluckor.

Om du aktiverar låset för konfiguration som kod kommer assistent, källa, runtime och stödda widgetinställningar från den distribuerade konfigurationen i stället för instrumentpanelens formulär. Offentliga nycklar och tillåtna origins förblir projektets autentiseringsuppgifter och är inte värden i konfigurationsfilen.

Vanlig HTML

Klistra in fragmentet en gång nära slutet av body, precis före </body>. Det fungerar för statisk HTML, handkodade webbplatser och mallar som har en global sidfot.

<!doctype html>
<html lang="en">
  <head>
    <title>Example Site</title>
  </head>
  <body>
    <main>
      <!-- Page content -->
    </main>

    <script
      src="https://chattybox.ai/widget.js"
      data-api-key="YOUR_API_KEY"
      data-api-url="YOUR_WIDGET_API_URL"
      async
    ></script>
  </body>
</html>

Next.js / React-applikationsskal

På en Next.js App Router-webbplats lägger du till widgeten i app/layout.tsx med next/script så att den laddas en gång för hela appen.

import Script from "next/script";
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://chattybox.ai/widget.js"
          data-api-key="YOUR_API_KEY"
          data-api-url="YOUR_WIDGET_API_URL"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

I en React-app med en sida lägger du till skriptet en gång i appens skal på högsta nivå eller i HTML-mallen. Injicera det inte från varje ruttkomponent.

import { useEffect } from "react";

export function ChattyBoxWidget() {
  useEffect(() => {
    if (document.getElementById("chattybox-widget-script")) return;

    const script = document.createElement("script");
    script.id = "chattybox-widget-script";
    script.src = "https://chattybox.ai/widget.js";
    script.async = true;
    script.setAttribute("data-api-key", "YOUR_API_KEY");
    script.setAttribute("data-api-url", "YOUR_WIDGET_API_URL");
    script.setAttribute("data-chattybox-widget", "true");
    document.body.appendChild(script);
  }, []);

  return null;
}

Docusaurus

I Docusaurus skapar eller uppdaterar du src/theme/Root.tsx så att widgeten är tillgänglig på alla dokumentsidor.

import React, { useEffect } from "react";

export default function Root({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (document.getElementById("chattybox-widget-script")) return;

    const script = document.createElement("script");
    script.id = "chattybox-widget-script";
    script.src = "https://chattybox.ai/widget.js";
    script.async = true;
    script.setAttribute("data-api-key", "YOUR_API_KEY");
    script.setAttribute("data-api-url", "YOUR_WIDGET_API_URL");
    script.setAttribute("data-chattybox-widget", "true");
    document.body.appendChild(script);
  }, []);

  return <>{children}</>;
}

Om Docusaurus-webbplatsen har översatta rutter anger du data-locale utifrån det aktuella sidans språk eller förlitar dig på sidans <html lang>-värde.

Behåll laddaren i appens beständiga skal. Skapa inte om eller ta bort den under normala ruttändringar på klientsidan.

Anpassat gränssnitt

Den hostade widgeten är valfri. Om du vill ha full kontroll över rendering, meddelandetillstånd och interaktionsdesign använder du JavaScript SDK med samma offentliga widget-API-nyckel och widget-API-URL.

Generisk CMS / anpassad HTML

De flesta CMS-plattformar har ett område för global anpassad kod, sidfot eller temamall. Lägg till skriptet där så att varje offentlig sida kan ladda widgeten.

Använd den här vägen för Webflow, Framer, Squarespace, Wixi områden för anpassad kod, Shopify-teman, HubSpot-mallar och anpassade CMS-plattformar som låter dig redigera global HTML.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="YOUR_WIDGET_API_URL"
  async
></script>

Kontrollera före publicering att CMS:et inte tar bort data-api-key, data-api-url eller async från anpassade skript.

Google Tag Manager

Använd Google Tag Manager om teamet redan hanterar tredjepartsskript via GTM.

Öppna din GTM-container.
Skapa en ny Custom HTML-tagg.
Klistra in ChattyBox-fragmentet.
Använd en All Pages-utlösare eller en snävare utlösare för endast de sidor där widgeten ska visas.
Förhandsgranska containern, verifiera att widgeten laddas och publicera sedan.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="YOUR_WIDGET_API_URL"
  async
></script>

Om webbplatsen använder samtyckesläge eller en policy för taggsamtycke ska du se till att widgeten får laddas på de sidor där besökare behöver hjälp.

WordPress

ChattyBox kräver inget WordPress-tillägg. Använd en av de skriptplatser som din WordPress-konfiguration redan stöder:

Temainställningar som tillhandahåller skript för sidhuvud eller sidfot.
Ett barntema som styr sidfotsmallen.
Ett tillägg för skript i sidhuvud/sidfot.
Google Tag Manager om WordPress-webbplatsen redan använder det.

Klistra in fragmentet på en global sidfotsplats så att det visas på publicerade sidor, inlägg, dokument och kunskapsbasartiklar där chattboten ska vara tillgänglig.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="YOUR_WIDGET_API_URL"
  async
></script>

Undvik att lägga till widgeten på wp-admin-, kassasidor, kontosidor eller privata medlemssidor om sidorna inte avsiktligt är offentliga och stöds.

Verifiering

Kör lanseringschecklistan efter installationen och innan du tillkännager chattboten:

Öppna en offentlig sida i ett inkognitofönster.
Bekräfta att widgetens startknapp visas.
Öppna widgeten och ställ en verklig kundfråga.
Kontrollera att svaret innehåller källhänvisningar.
Kontrollera webbläsarkonsolen efter saknad data-api-key, saknad data-api-url eller nyckel-/originfel.

Innan du installerar​

Vad som ska finnas i skriptet​

Vanlig HTML​

Next.js / React-applikationsskal​

Docusaurus​

Anpassat gränssnitt​

Generisk CMS / anpassad HTML​

Google Tag Manager​

WordPress​

Verifiering​

Privacy choices