Installationsguider

Installera ChattyBox genom att ladda ett offentligt widgetskript på sidorna där besökare ska kunna ställa frågor.

Börja från utdraget i din ChattyBox instrumentpanel. Den innehåller den offentliga widgeten API nyckel och API URL för ditt projekt:

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

Ersätt YOUR_API_KEY med den offentliga widgetnyckeln från din instrumentpanel. Om din instrumentpanel visar en annan data-api-url, behåll instrumentpanelens värde exakt.

Vad hör hemma i manuset

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

Attribut	Krävs	Använd den till
`src`	Ja	Laddar JavaScript-widgeten ChattyBox.
`data-api-key`	Ja	Identifiera den offentliga widgetnyckeln för ditt projekt.
`data-api-url`	Ja	Skickar widgetförfrågningar till ChattyBox API.
`data-locale`	Nej	Tvinga widgetens gränssnittsspråk på en specifik sida.

Använd instrumentpanelsinställningar för allt som ska hanteras utan att omdistribuera din webbplats:

Widgetfärger, position, ikon, titel och välkomstmeddelande.
Standardspråkläge och om data-locale åsidosättningar är tillåtna.
Skapande, radering och eventuella restriktioner för tillåtet ursprung som konfigurerats för ditt projekt.
Skrapning, omskrapning, testchatt, analyser och innehållsluckor.

Vanligt HTML

Klistra in kodavsnittet en gång nära slutet av body, strax före </body>. Detta fungerar för statiska HTML, handkodade webbplatser och mallar som visar 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="https://app.chattybox.ai"
      async
    ></script>
  </body>
</html>

Next.js / React App Shell

För en Next.js App Router-webbplats, lägg 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="https://app.chattybox.ai"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

För en React ensidig app, lägg till skriptet en gång i ditt appskal på toppnivå eller HTML mall. Injicera det inte från varje ruttkomponent.

import { useEffect } from "react";

export function ChattyBoxWidget() {
  useEffect(() => {
    if (document.querySelector("script[data-chattybox-widget]")) return;

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

    return () => script.remove();
  }, []);

  return null;
}

Docusaurus

För Docusaurus, skapa eller uppdatera 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.querySelector("script[data-chattybox-widget]")) return;

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

    return () => script.remove();
  }, []);

  return <>{children}</>;
}

Om din Docusaurus-webbplats har översatta rutter, ställ in data-locale från det aktuella sidspråket eller lita på sidans <html lang>-värde.

Generisk CMS/Custom HTML

De flesta CMS-plattformar har ett globalt anpassat område för kod, sidfot eller temamall. Lägg till skriptet där så att alla offentliga sidor kan ladda widgeten.

Använd den här sökvägen för Webflow, Framer, Squarespace, Wix anpassade kodområden, Shopify-teman, HubSpot-mallar och anpassade CMS-plattformar som låter dig redigera globala HTML.

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

Innan du publicerar, kontrollera att CMS inte tar bort data-api-key, data-api-url eller async från anpassade skript.

Google Tag Manager

Använd Google Tag Manager när ditt team redan hanterar tredjepartsskript genom GTM.

Öppna din GTM-behållare.
Skapa en ny Anpassad HTML-tagg.
Klistra in kodavsnittet ChattyBox.
Använd en Alla sidor-utlösare eller en smalare utlösare för endast de sidor som ska visa widgeten.
Förhandsgranska behållaren, verifiera att widgeten laddas och publicera sedan.

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

Om din webbplats använder samtyckesläge eller en policy för taggsamtycke, se till att widgeten tillåts laddas på sidorna där besökarna behöver hjälp.

WordPress

ChattyBox kräver inte en WordPress plugin. Använd en av skriptplatserna som din WordPress-installation redan stöder:

Temainställningar som tillhandahåller sidhuvud- eller sidfotsskript.
Ett barntema som styr sidfotsmallen.
En sidhuvud/sidfot script plugin.
Google Tag Manager om din WordPress-webbplats redan använder den.

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

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

Undvik att lägga till widgeten på wp-admin, kassa, konto eller privata medlemssidor såvida inte dessa sidor avsiktligt är offentliga och stöds.

Verifiering

Efter installationen, kör lanseringschecklistan innan du tillkännager chatboten:

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

Vad hör hemma i manuset​

Vanligt HTML​

Next.js / React App Shell​

Docusaurus​

Generisk CMS/Custom HTML​

Google Tag Manager​

WordPress​

Verifiering​