Web Live Chat Widget

Web Live Chat Widget

Copy page

Web Live Chat Widget memungkinkan kamu menambahkan chat bubble ke website mana pun hanya dengan satu baris kode. Pengunjung website bisa langsung mengirim pesan dan percakapan masuk ke Mintol Inbox secara real-time.

Cara membuat Widget baru

1. Buka menu Widgets di sidebar Mintol.
2. Klik tombol New Widget.
3. Isi nama widget, lalu klik Create.
4. Widget siap dikonfigurasi dan di-embed ke website.

---

Tab Pengaturan

⚙️ Basic

Pengaturan dasar identitas dan perilaku widget.

Field	Keterangan
Widget Name	Nama internal untuk membedakan antar widget
Active	Toggle untuk mengaktifkan atau menonaktifkan widget
Connected Channel	Channel WhatsApp/Instagram yang menerima pesan dari widget ini

---

🎨 Appearance

Kustomisasi tampilan visual widget agar sesuai dengan branding website.

Field	Keterangan
Color Presets	Pilihan cepat: Purple, Blue, Green, Orange, Dark
Primary Color	Warna utama header dan tombol kirim
Secondary Color	Warna aksen sekunder
User Bubble Color	Warna balon pesan pengunjung
Bot Bubble Color	Warna balon pesan bot/agen
User Text Color	Warna teks pesan pengunjung
Bot Text Color	Warna teks pesan bot/agen
Button Icon	Ikon tombol chat: chat, message, help, atau custom (upload URL gambar sendiri)

Preview interaktif tersedia di samping form — kamu bisa langsung melihat perubahan warna dan ikon secara real-time.

---

🤖 Bot

Identitas dan teks yang ditampilkan kepada pengunjung.

Field	Keterangan
Widget Title	Judul di header widget (contoh: "Chat with us")
Bot Name	Nama yang muncul di bawah judul (contoh: "AI Assistant")
Avatar URL	URL gambar avatar header widget
Bot Avatar URL	URL gambar avatar bubble pesan bot
Greeting	Pesan pertama yang muncul saat widget dibuka
Input Placeholder	Teks placeholder di kolom input (contoh: "Type a message...")
Offline Message	Pesan yang ditampilkan saat tidak ada agen online (opsional)

---

⚡ AI

Aktifkan AI untuk membalas pesan pengunjung secara otomatis.

Field	Keterangan
Enable AI	Toggle untuk mengaktifkan auto-reply AI
AI Model	Model yang digunakan (contoh: gpt-4o-mini)
Temperature	Kreativitas jawaban AI: 0 = konsisten, 1 = kreatif
System Prompt	Instruksi kepribadian dan konteks untuk AI
Knowledge Base	Pilih satu atau lebih Knowledge Base agar AI bisa menjawab berdasarkan dokumen bisnis kamu

---

💬 Messages — Contact Form

Form yang muncul sebelum percakapan dimulai untuk mengumpulkan data pengunjung.

Field	Keterangan
Enable Contact Form	Toggle untuk mengaktifkan form kontak
Form Title	Judul form (contoh: "Before starting chat")
Form Fields	Daftar field yang dikumpulkan: name, phone, email, dll. Setiap field bisa diatur label, tipe, dan apakah wajib diisi

Tipe field yang tersedia: text, email, phone.

---

👤 Handoff CS

Pengaturan untuk meneruskan percakapan dari AI ke agen manusia.

Field	Keterangan
Enable Human Handoff	Toggle untuk mengaktifkan fitur ini
Handoff Keywords	Kata kunci yang memicu handoff (pisahkan dengan koma). Contoh: hubungi cs, bicara manusia, talk to human
Handoff Message	Pesan konfirmasi yang dikirim ke pengunjung saat handoff terjadi

Ketika pengunjung mengirim pesan yang mengandung salah satu keyword, percakapan otomatis diteruskan ke tim CS di Inbox.

---

🔒 Security

Pengamanan widget agar hanya bisa dipakai di domain yang diizinkan.

Field	Keterangan
Allowed Domains	Daftar domain yang diizinkan memuat widget (satu domain per baris). Kosongkan saat testing di localhost
Secret Key	Key rahasia untuk integrasi server-to-server. Jangan share secara publik
Regenerate Key	Buat Secret Key baru jika key lama bocor

Contoh isi Allowed Domains:

Code
yourdomain.com
shop.yourdomain.com

---

📖 Guide — Cara Embed ke Website

Setelah widget dikonfigurasi, kamu bisa embed ke website dengan satu baris kode:

Code
<script
  src="https://mintol.ai/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
  async
></script>

Tempel kode ini tepat sebelum tag </body> di setiap halaman yang ingin menampilkan widget.

HTML Statis

Code
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>

    <!-- Konten website -->
    <h1>Welcome</h1>

    <!-- Mintol Widget -->
    <script
      src="https://mintol.ai/widget.js"
      data-widget-id="YOUR_WIDGET_ID"
      async
    ></script>
  </body>
</html>

Next.js (App Router)

Code
// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://mintol.ai/widget.js"
          data-widget-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

WordPress

Opsi 1 — Plugin (mudah)

1. Install plugin Insert Headers and Footers
2. Buka Settings → Insert Headers and Footers
3. Tempel embed code di kolom Scripts in Footer
4. Klik Save

Opsi 2 — Edit Theme (manual)

1. Buka Appearance → Theme Editor → footer.php
2. Temukan tag </body> di bagian bawah
3. Tempel embed code tepat sebelum tag tersebut
4. Klik Update File

Webflow

1. Buka Project Settings
2. Pilih tab Custom Code
3. Scroll ke bagian Footer Code
4. Tempel embed code
5. Klik Save & re-publish site

Untuk halaman tertentu saja, gunakan Before </body> tag di Page Settings masing-masing halaman.

Shopify

1. Buka Shopify Admin
2. Online Store → Themes → Actions → Edit Code
3. Temukan file theme.liquid di folder Layout
4. Tempel embed code tepat sebelum tag </body>
5. Klik Save

---

Cara Kerja Setelah Instalasi

1. Pengunjung membuka website → widget.js load otomatis, chat bubble muncul di pojok kanan bawah
2. Pengunjung klik & kirim pesan → sesi percakapan dibuat, pesan tersimpan di server
3. Pesan masuk ke Mintol Inbox → muncul real-time di dashboard, agen bisa membalas
4. DM triggers dievaluasi → jika AI aktif, trigger yang cocok menghasilkan balasan otomatis
5. Balasan terkirim ke pengunjung → muncul real-time di widget tanpa refresh halaman

---

Tips & Best Practices

✅ Kosongkan Allowed Domains saat testing di localhost

✅ Isi Allowed Domains setelah deploy ke production untuk keamanan

✅ Buat DM trigger dengan keyword * agar semua pesan mendapat auto-reply

✅ Gunakan greeting yang ramah dan menjelaskan layanan yang tersedia

❌ Jangan pakai Widget ID yang sama di beberapa website berbeda — buat widget terpisah

❌ Jangan share Secret Key secara publik — hanya untuk integrasi server-to-server