Przewodniki instalacji

Zainstaluj ChattyBox, ładując jeden publiczny skrypt widżetu na stronach, na których odwiedzający powinni mieć możliwość zadawania pytań.

Zacznij od fragmentu na pulpicie nawigacyjnym ChattyBox. Zawiera publiczny widget API klucz i API adres URL Twojego projektu:

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

Zastąp YOUR_API_KEY publicznym kluczem widżetu z pulpitu nawigacyjnego. Jeśli na Twoim panelu wyświetla się inna wartość data-api-url, zachowaj dokładnie wartość tego panelu.

Co należy do skryptu

Użyj atrybutów skryptu dla wartości, które muszą być dostępne przed uruchomieniem widżetu:

Atrybut	Wymagane	Użyj go do
`src`	Tak	Ładowanie JavaScriptu widżetu ChattyBox.
`data-api-key`	Tak	Identyfikacja publicznego klucza widgetu dla Twojego projektu.
`data-api-url`	Tak	Wysyłanie żądań widżetów do ChattyBox API.
`data-locale`	Nie	Wymuszanie języka interfejsu użytkownika widgetu na określonej stronie.

Użyj ustawień pulpitu nawigacyjnego do wszystkiego, czym należy zarządzać bez konieczności ponownego wdrażania witryny:

Kolory widgetu, pozycja, ikona, tytuł i wiadomość powitalna.
Domyślny tryb języka i to, czy dozwolone jest zastąpienie data-locale.
Tworzenie i usuwanie klucza publicznego oraz wszelkie ograniczenia dotyczące dozwolonego pochodzenia skonfigurowane dla Twojego projektu.
Skrobanie, ponowne skrobanie, czat testowy, analizy i luki w treści.

Zwykły HTML

Wklej fragment kodu pod koniec body, tuż przed </body>. Działa to w przypadku statycznych HTML, ręcznie kodowanych witryn i szablonów udostępniających globalną stopkę.

<!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 Powłoka aplikacji

W przypadku witryny routera aplikacji Next.js dodaj widżet do app/layout.tsx z next/script, aby ładował się raz dla całej aplikacji.

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

W przypadku aplikacji jednostronicowej React dodaj skrypt raz do powłoki aplikacji najwyższego poziomu lub szablonu HTML. Nie wstrzykiwaj go z każdego komponentu trasy.

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

W przypadku Docusaurus utwórz lub zaktualizuj src/theme/Root.tsx, aby widżet był dostępny na wszystkich stronach dokumentów.

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

Jeśli Twoja witryna Docusaurus przetłumaczyła trasy, ustaw data-locale na podstawie języka bieżącej strony lub polegaj na wartości <html lang> strony.

Ogólny CMS/Niestandardowy HTML

Większość platform CMS ma globalny niestandardowy obszar kodu, stopki lub szablonu motywu. Dodaj tam skrypt, aby każda strona publiczna mogła załadować widżet.

Użyj tej ścieżki dla Webflow, Framer, Squarespace, niestandardowych obszarów kodu Wix, motywów Shopify, szablonów HubSpot i niestandardowych platform CMS, które umożliwiają edycję globalnego HTML.

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

Przed opublikowaniem upewnij się, że CMS nie usuwa data-api-key, data-api-url lub async ze skryptów niestandardowych.

Google Tag Manager

Użyj Google Tag Manager, jeśli Twój zespół zarządza już skryptami innych firm za pośrednictwem GTM.

Otwórz kontener GTM.
Utwórz nowy niestandardowy tag HTML.
Wklej fragment kodu ChattyBox.
Użyj aktywatora Wszystkie strony lub węższego wyzwalacza tylko dla stron, na których powinien być wyświetlany widżet.
Wyświetl podgląd kontenera, sprawdź, czy widżet się ładuje, a następnie opublikuj.

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

Jeśli Twoja witryna korzysta z trybu uzyskiwania zgody lub zasad dotyczących wyrażania zgody na tagi, upewnij się, że widżet może ładować się na stronach, na których odwiedzający potrzebują pomocy.

WordPress

ChattyBox nie wymaga wtyczki WordPress. Użyj jednej z lokalizacji skryptów, które obsługuje już Twoja konfiguracja WordPress:

Ustawienia motywu udostępniające skrypty nagłówka lub stopki.
Motyw potomny kontrolujący szablon stopki.
Wtyczka skryptu nagłówka/stopki.
Google Tag Manager, jeśli Twoja witryna WordPress już z niego korzysta.

Wklej fragment kodu w globalnej stopce, aby pojawił się na opublikowanych stronach, postach, dokumentach i artykułach z bazy wiedzy, w których powinien być dostępny chatbot.

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

Unikaj dodawania widżetu do stron wp-admin, realizacji transakcji, kont lub prywatnego członkostwa, chyba że te strony są celowo publiczne i obsługiwane.

Weryfikacja

Po instalacji uruchom launch checklist przed ogłoszeniem chatbota:

Otwórz stronę publiczną w oknie incognito.
Upewnij się, że pojawił się program uruchamiający widżety.
Otwórz widget i zadaj prawdziwe pytanie klienta.
Sprawdź, czy odpowiedź zawiera cytaty źródłowe.
Sprawdź konsolę przeglądarki pod kątem braku data-api-key, braku data-api-url lub błędów klucza/pochodzenia.

Co należy do skryptu​

Zwykły HTML​

Next.js / React Powłoka aplikacji​

Docusaurus​

Ogólny CMS/Niestandardowy HTML​

Google Tag Manager​

WordPress​

Weryfikacja​