Průvodci instalací

Hostovaná integrace widget.js je cesta bez sestavení, pokud chcete, aby ChattyBox spravoval rozhraní i přenos dat. Pokud má vaše aplikace inicializovat stejné rozhraní z kódu npm, použijte mountWidget(). Chcete-li vlastnit rozhraní, použijte headless SDK.

Než začnete s instalací

Nejprve dokončete postup Začínáme: nakonfigurujte a scrapujte zdroj, zkontrolujte indexované stránky a ověřte reprezentativní odpovědi v Test Chat.

Poté vytvořte klíč bezpečný pro prohlížeč v části Public Keys a omezte jeho povolené originy. Vraťte se do Embed, vyberte tento klíč, dokončete případné přizpůsobení hostovaného widgetu a zkopírujte vygenerovaný úryvek. Obsahuje veřejný klíč a URL API vašeho projektu:

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

Pro platformy zaměřené na dokumentaci použijte průvodce AI chatbot pro MkDocs, AI chatbot pro VitePress a AI chatbot pro GitBook.

Nahraďte YOUR_API_KEY veřejným klíčem widgetu z řídicího panelu. Hodnotu data-api-url ponechte přesně tak, jak je zobrazena v řídicím panelu. V produkci jde o stabilní URL https://...convex.site/chat pro veřejné API widgetu.

Co patří do skriptu

Atributy skriptu používejte pro hodnoty, které musejí být dostupné ještě před spuštěním widgetu:

Atribut	Povinné	Použijte jej pro
`src`	Ano	Načtení JavaScriptu widgetu ChattyBox.
`data-api-key`	Ano	Identifikaci veřejného klíče widgetu vašeho projektu.
`data-api-url`	Ano	Odesílání požadavků widgetu do API ChattyBox.
`data-locale`	Ne	Vynucení jazyka rozhraní widgetu na konkrétní stránce.

Nastavení v řídicím panelu používejte pro vše, co má být spravováno bez opětovného nasazení webu:

Barvy, pozice, ikona, název a uvítací zpráva widgetu.
Výchozí režim jazyka a to, zda je povoleno přepsání pomocí data-locale.
Vytváření a mazání veřejných klíčů a všechna omezení povolených originů nakonfigurovaná pro projekt.
Scraping, opětovný scraping, testovací chat, analytika a mezery v obsahu.

Pokud povolíte zámek konfigurace jako kódu, asistent, zdroj, runtime a podporovaná nastavení widgetu budou pocházet z nasazené konfigurace místo z formulářů řídicího panelu. Veřejné klíče a povolené originy zůstávají přihlašovacími údaji nastavení projektu, nikoli hodnotami konfiguračního souboru.

Obyčejné HTML

Vložte úryvek jednou poblíž konce body, těsně před </body>. Funguje to pro statické HTML, ručně kódované weby a šablony s globálním zápatím.

<!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 / shell aplikace React

U webu Next.js App Router přidejte widget do app/layout.tsx pomocí 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="YOUR_WIDGET_API_URL"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

V jednostránkové aplikaci React přidejte skript jednou do shellu aplikace nejvyšší úrovně nebo do šablony HTML. Nevkládejte jej z komponenty každé trasy.

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

V Docusauru vytvořte nebo aktualizujte src/theme/Root.tsx, aby byl widget dostupný na všech stránkách dokumentace.

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

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

Loader ponechte v trvalém shellu aplikace. Během běžných změn tras na straně klienta jej znovu nevytvářejte ani neodstraňujte.

Vlastní rozhraní

Hostovaný widget je volitelný. Pokud chcete plnou kontrolu nad vykreslováním, stavem zpráv a návrhem interakcí, použijte JavaScript SDK se stejným veřejným klíčem API widgetu a URL API widgetu.

Obecný CMS / vlastní HTML

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

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

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

Před zveřejněním ověřte, že CMS z vlastních skriptů neodstraňuje data-api-key, data-api-url ani async.

Google Tag Manager

Google Tag Manager použijte, pokud váš tým už spravuje skripty třetích stran prostřednictvím GTM.

Otevřete kontejner GTM.
Vytvořte nový tag Custom HTML.
Vložte úryvek ChattyBox.
Použijte spouštěč All Pages nebo užší spouštěč pouze pro stránky, kde se má widget zobrazovat.
Prohlédněte si 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="YOUR_WIDGET_API_URL"
  async
></script>

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

WordPress

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

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

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

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

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

Ověření

Po instalaci před oznámením chatbota proveďte kontrolní seznam před spuštěním:

Otevřete veřejnou stránku v anonymním okně.
Ověřte, že se zobrazí spouštěč widgetu.
Otevřete widget a položte skutečnou otázku zákazníka.
Ověřte, že odpověď obsahuje citace zdrojů.
Zkontrolujte konzoli prohlížeče kvůli chybějícímu data-api-key, chybějícímu data-api-url nebo chybám klíče/originu.

Než začnete s instalací​

Co patří do skriptu​

Obyčejné HTML​

Next.js / shell aplikace React​

Docusaurus​

Vlastní rozhraní​

Obecný CMS / vlastní HTML​

Google Tag Manager​

WordPress​

Ověření​

Privacy choices