Guide di installazione

Installa ChattyBox caricando uno script widget pubblico sulle pagine in cui i visitatori dovrebbero essere in grado di porre domande.

Inizia dallo snippet nella dashboard ChattyBox. Include la chiave API del widget pubblico e l'URL API per il tuo progetto:

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

Sostituisci YOUR_API_KEY con la chiave widget pubblica dalla dashboard. Se la dashboard mostra un data-api-url diverso, mantieni esattamente il valore della dashboard.

Ciò che appartiene alla sceneggiatura

Utilizza gli attributi dello script per i valori che devono essere disponibili prima che il widget possa essere avviato:

Attributo	Obbligatorio	Usalo per
`src`	Sì	Caricamento del widget ChattyBox JavaScript.
`data-api-key`	Sì	Identificazione della chiave widget pubblica per il tuo progetto.
`data-api-url`	Sì	Invio di richieste widget a ChattyBox API.
`data-locale`	No	Forzare la lingua dell'interfaccia utente del widget su una pagina specifica.

Utilizza le impostazioni della dashboard per tutto ciò che dovrebbe essere gestito senza ridistribuire il tuo sito:

Colori, posizione, icona, titolo e messaggio di benvenuto del widget.
Modalità lingua predefinita e se sono consentite le sostituzioni data-locale.
Creazione, eliminazione ed eventuali restrizioni sull'origine consentita configurate per il tuo progetto.
Scraping, re-scraping, test di chat, analisi e lacune nei contenuti.

Semplice HTML

Incolla lo snippet una volta verso la fine di body, appena prima di </body>. Funziona con HTML statici, siti codificati manualmente e modelli che espongono un piè di pagina globale.

<!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 Shell dell'app

Per un sito Next.js App Router, aggiungi il widget a app/layout.tsx con next/script in modo che venga caricato una volta per l'intera 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>
  );
}

Per un'app React a pagina singola, aggiungi lo script una volta nella shell dell'app di livello superiore o nel modello HTML. Non iniettarlo da ogni componente del percorso.

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

Per Docusaurus, crea o aggiorna src/theme/Root.tsx in modo che il widget sia disponibile nelle pagine dei documenti.

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

Se il tuo sito Docusaurus ha percorsi tradotti, imposta data-locale dalla lingua della pagina corrente o fai affidamento sul valore <html lang> della pagina.

Generico CMS/Personalizzato HTML

La maggior parte delle piattaforme CMS dispone di un'area di codice personalizzato, piè di pagina o modello di tema globale personalizzata. Aggiungi lo script lì in modo che ogni pagina pubblica possa caricare il widget.

Utilizza questo percorso per Webflow, Framer, Squarespace, aree di codice personalizzato Wix, temi Shopify, modelli HubSpot e piattaforme CMS personalizzate che ti consentono di modificare HTML globali.

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

Prima della pubblicazione, verifica che CMS non rimuova data-api-key, data-api-url o async dagli script personalizzati.

Google Tag Manager

Utilizza Google Tag Manager quando il tuo team gestisce già script di terze parti tramite GTM.

Apri il tuo contenitore GTM.
Crea un nuovo tag Personalizzato HTML.
Incolla lo snippet ChattyBox.
Utilizza un attivatore Tutte le pagine o un attivatore più ristretto solo per le pagine che dovrebbero mostrare il widget.
Visualizza l'anteprima del contenitore, verifica il caricamento del widget, quindi pubblica.

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

Se il tuo sito utilizza la modalità di consenso o una politica di consenso dei tag, assicurati che il widget possa essere caricato nelle pagine in cui i visitatori hanno bisogno di aiuto.

WordPress

ChattyBox non richiede un plugin WordPress. Utilizza una delle posizioni degli script già supportate dalla tua configurazione WordPress:

Impostazioni del tema che forniscono script di intestazione o piè di pagina.
Un tema figlio che controlla il modello del piè di pagina.
Un plugin per script di intestazione/piè di pagina.
Google Tag Manager se il tuo sito WordPress lo utilizza già.

Incolla lo snippet in una posizione globale nel piè di pagina in modo che venga visualizzato nelle pagine pubblicate, nei post, nei documenti e negli articoli della knowledge base in cui il chatbot dovrebbe essere disponibile.

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

Evita di aggiungere il widget a wp-admin, pagine di pagamento, account o pagine di iscrizione private a meno che tali pagine non siano intenzionalmente pubbliche e supportate.

Verifica

Dopo l'installazione, esegui la checklist di avvio prima di annunciare il chatbot:

Apri una pagina pubblica in una finestra di navigazione in incognito.
Verifica che venga visualizzato il widget di avvio.
Apri il widget e fai una domanda reale al cliente.
Verifica che la risposta includa citazioni della fonte.
Controlla la console del browser per verificare se mancano data-api-key, mancanti data-api-url o errori di chiave/origine.

Ciò che appartiene alla sceneggiatura​

Semplice HTML​

Next.js / React Shell dell'app​

Docusaurus​

Generico CMS/Personalizzato HTML​

Google Tag Manager​

WordPress​

Verifica​