Canllawiau Gosod

Mae’r integreiddiad widget.js lletyol yn llwybr heb adeiladu pan fyddwch am i ChattyBox gynnal y rhyngwyneb a’r cludiant. Os dylai eich ap gychwyn yr un UI o god npm, defnyddiwch mountWidget(). I fod yn berchen ar yr UI, defnyddiwch y SDK di-ben.

Cyn Gosod

Cwblhewch lif Dechrau Arni yn gyntaf: ffurfweddwch a sgrapiwch y ffynhonnell, adolygwch dudalennau wedi’u mynegeio, a gwiriwch atebion cynrychioliadol yn Test Chat.

Yna crëwch allwedd sy’n ddiogel i’r porwr yn Public Keys a chyfyngwch ei tharddiadau a ganiateir. Dychwelwch i Embed, dewiswch yr allwedd honno, cwblhewch unrhyw addasu widget lletyol, a chopïwch y pyt a gynhyrchir. Mae’n cynnwys yr allwedd gyhoeddus a’r URL API ar gyfer eich prosiect:

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

Am lwyfannau sy’n canolbwyntio ar ddogfennaeth, gweler y canllawiau chatbot AI MkDocs, chatbot AI VitePress a chatbot AI GitBook.

Disodlwch YOUR_API_KEY ag allwedd widget gyhoeddus eich dangosfwrdd. Cadwch werth data-api-url yn union fel y’i dangosir yn y dangosfwrdd. Wrth gynhyrchu, URL sefydlog https://...convex.site/chat ar gyfer API widget cyhoeddus yw hwn.

Beth Sy’n Perthyn i’r Sgript

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

Priodoledd	Angenrheidiol	Defnyddiwch ef ar gyfer
`src`	Oes	Llwytho JavaScript y widget ChattyBox.
`data-api-key`	Oes	Nodi allwedd widget gyhoeddus eich prosiect.
`data-api-url`	Oes	Anfon ceisiadau widget at API ChattyBox.
`data-locale`	Nac oes	Gorfodi iaith UI y widget ar dudalen benodol.

Defnyddiwch osodiadau’r dangosfwrdd ar gyfer popeth y dylid ei reoli heb ail-ddefnyddio eich gwefan:

Lliwiau, safle, eicon, teitl a neges groeso’r widget.
Modd iaith diofyn ac a ganiateir diystyru data-locale.
Creu a dileu allweddi cyhoeddus, ac unrhyw gyfyngiadau tarddiad a ganiateir sydd wedi’u ffurfweddu ar gyfer eich prosiect.
Sgrapio, ail-sgrapio, sgwrs brawf, dadansoddeg a bylchau cynnwys.

Os ydych yn galluogi’r clo config-as-code, daw gosodiadau’r cynorthwyydd, ffynhonnell, runtime a widget a gefnogir o’r ffurfweddiad a ddefnyddiwyd yn lle ffurflenni’r dangosfwrdd. Mae allweddi cyhoeddus a tharddiadau a ganiateir yn parhau’n gredydau gosod prosiect, nid yn werthoedd ffeil ffurfweddu.

HTML Plaen

Gludwch y pyt unwaith ger diwedd body, ychydig cyn </body>. Mae hyn yn gweithio ar gyfer HTML statig, gwefannau wedi’u codio â llaw a thempledi sy’n darparu 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="YOUR_WIDGET_API_URL"
      async
    ></script>
  </body>
</html>

Next.js / React App Shell

Ar gyfer gwefan Next.js App Router, ychwanegwch y widget at 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="YOUR_WIDGET_API_URL"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Ar gyfer ap React un dudalen, 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.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

Ar gyfer Docusaurus, crëwch neu diweddarwch src/theme/Root.tsx fel bod y widget ar gael ar draws tudalennau dogfennaeth.

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

Os oes gan eich gwefan Docusaurus lwybrau wedi’u cyfieithu, gosodwch data-locale o iaith gyfredol y dudalen neu dibynnwch ar werth <html lang> y dudalen.

Cadwch y llwythwr yn eich plisgyn rhaglen parhaus. Peidiwch â’i ail-greu na’i dynnu yn ystod newidiadau arferol i lwybrau ar ochr y cleient.

Rhyngwyneb Personol

Mae’r widget lletyol yn ddewisol. Os ydych am gael rheolaeth lawn dros rendro, cyflwr negeseuon a chynllun rhyngweithio, defnyddiwch y SDK JavaScript gyda’r un allwedd API widget gyhoeddus ac URL API widget.

CMS Cyffredinol/HTML Personol

Mae gan y rhan fwyaf o lwyfannau CMS ardal cod personol byd-eang, troedyn neu dempled thema. Ychwanegwch y sgript yno fel y gall pob tudalen gyhoeddus lwytho’r widget.

Defnyddiwch y llwybr hwn ar gyfer Webflow, Framer, Squarespace, ardaloedd cod personol Wix, themâu Shopify, templedi HubSpot a llwyfannau CMS personol sy’n gadael i chi olygu HTML byd-eang.

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

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

Google Tag Manager

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

Agorwch eich cynhwysydd GTM.
Crëwch dag Custom HTML newydd.
Gludwch byt ChattyBox.
Defnyddiwch sbardun All Pages, neu sbardun culach ar gyfer y tudalennau a ddylai ddangos y widget yn unig.
Rhagolygwch y cynhwysydd, gwiriwch fod y widget yn llwytho, yna cyhoeddwch.

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

Os yw eich gwefan yn defnyddio modd caniatâd neu bolisi caniatâd tagiau, sicrhewch fod y widget yn cael llwytho ar y tudalennau lle mae angen cymorth ar ymwelwyr.

WordPress

Nid oes angen ategyn WordPress ar ChattyBox. Defnyddiwch un o’r lleoliadau sgript y mae eich gosodiad WordPress eisoes yn eu cefnogi:

Gosodiadau thema sy’n darparu sgriptiau pennyn neu droedyn.
Thema blentyn sy’n rheoli templed y 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, postiadau, dogfennau ac erthyglau cronfa wybodaeth cyhoeddedig lle dylai’r chatbot fod ar gael.

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

Ceisiwch osgoi ychwanegu’r widget at wp-admin, til, cyfrif neu dudalennau aelodaeth breifat oni bai bod y tudalennau hynny’n gyhoeddus ac wedi’u cefnogi’n fwriadol.

Dilysu

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

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

Cyn Gosod​

Beth Sy’n Perthyn i’r Sgript​

HTML Plaen​

Next.js / React App Shell​

Docusaurus​

Rhyngwyneb Personol​

CMS Cyffredinol/HTML Personol​

Google Tag Manager​

WordPress​

Dilysu​

Privacy choices