Paigaldusjuhendid

Installige ChattyBox, laadides ühe avaliku vidina skripti lehtedele, kus külastajatel peaks olema võimalik küsimusi esitada.

Alustage oma ChattyBox juhtpaneelil olevast koodilõikest. See sisaldab teie projekti avalikku vidina API võtit ja API URL-i:

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

Asendage YOUR_API_KEY oma armatuurlaual oleva avaliku vidina võtmega. Kui teie armatuurlaual kuvatakse erinev data-api-url, jätke armatuurlaua väärtus täpselt alles.

Mis kuulub stsenaariumi

Kasutage skriptiatribuute väärtuste jaoks, mis peavad olema saadaval enne, kui vidin saab käivituda:

Atribuut	Nõutav	Kasutage seda selleks
`src`	Jah	ChattyBox vidina JavaScripti laadimine.
`data-api-key`	Jah	Teie projekti avaliku vidina võtme tuvastamine.
`data-api-url`	Jah	Vidinataotluste saatmine aadressile ChattyBox API.
`data-locale`	Ei	Vidina kasutajaliidese keele sundimine konkreetsele lehele.

Kasutage armatuurlaua sätteid kõige jaoks, mida tuleks hallata ilma oma saiti ümber paigutamata.

Vidinate värvid, asukoht, ikoon, pealkiri ja tervitussõnum.
Vaikekeelerežiim ja see, kas data-locale alistamine on lubatud.
Avaliku võtme loomine, kustutamine ja kõik teie projekti jaoks konfigureeritud lubatud päritolupiirangud.
Kraapimine, uuesti kraapimine, vestluse, analüüsi ja sisulünkade testimine.

Tavaline HTML

Kleepige koodilõik üks kord body lõppu, vahetult enne </body>. See töötab staatiliste HTML, käsitsi kodeeritud saitide ja globaalset jalust paljastavate mallide puhul.

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

Next.js App Routeri saidi jaoks lisage vidin app/layout.tsx koos next/script abil, et see laaditaks kogu rakenduse jaoks üks kord.

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

React ühelehelise rakenduse puhul lisage skript üks kord oma ülataseme rakenduse kestas või HTML mallis. Ärge süstige seda igast marsruudi komponendist.

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

Docusaurus jaoks looge või värskendage src/theme/Root.tsx, et vidin oleks saadaval kõigil dokumentide lehtedel.

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

Kui teie Docusaurus saidil on tõlgitud marsruudid, määrake data-locale praegusest lehekeelest või tuginege lehe <html lang> väärtusele.

Üldine CMS/Kohandatud HTML

Enamikul CMS platvormidel on globaalne kohandatud kood, jalus või teemamalli ala. Lisage skript sinna, et iga avalik leht saaks vidina laadida.

Kasutage seda teed Webflow, Framer, Squarespace, Wixi kohandatud koodialade, Shopify teemade, HubSpoti mallide ja kohandatud CMS platvormide jaoks, mis võimaldavad teil muuta globaalset HTML.

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

Enne avaldamist veenduge, et CMS ei eemalda kohandatud skriptidest data-api-key, data-api-url ega async.

Google Tag Manager

Kasutage Google Tag Manager, kui teie meeskond juba haldab kolmanda osapoole skripte GTM kaudu.

Avage konteiner GTM.
Looge uus Kohandatud HTML silt.
Kleepige koodilõik ChattyBox.
Kasutage päästikut Kõik lehed või kitsamat päästikut ainult nende lehtede jaoks, mis peaksid vidinat näitama.
Vaadake konteineri eelvaadet, kontrollige vidina laadimist ja seejärel avaldage.

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

Kui teie sait kasutab nõusolekurežiimi või märgendi nõusolekueeskirju, veenduge, et vidinal oleks lubatud laadida lehtedel, kus külastajad abi vajavad.

WordPress

ChattyBox ei vaja WordPress pistikprogrammi. Kasutage ühte skripti asukohtadest, mida teie WordPress seadistus juba toetab:

Teema seaded, mis pakuvad päise või jaluse skripte.
Lapseteema, mis juhib jaluse malli.
Päise/jaluse skripti plugin.
Google Tag Manager, kui teie WordPress sait seda juba kasutab.

Kleepige koodilõik globaalsesse jaluse asukohta, et see ilmuks avaldatud lehtedel, postitustes, dokumentides ja teadmistebaasi artiklites, kus vestlusbot peaks saadaval olema.

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

Vältige vidina lisamist wp-admin-, kassa-, konto- või privaatsetele liikmesuslehtedele, välja arvatud juhul, kui need lehed on tahtlikult avalikud ja toetatud.

Kontrollimine

Pärast installimist käivitage enne vestlusroti väljakuulutamist käivitamise kontrollnimekiri:

Avage avalik leht inkognito aknas.
Kinnitage, et vidina käivitaja ilmub.
Avage vidin ja esitage kliendile tõeline küsimus.
Veenduge, et vastus sisaldab allikaviiteid.
Kontrollige brauseri konsooli puuduvate data-api-key, puuduvate data-api-url või võtme-/lähtevigade suhtes.

Mis kuulub stsenaariumi​

Tavaline HTML​

Next.js / React App Shell​

Docusaurus​

Üldine CMS/Kohandatud HTML​

Google Tag Manager​

WordPress​

Kontrollimine​