Installatiehandleidingen

De gehoste widget.js-integratie is de optie zonder build wanneer je wilt dat ChattyBox de interface en het transport onderhoudt. Als je app dezelfde UI vanuit npm-code moet initialiseren, gebruik dan mountWidget(). Gebruik de headless SDK als je de UI zelf wilt beheren.

Voordat je installeert

Voltooi eerst de flow Aan de slag: configureer en scrape de bron, controleer de geïndexeerde pagina’s en verifieer representatieve antwoorden in Test Chat.

Maak daarna in Public Keys een browsersleutel aan en beperk de toegestane origins. Ga terug naar Embed, selecteer die sleutel, rond eventuele aanpassingen van de gehoste widget af en kopieer het gegenereerde fragment. Het bevat de openbare sleutel en API-URL voor je project:

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

Bekijk voor documentatieplatforms de handleidingen voor de MkDocs AI-chatbot, VitePress AI-chatbot en GitBook AI-chatbot.

Vervang YOUR_API_KEY door de openbare widgetsleutel uit je dashboard. Behoud de waarde van data-api-url exact zoals die in het dashboard wordt getoond. In productie is dit een stabiele https://...convex.site/chat-URL voor de openbare widget-API.

Wat hoort er in het script?

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

Attribuut	Vereist	Gebruik het voor
`src`	Ja	De JavaScript van de ChattyBox-widget laden.
`data-api-key`	Ja	De openbare widgetsleutel voor je project identificeren.
`data-api-url`	Ja	Widgetverzoeken naar de ChattyBox-API sturen.
`data-locale`	Nee	De UI-taal van de widget op een specifieke pagina afdwingen.

Gebruik dashboardinstellingen voor alles wat je wilt beheren zonder je site opnieuw te deployen:

Widgetkleuren, positie, pictogram, titel en welkomstbericht.
Standaardtaalmodus en of overschrijven via data-locale is toegestaan.
Openbare sleutels aanmaken en verwijderen, plus alle geconfigureerde toegestane originbeperkingen voor je project.
Scraping, opnieuw scrapen, testchat, analytics en contentgaten.

Als je het config-as-code-slot inschakelt, komen instellingen voor assistent, bron, runtime en ondersteunde widgetfuncties uit de gedeployde configuratie in plaats van uit dashboardformulieren. Openbare sleutels en toegestane origins blijven projectreferenties voor de setup en worden geen waarden in het configuratiebestand.

Plain HTML

Plak het fragment één keer vlak voor het einde van body, net vóór </body>. Dit werkt voor statische HTML, handmatig gecodeerde sites en templates met een algemene footer.

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

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

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

Voeg het script voor een React-singlepageapp één keer toe aan je app-shell op het hoogste niveau of aan je HTML-template. Injecteer het niet vanuit elke routecomponent.

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

Maak of wijzig voor Docusaurus src/theme/Root.tsx, zodat de widget op alle documentatiepagina’s beschikbaar is.

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

Als je Docusaurus-site vertaalde routes heeft, stel je data-locale in op basis van de huidige paginataal of vertrouw je op de <html lang>-waarde van de pagina.

Houd de loader in je blijvende applicatieshell. Maak hem niet opnieuw aan en verwijder hem niet tijdens normale client-side routewijzigingen.

Aangepaste interface

De gehoste widget is optioneel. Wil je volledige controle over rendering, berichtstatus en interactieontwerp, gebruik dan de JavaScript-SDK met dezelfde openbare widget-API-sleutel en widget-API-URL.

Algemene CMS/aangepaste HTML

De meeste CMS-platforms hebben een algemeen gebied voor aangepaste code, footer of themasjabloon. Voeg het script daar toe, zodat elke openbare pagina de widget kan laden.

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

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

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

Google Tag Manager

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

Open je GTM-container.
Maak een nieuwe Custom HTML-tag.
Plak het ChattyBox-fragment.
Gebruik een trigger All Pages 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="YOUR_WIDGET_API_URL"
  async
></script>

Als je site de toestemmingsmodus of een toestemmingsbeleid voor tags gebruikt, zorg er dan voor dat de widget mag laden op pagina’s waar bezoekers hulp nodig hebben.

WordPress

ChattyBox heeft geen WordPress-plug-in nodig. Gebruik een van de scriptlocaties die je WordPress-installatie al ondersteunt:

Thema-instellingen die header- of footerscripts bieden.
Een child-thema dat de footertemplate beheert.
Een header-/footerscriptplug-in.
Google Tag Manager als je WordPress-site dit al gebruikt.

Plak het fragment in een algemene footerlocatie, zodat het verschijnt op gepubliceerde pagina’s, berichten, docs en kennisbankartikelen waar de chatbot beschikbaar moet zijn.

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

Voeg de widget niet toe aan wp-admin-, checkout-, account- of privélidmaatschapspagina’s, tenzij die pagina’s bewust openbaar en ondersteund zijn.

Verificatie

Voer na de installatie de launchchecklist uit voordat je de chatbot aankondigt:

Open een openbare pagina in een incognitovenster.
Controleer of de widgetlauncher 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-/originfouten.

Voordat je installeert​

Wat hoort er in het script?​

Plain HTML​

Next.js / React App Shell​

Docusaurus​

Aangepaste interface​

Algemene CMS/aangepaste HTML​

Google Tag Manager​

WordPress​

Verificatie​

Privacy choices