Panduan Instalasi

Instal ChattyBox dengan memuat satu skrip widget publik di halaman tempat pengunjung dapat mengajukan pertanyaan.

Mulai dari cuplikan di dasbor ChattyBox Anda. Ini mencakup kunci widget publik API dan URL API untuk proyek Anda:

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

Untuk platform dokumentasi, lihat panduan chatbot AI MkDocs, chatbot AI VitePress, dan chatbot AI GitBook.

Ganti YOUR_API_KEY dengan kunci widget publik dari dashboard Anda. Jika dasbor Anda menampilkan data-api-url yang berbeda, pertahankan nilai dasbor dengan tepat.

Apa yang Termasuk dalam Naskah

Gunakan atribut skrip untuk nilai yang harus tersedia sebelum widget dapat dimulai:

Atribut	Diperlukan	Gunakan untuk
`src`	Ya	Memuat JavaScript widget ChattyBox.
`data-api-key`	Ya	Mengidentifikasi kunci widget publik untuk proyek Anda.
`data-api-url`	Ya	Mengirim permintaan widget ke ChattyBox API.
`data-locale`	Tidak	Memaksa bahasa UI widget pada halaman tertentu.

Gunakan pengaturan dasbor untuk segala hal yang harus dikelola tanpa menerapkan ulang situs Anda:

Warna widget, posisi, ikon, judul, dan pesan selamat datang.
Mode bahasa default dan apakah penggantian data-locale diperbolehkan.
Pembuatan kunci publik, penghapusan, dan pembatasan asal yang diizinkan yang dikonfigurasi untuk proyek Anda.
Mengikis, menggores ulang, menguji obrolan, analitik, dan kesenjangan konten.

Biasa HTML

Tempelkan cuplikan sekali di dekat akhir body, tepat sebelum </body>. Ini berfungsi untuk HTML statis, situs kode tangan, dan templat yang mengekspos footer global.

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

Untuk situs Router Aplikasi Next.js, tambahkan widget ke app/layout.tsx dengan next/script sehingga dimuat satu kali untuk keseluruhan aplikasi.

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

Untuk aplikasi satu halaman React, tambahkan skrip satu kali di shell aplikasi tingkat atas atau template HTML Anda. Jangan menyuntikkannya dari setiap komponen rute.

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", "YOUR_WIDGET_API_URL");
    script.setAttribute("data-chattybox-widget", "true");
    document.body.appendChild(script);

    return () => script.remove();
  }, []);

  return null;
}

Docusaurus

Untuk Docusaurus, buat atau perbarui src/theme/Root.tsx sehingga widget tersedia di seluruh halaman dokumen.

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", "YOUR_WIDGET_API_URL");
    script.setAttribute("data-chattybox-widget", "true");
    document.body.appendChild(script);

    return () => script.remove();
  }, []);

  return <>{children}</>;
}

Jika situs Docusaurus Anda telah menerjemahkan rute, atur data-locale dari bahasa halaman saat ini atau andalkan nilai <html lang> halaman.

Generik CMS/Kustom HTML

Sebagian besar platform CMS memiliki kode kustom global, footer, atau area templat tema. Tambahkan skrip di sana sehingga setiap halaman publik dapat memuat widget.

Gunakan jalur ini untuk area kode khusus Webflow, Framer, Squarespace, Wix, tema Shopify, templat HubSpot, dan platform CMS khusus yang memungkinkan Anda mengedit HTML global.

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

Sebelum dipublikasikan, pastikan CMS tidak menghapus data-api-key, data-api-url, atau async dari skrip khusus.

Google Tag Manager

Gunakan Google Tag Manager ketika tim Anda sudah mengelola skrip pihak ketiga melalui GTM.

Buka wadah GTM Anda.
Buat tag Kustom HTML baru.
Tempelkan cuplikan ChattyBox.
Gunakan pemicu Semua Halaman, atau pemicu yang lebih sempit hanya untuk halaman yang seharusnya menampilkan widget.
Pratinjau penampung, verifikasi pemuatan widget, lalu publikasikan.

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

Jika situs Anda menggunakan mode izin atau kebijakan izin tag, pastikan widget diizinkan untuk dimuat pada laman yang pengunjungnya memerlukan bantuan.

WordPress

ChattyBox tidak memerlukan plugin WordPress. Gunakan salah satu lokasi skrip yang sudah didukung oleh pengaturan WordPress Anda:

Pengaturan tema yang menyediakan skrip header atau footer.
Tema anak yang mengontrol templat footer.
Plugin skrip header/footer.
Google Tag Manager jika situs WordPress Anda sudah menggunakannya.

Tempelkan cuplikan di lokasi footer global sehingga muncul di halaman yang dipublikasikan, postingan, dokumen, dan artikel basis pengetahuan tempat chatbot seharusnya tersedia.

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

Hindari menambahkan widget ke wp-admin, checkout, akun, atau halaman keanggotaan pribadi kecuali halaman tersebut sengaja dibuat untuk publik dan didukung.

Verifikasi

Setelah menginstal, jalankan launch checklist sebelum mengumumkan chatbot:

Buka halaman publik di jendela penyamaran.
Konfirmasikan peluncur widget muncul.
Buka widget dan ajukan pertanyaan nyata kepada pelanggan.
Pastikan jawabannya menyertakan kutipan sumber.
Periksa konsol browser apakah ada data-api-key yang hilang, data-api-url yang hilang, atau kesalahan kunci/asal.

Apa yang Termasuk dalam Naskah​

Biasa HTML​

Next.js / React Cangkang Aplikasi​

Docusaurus​

Generik CMS/Kustom HTML​

Google Tag Manager​

WordPress​

Verifikasi​