Asennusoppaat

Asenna ChattyBox lataamalla yksi julkinen widget-skripti sivuille, joilla kävijöiden pitäisi pystyä esittämään kysymyksiä.

Aloita ChattyBox-hallintapaneelin katkelmasta. Se sisältää julkisen widgetin API avaimen ja API URL-osoitteen projektillesi:

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

Korvaa YOUR_API_KEY kojelaudan julkisella widget-avaimella. Jos hallintapaneelissasi näkyy eri data-api-url, säilytä hallintapaneelin arvo tarkasti.

Mitä käsikirjoitukseen kuuluu

Käytä komentosarjamääritteitä arvoille, joiden on oltava käytettävissä, ennen kuin widget voi käynnistyä:

Attribuutti	Pakollinen	Käytä sitä varten
`src`	Kyllä	Ladataan ChattyBox-widgetin JavaScriptiä.
`data-api-key`	Kyllä	Projektisi julkisen widget-avaimen tunnistaminen.
`data-api-url`	Kyllä	Widget-pyyntöjen lähettäminen kohteeseen ChattyBox API.
`data-locale`	Ei	Widgetin käyttöliittymän kielen pakottaminen tietylle sivulle.

Käytä hallintapaneelin asetuksia kaikkeen, mitä pitäisi hallita ilman sivuston uudelleenkäyttöä:

Widgetin värit, sijainti, kuvake, otsikko ja tervetuloviesti.
Oletuskielitila ja sallitaanko data-locale ohitukset.
Julkisen avaimen luominen, poistaminen ja kaikki projektillesi määritetyt sallitun alkuperän rajoitukset.
Kaapiminen, uudelleenkaappaus, testikeskustelu, analytiikka ja sisältöaukot.

Tavallinen HTML

Liitä katkelma kerran lähelle body:n loppua, juuri ennen </body>. Tämä toimii staattisissa HTML, käsin koodatuissa sivustoissa ja malleissa, jotka paljastavat maailmanlaajuisen alatunnisteen.

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

Jos kyseessä on Next.js App Router -sivusto, lisää widget kohteeseen app/layout.tsx komennolla next/script, jotta se latautuu kerran koko sovellukselle.

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

Jos kyseessä on React yksisivuinen sovellus, lisää komentosarja kerran ylätason sovelluksen kuoreen tai HTML -malliin. Älä ruiskuta sitä jokaisesta reitin komponentista.

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

Luo tai päivitä Docusaurus src/theme/Root.tsx, jotta widget on käytettävissä kaikilla dokumenttisivuilla.

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

Jos Docusaurus-sivustollasi on käännetty reittejä, aseta data-locale nykyisestä sivun kielestä tai luota sivun <html lang>-arvoon.

Yleinen CMS/Muokattu HTML

Useimmissa CMS-alustoissa on globaali mukautettu koodi, alatunniste tai teemamallialue. Lisää komentosarja sinne, jotta jokainen julkinen sivu voi ladata widgetin.

Käytä tätä polkua Webflow-, Framer-, Squarespace-, Wix-muokattuihin koodialueisiin, Shopify-teemoihin, HubSpot-malleihin ja mukautetuille CMS-alustoille, joiden avulla voit muokata maailmanlaajuisia HTML.

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

Varmista ennen julkaisua, että CMS ei poista data-api-key-, data-api-url- tai async mukautetuista skripteistä.

Google Tag Manager

Käytä Google Tag Manager, kun tiimisi hallinnoi jo kolmannen osapuolen skriptejä GTM:n kautta.

Avaa GTM-säiliö.
Luo uusi Muokattu HTML -tunniste.
Liitä katkelma ChattyBox.
Käytä Kaikki sivut -laukaisinta tai kapeampaa triggeriä vain niille sivuille, joilla widgetin pitäisi näkyä.
Esikatsele säilöä, tarkista widgetin lataukset ja julkaise sitten.

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

Jos sivustosi käyttää suostumustilaa tai tagin suostumuskäytäntöä, varmista, että widget saa latautua sivuilla, joilla vierailijat tarvitsevat apua.

WordPress

ChattyBox ei vaadi WordPress-laajennusta. Käytä jotakin komentosarjan sijainneista, joita WordPress-kokoonpanosi jo tukee:

Teema-asetukset, jotka tarjoavat ylä- tai alatunnisteen komentosarjoja.
Lapsiteema, joka ohjaa alatunnistemallia.
Ylä-/alatunnisteen komentosarjalaajennus.
Google Tag Manager, jos WordPress-sivustosi käyttää sitä jo.

Liitä katkelma yleiseen alatunnisteeseen niin, että se näkyy julkaistuilla sivuilla, viesteissä, asiakirjoissa ja tietokannan artikkeleissa, joissa chatbotin pitäisi olla saatavilla.

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

Vältä widgetin lisäämistä wp-admin-, kassa-, tili- tai yksityisille jäsensivuille, elleivät nämä sivut ole tarkoituksella julkisia ja tuettuja.

Vahvistus

Asennuksen jälkeen suorita käynnistyksen tarkistuslista ennen chatbotin ilmoittamista:

Avaa julkinen sivu incognito-ikkunassa.
Vahvista, että widget-käynnistin tulee näkyviin.
Avaa widget ja kysy asiakkaalta oikea kysymys.
Varmista, että vastaus sisältää lähdeviittauksia.
Tarkista selainkonsolista puuttuvien data-api-key, puuttuvien data-api-url tai avain-/alkuperävirheiden varalta.

Mitä käsikirjoitukseen kuuluu​

Tavallinen HTML​

Next.js / React App Shell​

Docusaurus​

Yleinen CMS/Muokattu HTML​

Google Tag Manager​

WordPress​

Vahvistus​