Developer

Panduan Integrasi Widget

Pasang chat widget dengan satu baris script. Ganti YOUR_BOT_PUBLIC_KEY dengan Public Key bot dari dashboard.

1. HTML / situs standar

Tempel sebelum </body>:

<script
  src="https://ailivechat.pro/cdn/widget.js"
  data-bot-id="YOUR_BOT_PUBLIC_KEY"
  data-theme="auto"
  async></script>

2. WordPress

Tambahkan di Appearance → Theme File Editor → footer.php, atau lewat plugin Header & Footer, tepat sebelum </body>.

3. Shopify

Buka Online Store → Themes → Edit code → layout/theme.liquid, lalu tempel script di atas.

4. Next.js (App Router)

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="id">
      <body>
        {children}
        <Script
          src="https://ailivechat.pro/cdn/widget.js"
          strategy="lazyOnload"
          data-bot-id={process.env.NEXT_PUBLIC_LIVECHAT_BOT_ID}
        />
      </body>
    </html>
  );
}

5. Mengirim Data Pengguna yang Login (Username & Member Context)

Jika website Anda memiliki autentikasi member/user, teruskan username ke widget agar AI mengenali akun pengguna dan dapat langsung memeriksa saldo/transaksi via Custom API:

Opsi A: Lewat Atribut HTML <script>

<script
  src="https://ailivechat.pro/cdn/widget.js"
  data-bot-id="YOUR_BOT_PUBLIC_KEY"
  data-username="rere123"
  data-customer-name="Rere Pratama"
  data-context='{"username":"rere123","tier":"VIP"}'
  async></script>

Opsi B: Lewat JavaScript API (React / Vue / SPA)

// Panggil tepat setelah user berhasil login
if (window.AI_LiveChat) {
  window.AI_LiveChat.identify({
    username: "rere123",
    name: "Rere Pratama",
    email: "[email protected]",
    context: {
      username: "rere123",
      member_id: "MEM-9876",
      tier: "VIP"
    }
  });
}

6. Atribut penting

data-bot-id — wajib, Public Key bot
data-username — opsional, username akun member untuk AI tool calling
data-customer-name — opsional, nama panggilan pengunjung
data-context — opsional, JSON string context profil member
data-theme — light, dark, atau auto
data-position — bottom-right atau bottom-left

7. Domain whitelist

Widget hanya aktif di domain yang sudah didaftarkan di dashboard bot (tab Embed & Integration). Tambahkan juga localhost untuk development.

Belum punya bot? Daftar gratis, buat bot, lalu salin embed code dari dashboard. Butuh REST API (WhatsApp, Telegram, headless chat)? Lihat External Developer API.

Buat akun Masuk ke dashboard