Instalační příručky

Nainstalujte ChattyBox načtením jednoho veřejného skriptu widgetu na stránky, kde by měli mít návštěvníci možnost klást otázky.

Začněte úryvkem na hlavním panelu ChattyBox. Zahrnuje veřejný klíč widgetu API a API URL pro váš projekt:

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

Nahraďte YOUR_API_KEY veřejným klíčem widgetu z vašeho řídicího panelu. Pokud váš řídicí panel zobrazuje jinou hodnotu data-api-url, ponechte hodnotu řídicího panelu přesně.

Co patří do scénáře

Použijte atributy skriptu pro hodnoty, které musí být k dispozici před spuštěním widgetu:

Atribut	Povinné	Použijte to pro
`src`	Ano	Načítání JavaScriptu widgetu ChattyBox.
`data-api-key`	Ano	Identifikace veřejného klíče widgetu pro váš projekt.
`data-api-url`	Ano	Odesílání požadavků na widget na ChattyBox API.
`data-locale`	Ne	Vynucení jazyka uživatelského rozhraní widgetu na konkrétní stránce.

Použijte nastavení řídicího panelu pro vše, co by mělo být spravováno, aniž byste museli znovu nasazovat váš web:

Barvy widgetu, pozice, ikona, nadpis a uvítací zpráva.
Výchozí jazykový režim a zda jsou povoleny přepisy data-locale.
Vytvoření, odstranění veřejného klíče a všechna omezení povoleného původu nakonfigurovaná pro váš projekt.
Scraping, re-scraping, testovací chat, analýzy a mezery v obsahu.

Obyčejný HTML

Vložte úryvek jednou blízko konce body, těsně před </body>. Toto funguje pro statické HTML, ručně kódované weby a šablony, které odhalují globální zápatí.

<!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 prostředí aplikace

Pro web Next.js App Router přidejte widget do app/layout.tsx s next/script, aby se načetl jednou pro celou aplikaci.

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

U jednostránkové aplikace React přidejte skript jednou do prostředí aplikace nejvyšší úrovně nebo do šablony HTML. Neaplikujte jej z každé součásti cesty.

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

Pro Docusaurus vytvořte nebo aktualizujte src/theme/Root.tsx, aby byl widget dostupný na stránkách dokumentů.

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

Pokud má váš web Docusaurus přeložené trasy, nastavte data-locale z aktuálního jazyka stránky nebo se spolehněte na hodnotu <html lang> stránky.

Obecný CMS/Vlastní HTML

Většina platforem CMS má globální vlastní kód, zápatí nebo oblast šablony motivu. Přidejte tam skript, aby mohla widget načíst každá veřejná stránka.

Tuto cestu použijte pro Webflow, Framer, Squarespace, oblasti vlastního kódu Wix, motivy Shopify, šablony HubSpot a vlastní platformy CMS, které vám umožňují upravovat globální HTML.

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

Před publikováním se ujistěte, že CMS neodstraňuje data-api-key, data-api-url nebo async z vlastních skriptů.

Google Tag Manager

Použijte Google Tag Manager, když váš tým již spravuje skripty třetích stran prostřednictvím GTM.

Otevřete svůj kontejner GTM.
Vytvořte novou značku Vlastní HTML.
Vložte fragment ChattyBox.
Použijte spouštěč Všechny stránky nebo užší spouštěč pouze pro stránky, na kterých by se měl widget zobrazovat.
Zobrazte náhled kontejneru, ověřte načtení widgetu a poté publikujte.

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

Pokud váš web používá režim souhlasu nebo zásadu souhlasu se značkou, zajistěte, aby se widget mohl načítat na stránkách, kde návštěvníci potřebují pomoc.

WordPress

ChattyBox nevyžaduje plugin WordPress. Použijte jedno z umístění skriptů, které vaše nastavení WordPress již podporuje:

Nastavení motivu, která poskytují skripty záhlaví nebo zápatí.
Podřízený motiv, který ovládá šablonu zápatí.
Plugin skriptu záhlaví/zápatí.
Google Tag Manager, pokud jej váš web WordPress již používá.

Vložte úryvek do globálního umístění zápatí, aby se objevil na publikovaných stránkách, příspěvcích, dokumentech a článcích znalostní báze, kde by měl být chatbot dostupný.

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

Nepřidávejte widget na stránky wp-admin, pokladny, účtu nebo stránky soukromého členství, pokud tyto stránky nejsou záměrně veřejné a podporované.

Ověření

Po instalaci spusťte spustit kontrolní seznam před oznámením chatbota:

Otevřete veřejnou stránku v anonymním okně.
Potvrďte, že se zobrazí spouštěč widgetů.
Otevřete widget a zeptejte se skutečného zákazníka.
Ověřte, zda odpověď obsahuje citace zdroje.
Zkontrolujte, zda v konzole prohlížeče nechybí data-api-key, nechybí data-api-url nebo chyby klíče/původu.

Co patří do scénáře​

Obyčejný HTML​

Next.js / React prostředí aplikace​

Docusaurus​

Obecný CMS/Vlastní HTML​

Google Tag Manager​

WordPress​

Ověření​