Canllawiau Gosod

Gosodwch ChattyBox trwy lwytho un sgript teclyn cyhoeddus ar y tudalennau lle dylai ymwelwyr allu gofyn cwestiynau.

Dechreuwch o'r pyt yn eich dangosfwrdd ChattyBox. Mae'n cynnwys y teclyn cyhoeddus API allwedd a API URL ar gyfer eich prosiect:

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

Disodli YOUR_API_KEY gyda'r allwedd teclyn cyhoeddus o'ch dangosfwrdd. Os yw eich dangosfwrdd yn dangos data-api-url gwahanol, cadwch werth y dangosfwrdd yn union.

Beth Sy'n Perthyn i'r Ysgrythur

Defnyddiwch briodoleddau sgript ar gyfer gwerthoedd y mae'n rhaid iddynt fod ar gael cyn y gall y teclyn ddechrau:

Priodoledd	Angenrheidiol	Defnyddiwch ar gyfer
`src`	Oes	Llwytho'r teclyn ChattyBox JavaScript.
`data-api-key`	Oes	Nodi'r allwedd teclyn cyhoeddus ar gyfer eich prosiect.
`data-api-url`	Oes	Anfon ceisiadau teclyn i'r ChattyBox API.
`data-locale`	Nac ydw	Gorfodi iaith UI y teclyn ar dudalen benodol.

Defnyddiwch osodiadau dangosfwrdd ar gyfer popeth y dylid ei reoli heb adleoli eich gwefan:

Lliwiau teclyn, lleoliad, eicon, teitl, a neges groeso.
Modd iaith ddiofyn ac a ganiateir gwrthwneud data-locale.
Creu, dileu allweddi cyhoeddus, ac unrhyw gyfyngiadau tarddiad a ganiateir sydd wedi'u ffurfweddu ar gyfer eich prosiect.
Crafu, ail-sgrapio, sgwrsio prawf, dadansoddeg, a bylchau cynnwys.

plaen HTML

Gludwch y pyt unwaith yn agos at ddiwedd body, ychydig cyn </body>. Mae hyn yn gweithio ar gyfer HTML statig, gwefannau wedi'u codio â llaw, a thempledi sy'n datgelu troedyn byd-eang.

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

Ar gyfer safle Llwybrydd Ap Next.js, ychwanegwch y teclyn i app/layout.tsx gyda next/script fel ei fod yn llwytho unwaith ar gyfer yr ap cyfan.

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

Ar gyfer ap un dudalen React, ychwanegwch y sgript unwaith yn eich plisgyn ap lefel uchaf neu dempled HTML. Peidiwch â'i chwistrellu o bob cydran llwybr.

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

Ar gyfer Docusaurus, creu neu ddiweddaru src/theme/Root.tsx fel bod y teclyn ar gael ar draws tudalennau dogfennau.

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

Os yw eich gwefan Docusaurus wedi cyfieithu llwybrau, gosodwch data-locale o iaith gyfredol y dudalen neu dibynnu ar werth <html lang> y dudalen.

Generig CMS/Cwsm HTML

Mae gan y mwyafrif o lwyfannau CMS god arferiad byd-eang, troedyn, neu faes templed thema. Ychwanegwch y sgript yno fel y gall pob tudalen gyhoeddus lwytho'r teclyn.

Defnyddiwch y llwybr hwn ar gyfer Webflow, Framer, Squarespace, ardaloedd cod arfer Wix, themâu Shopify, templedi HubSpot, a llwyfannau CMS arferol sy'n caniatáu ichi olygu HTML byd-eang.

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

Cyn cyhoeddi, cadarnhewch nad yw'r CMS yn tynnu data-api-key, data-api-url, neu async o sgriptiau personol.

Google Tag Manager

Defnyddiwch Google Tag Manager pan fydd eich tîm eisoes yn rheoli sgriptiau trydydd parti trwy GTM.

Agorwch eich cynhwysydd GTM.
Creu tag Custom HTML newydd.
Gludwch y pyt ChattyBox.
Defnyddiwch sbardun Pob Tudalen, neu sbardun culach ar gyfer y tudalennau a ddylai ddangos y teclyn yn unig.
Rhagolwg o'r cynhwysydd, gwiriwch y llwythi teclyn, yna cyhoeddwch.

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

Os yw'ch gwefan yn defnyddio modd caniatâd neu bolisi caniatâd tag, gwnewch yn siŵr bod y teclyn yn gallu llwytho ar y tudalennau lle mae angen cymorth ar ymwelwyr.

WordPress

Nid oes angen ategyn WordPress ChattyBox. Defnyddiwch un o'r lleoliadau sgript y mae eich gosodiad WordPress eisoes yn ei gefnogi:

Gosodiadau thema sy'n darparu sgriptiau pennyn neu droedyn.
Thema plentyn sy'n rheoli'r templed troedyn.
Ategyn sgript pennyn/troedyn.
Google Tag Manager os yw eich gwefan WordPress eisoes yn ei ddefnyddio.

Gludwch y pyt mewn lleoliad troedyn byd-eang fel ei fod yn ymddangos ar dudalennau cyhoeddedig, postiadau, dogfennau ac erthyglau sylfaen wybodaeth lle dylai'r chatbot fod ar gael.

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

Peidiwch ag ychwanegu'r teclyn at wp-admin, til, cyfrif, neu dudalennau aelodaeth breifat oni bai bod y tudalennau hynny'n fwriadol gyhoeddus ac wedi'u cefnogi.

Dilysu

Ar ôl gosod, rhedwch y rhestr wirio lansio cyn cyhoeddi'r chatbot:

Agorwch dudalen gyhoeddus mewn ffenestr anhysbys.
Cadarnhewch fod lansiwr y teclyn yn ymddangos.
Agorwch y teclyn a gofynnwch gwestiwn cwsmer go iawn.
Gwiriwch fod yr ateb yn cynnwys dyfyniadau ffynhonnell.
Gwiriwch y consol porwr am data-api-key ar goll, data-api-url ar goll, neu wallau allwedd/tarddiad.

Beth Sy'n Perthyn i'r Ysgrythur​

plaen HTML​

Next.js / React App Shell​

Docusaurus​

Generig CMS/Cwsm HTML​

Google Tag Manager​

WordPress​

Dilysu​