Installatiehandleidingen

Installeer ChattyBox door één openbaar widgetscript te laden op de pagina's waar bezoekers vragen moeten kunnen stellen.

Begin met het fragment in uw ChattyBox dashboard. Het bevat de openbare widget API sleutel en API URL voor uw project:

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

Vervang YOUR_API_KEY door de openbare widgetsleutel van uw dashboard. Als uw dashboard een andere data-api-url weergeeft, behoud dan de dashboardwaarde exact.

Wat hoort er in het script?

Gebruik scriptattributen voor waarden die beschikbaar moeten zijn voordat de widget kan starten:

Kenmerk	Vereist	Gebruik het voor
`src`	Ja	Laden van de ChattyBox widget JavaScript.
`data-api-key`	Ja	Identificatie van de openbare widgetsleutel voor uw project.
`data-api-url`	Ja	Widgetverzoeken verzenden naar de ChattyBox API.
`data-locale`	Nee	De UI-taal van de widget op een specifieke pagina forceren.

Gebruik dashboardinstellingen voor alles wat moet worden beheerd zonder uw site opnieuw te implementeren:

Widgetkleuren, positie, pictogram, titel en welkomstbericht.
Standaardtaalmodus en of data-locale overschrijvingen zijn toegestaan.
Het maken, verwijderen en verwijderen van openbare sleutels en eventuele toegestane oorsprongsbeperkingen die voor uw project zijn geconfigureerd.
Scrapen, opnieuw schrapen, testchat, analyses en hiaten in de inhoud.

Gewoon HTML

Plak het fragment één keer aan het einde van body, net vóór </body>. Dit werkt voor statische HTML, met de hand gecodeerde sites en sjablonen die een algemene voettekst weergeven.

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

Voor een Next.js App Router-site voegt u de widget toe aan app/layout.tsx met next/script, zodat deze één keer wordt geladen voor de hele app.

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>
  );
}

Voor een React app van één pagina voegt u het script één keer toe aan uw app-shell op het hoogste niveau of in de HTML-sjabloon. Injecteer het niet vanuit elk routeonderdeel.

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

Voor Docusaurus maakt of updatet u src/theme/Root.tsx zodat de widget beschikbaar is op alle documentpagina's.

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}</>;
}

Als uw Docusaurus site vertaalde routes heeft, stelt u data-locale in vanuit de huidige paginataal of vertrouwt u op de <html lang> waarde van de pagina.

Algemeen CMS/Aangepast HTML

De meeste CMS platforms hebben een globaal aangepaste code-, voettekst- of themasjabloongebied. Voeg daar het script toe zodat elke openbare pagina de widget kan laden.

Gebruik dit pad voor Webflow, Framer, Squarespace, aangepaste Wix-codegebieden, Shopify-thema's, HubSpot-sjablonen en aangepaste CMS-platforms waarmee u globale HTML kunt bewerken.

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

Controleer vóór publicatie of CMS data-api-key, data-api-url of async niet verwijdert uit aangepaste scripts.

Google Tag Manager

Gebruik Google Tag Manager wanneer uw team al scripts van derden beheert via GTM.

Open uw GTM container.
Maak een nieuwe Aangepaste HTML-tag.
Plak het fragment ChattyBox.
Gebruik een trigger Alle pagina's, of een smallere trigger voor alleen de pagina's waarop de widget moet worden weergegeven.
Bekijk een voorbeeld van de container, controleer of de widget wordt geladen en publiceer vervolgens.

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

Als uw site de toestemmingsmodus of een toestemmingsbeleid voor tags gebruikt, zorg er dan voor dat de widget wordt geladen op de pagina's waar bezoekers hulp nodig hebben.

WordPress

Voor ChattyBox is geen WordPress plug-in vereist. Gebruik een van de scriptlocaties die uw WordPress-installatie al ondersteunt:

Thema-instellingen die kop- of voettekstscripts bieden.
Een child-thema dat de voettekstsjabloon bestuurt.
Een kop-/voettekstscriptplug-in.
Google Tag Manager als uw WordPress site er al gebruik van maakt.

Plak het fragment in een algemene voettekstlocatie, zodat het verschijnt op gepubliceerde pagina's, berichten, documenten en kennisbankartikelen waar de chatbot beschikbaar zou moeten zijn.

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

Vermijd het toevoegen van de widget aan wp-admin-, betaal-, account- of privélidmaatschapspagina's, tenzij deze pagina's opzettelijk openbaar zijn en worden ondersteund.

Verificatie

Voer na de installatie de startchecklist uit voordat u de chatbot aankondigt:

Open een openbare pagina in een incognitovenster.
Controleer of de widgetstarter verschijnt.
Open de widget en stel een echte klantvraag.
Controleer of het antwoord bronvermeldingen bevat.
Controleer de browserconsole op ontbrekende data-api-key, ontbrekende data-api-url of sleutel-/oorsprongfouten.

Wat hoort er in het script?​

Gewoon HTML​

Next.js / React App-shell​

Docusaurus​

Algemeen CMS/Aangepast HTML​

Google Tag Manager​

WordPress​

Verificatie​