AMM AI Sales Pet/Widget AI Salesman untuk website klienDemo LumaCara pasangTenantGenerator

Cara pasang

Widget masuk ke situs klien lewat satu script tag. Tidak ada rebuild website, tidak ada kunci API di browser. Pet demo hidup di pojok halaman ini, jadi semua yang tertulis di bawah bisa langsung dicoba.

1. Siapkan tenant

Satu klien = satu tenant di backend AMM: katalog terverifikasi manusia (SKU, harga, spesifikasi, URL produk), aturan rekomendasi, pertanyaan pengarah, karakter + nama + warna pet, baris celoteh, pengetahuan toko (kolom pengetahuan: fakta resmi seperti garansi, ongkir, area layanan, cara bayar, jadi AI bisa menjawab pertanyaan di luar katalog tanpa mengarang), nomor WhatsApp advisor, dan daftar origin yang boleh memuat widget. Tenant tak dikenal atau origin di luar daftar berarti widget tidak muncul sama sekali; tidak ada fallback ke katalog lain.

Semuanya diisi lewat /admin, dasbor internal di balik sandi. Menambah klien berarti menambah satu baris di basis data, dan widgetnya langsung hidup tanpa menunggu deploy.

2. Tempel lewat GTM

GTM → TAGS → CUSTOM HTML → ALL PAGES
<script
  src="https://chatbot.adsmediamix.id/v1/loader.js"
  data-tenant="ID_KLIEN"
  async></script>

Atribut opsional: data-position="kiri" memindahkan pet ke pojok kiri, data-character="jurnalis|cs|rider|kucing|ninja|kubus" memaksa wujud karakter, data-character-url="..." memakai maskot gambar milik klien, data-roam="off" mematikan jalan-jalan, data-sound="off" mematikan bunyi. ID tenant bukan rahasia; yang menentukan adalah pasangan tenant+origin yang diperiksa server.

Klien tidak punya GTM? Tidak masalah, GTM cuma salah satu pintu. Yang dikirim ke klien tetap potongan yang sama persis, bedanya hanya di mana ditempelnya:

WordPressPlugin WPCode atau Insert Headers and Footers, bagian Footer. Alternatif: footer.php tema, sebelum </body>.
WooCommerceSama dengan WordPress. Widget otomatis membaca data produk WooCommerce dari JSON-LD halaman.
ShopifyOnline Store, Themes, Edit code, berkas theme.liquid, tempel sebelum </body>.
Wix / SquarespaceSettings, Custom Code atau Code Injection, bagian Footer, berlaku semua halaman.
WebflowProject Settings, Custom Code, Footer Code.
Website customDeveloper klien menempel sebelum </body>, atau kita kirim potongannya lewat email.
Klien tanpa orang teknisMinta akses CMS sekali, tim AMM yang memasang. Lima menit, dan ini yang paling sering dipilih klien UMKM.

Apa pun jalurnya, domain klien wajib didaftarkan lebih dulu di kolom origin pada dasbor tenant. Domain di luar daftar tidak akan memunculkan widget, dan itu memang disengaja.

3. Pilih karakter

Tiga wujud tersedia; semuanya SVG beranimasi yang mewarnai dirinya dengan warna aksen tenant, bisa diseret, jalan-jalan, dan punya enam gerakan yang dipakai bergantian: lambai, lompat, joget, angguk, tengok kiri-kanan, dan hop senang (khusus saat rekomendasi berhasil keluar). Klik untuk mengganti pet di halaman ini secara langsung:

Per tenant lewat kolom character, per pemasangan lewat data-character. Maskot milik klien juga bisa: unggah gambar (PNG/webp/GIF transparan, disarankan sekitar 512px) lewat tombol di atas untuk mencobanya langsung; di produksi, file yang sama dipasang sebagai characterUrl tenant atau atribut data-character-url. Gambar kustom tetap bernapas, melambai, jalan-jalan, dan bisa diseret; GIF/APNG beranimasi ikut bergerak sendiri.

4. Sapaan proaktif dan kontinuitas

Pet tidak menunggu diklik. Dia menyapa lewat gelembung kecil yang isinya mengikuti konteks: salam pertama (sekali per sesi), produk yang sedang dilihat pengunjung, kedalaman scroll, niat keluar (kursor melesat ke atas), dan baris celoteh milik tenant (kolom celoteh, boleh memakai {produk}). Klik gelembung atau pet-nya, baru chat terbuka.

Batasnya keras supaya menarik, bukan mengganggu: gelembung menutup sendiri dalam 10 detik, jeda antar gelembung 35 detik, maksimal 5 per halaman, dan tombol silang di gelembung mendiamkan pet satu sesi penuh. Percakapan tersimpan per sesi dan ikut pindah halaman: pengunjung yang berpindah-pindah tetap melanjutkan obrolan yang sama, lengkap dengan kartu rekomendasinya. Pesan pet juga keluar dengan irama mengetik manusiawi, dan jawaban AI tampil mengalir kata per kata (setelah lolos guardrail).

Tiga pelengkap per tenant: kolom penawaran berisi SATU penawaran resmi yang ditawarkan pet saat pengunjung berniat menutup tab (teksnya data tenant, AI tidak pernah mengarang diskon; klik gelembungnya tercatat sebagai offer_click); pengunjung yang kembali setelah lebih dari 20 jam disapa "Halo lagi" lengkap dengan topik terakhirnya; dan kolom suara menyalakan bunyi halus saat panel dibuka atau pesan tiba (bawaan mati, bisa dipaksa mati per pemasangan lewat data-sound="off").

Untuk laporan ke klien, setiap pertanyaan bebas dicatat di server berikut teksnya dan dipilah question_answered / question_unanswered. Endpoint /api/pet/ringkasan mengembalikan hitungan event plus daftar pertanyaan yang belum terjawab beberapa hari terakhir; itulah bahan laporan mingguan "ini yang dicari pasar, ini yang belum dijawab katalogmu".

5. Koneksi ke data website

Baca data halaman (otomatis, nol integrasi)

Widget membaca JSON-LD schema.org Product dan Open Graph yang sudah diterbitkan halaman. Nama produk yang terdeteksi dipakai untuk sapaan kontekstual dan dikirim ke AI sebagai konteks. Jalan di WordPress, WooCommerce, Shopify, dan CMS mana pun yang SEO-nya sehat.

Katalog terverifikasi (sumber kebenaran harga)

Katalog tenant ditarik crawler AMM dari situs klien (halaman /generator) lalu diverifikasi manusia sebelum dinyalakan. AI hanya boleh menyebut harga dan spesifikasi dari sini; angka di luar katalog ditahan guardrail di kode.

API halaman (untuk SPA dan keranjang asli)

window.AMMPet.set({produk}) mendorong konteks produk aktif dari aplikasi klien; window.AMMPet.onAddToCart = fn menyambungkan tombol keranjang widget ke keranjang asli situs.

Jembatan halaman-chat dua arah (journey tidak putus)

Tombol "Lihat produk" mengecilkan chat lalu menggulir + menyorot bagian produknya di halaman yang sama (tab baru hanya untuk tujuan di luar situs; pindah halaman se-situs tetap satu tab dan percakapan ikut). Sebaliknya, kartu produk yang diberi atribut data-pet-produk="Nama" (atau panggilan window.AMMPet.lihat) membuat pet ikut nyambung saat diklik pengunjung, tercatat sebagai event product_interest; window.AMMPet.buka() membuka chat dari CTA milik halaman. Chip "Lihat koleksi" muncul kalau halaman punya id "koleksi" (menggulir ke sana) atau elemen ber-atribut data-pet-koleksi berisi URL halaman koleksi (pindah halaman satu tab, percakapan ikut).

Konektor feed (tahap berikutnya)

Sinkronisasi berkala dari feed WooCommerce REST, Shopify products.json, atau Google Sheet untuk harga dan stok yang berubah harian.

6. Petakan event di GA4

Widget mendorong event berikut ke dataLayer, masing-masing membawa objek amm_pet (tenant, sid, halaman, UTM, dan detail event). Salinan event juga dicatat di server AMM untuk pelaporan.

pet_impressionWidget termuat di halaman
pet_openPengunjung membuka pet
proactive_messagePet menyapa lewat gelembung (membawa via: greeting/returning/product_context/scroll_depth/exit_intent/exit_intent_offer/idle)
offer_clickGelembung penawaran resmi diklik
conversation_startedInteraksi pertama (chip atau ketik)
intent_selectedJawaban pertanyaan pengarah pertama
budget_selectedJawaban pertanyaan budget
answer_selectedJawaban pertanyaan pengarah lainnya
free_text_questionPertanyaan bebas diketik
product_recommendedKartu rekomendasi tampil (membawa daftar SKU)
product_interestPengunjung mengklik kartu produk di HALAMAN (data-pet-produk)
product_clickTombol "Lihat produk" diklik
add_to_cartTombol "+ Keranjang" diklik
whatsapp_handoffEstafet ke WhatsApp advisor
human_handoffEstafet ke advisor tanpa WhatsApp

7. Garis keamanan

  • Kunci OpenRouter dan kredensial lain hanya hidup di server; loader tidak memuat rahasia apa pun.
  • Bootstrap memeriksa origin lawan allowlist tenant, lalu menerbitkan token HMAC berumur 2 jam; chat dan event hanya menerima panggilan bertoken, dan token basi disegarkan otomatis oleh widget.
  • Jawaban model dijaga di kode: angka rupiah di luar katalog ditahan, SKU yang disetop tidak boleh ditawarkan. Data halaman hanya jadi konteks, tidak pernah jadi sumber harga.
  • Ada pembatas laju per tenant+IP dan batas panjang pesan.
  • Kalau backend mati, widget tidak muncul; situs klien tidak pernah ikut rusak.