1. Apa itu Prefill Chat?

Prefill Chat adalah fitur click-to-chat yang membuka widget Live Chat sekaligus membawa konteks dari halaman tempat pengunjung memulai percakapan. Konteks dapat berupa teks, gambar, atau kombinasi keduanya.

Contohnya, ketika pengunjung menekan tombol “Tanya produk ini”, pesan pertama dapat langsung memuat nama produk, SKU, harga, pertanyaan awal, dan gambar produk. Agent menerima konteks yang sama dengan yang sedang dilihat pengunjung sehingga percakapan dapat dimulai tanpa pertanyaan berulang seperti “Produk yang mana?”.

Prefill Chat bukan pesan otomatis dari agent dan bukan pengganti formulir pra-chat. Pesan prefill mewakili pesan dari pengunjung yang dipicu oleh tindakan pada website.

2. Manfaat utama

• Mengurangi pertanyaan klarifikasi dari agent.

• Mempercepat waktu menuju jawaban yang relevan.

• Menjaga konteks saat pengunjung berpindah dari halaman produk ke percakapan.

• Membuat tombol call-to-action lebih spesifik daripada sekadar “Buka chat”.

• Mendukung pengalaman konsultatif karena pengunjung dapat mengedit pesan sebelum mengirim.

3. Kapan Prefill Chat digunakan?

Prefill Chat cocok digunakan ketika halaman memiliki objek atau konteks yang jelas, antara lain:

• Katalog dan detail produk: nama produk, SKU, varian, harga, atau gambar.

• Paket layanan: nama paket, tier, durasi, atau kebutuhan konsultasi.

• Pesanan dan transaksi: nomor referensi yang aman untuk dibagikan, status, atau jenis bantuan.

• Artikel bantuan: judul topik atau langkah yang sedang dibaca.

• Campaign dan landing page: nama program, promo, atau sumber campaign.

Gunakan prefill untuk konteks yang membantu agent memahami maksud pengunjung. Hindari memasukkan data sensitif, token akses, secret, informasi pembayaran, atau data pribadi yang tidak diperlukan.

4. Cara kerja

1) Pengunjung menekan elemen click-to-chat atau aplikasi memanggil Barantum.open({ prefill }).

2) Loader membuka panel chat dan meneruskan payload ke widget.

3) Jika widget belum siap, loader menyimpan payload sementara sampai handshake selesai.

4) Widget memvalidasi payload dan menunggu klien chat berstatus ready. Jika pra-chat aktif, pengiriman menunggu proses pra-chat selesai.

5) Widget memproses prefill sesuai nilai autoSend.

6) Payload yang sudah diproses dihapus dari antrean agar tidak terkirim ulang hanya karena panel ditutup dan dibuka kembali.

Aplikasi tidak perlu menunggu event ready sebelum memanggil open({ prefill }). SDK menangani penundaan tersebut secara internal.

5. Struktur payload

Bentuk dasar payload prefill adalah:

{

  text: "Halo, saya ingin menanyakan produk Kursi Aurora (SKU AUR-001).",

  image: "https://cdn.example.com/products/kursi-aurora.jpg",

  autoSend: true

}

Properti text

• Opsional, bertipe string.

• Spasi pada awal dan akhir akan dihapus.

• Panjang maksimum 2.000 karakter; karakter setelah batas tersebut dipotong.

• Gunakan kalimat yang tetap terdengar seperti pesan pengunjung, bukan instruksi internal untuk agent.

Properti image

• Opsional, bertipe string berupa URL absolut.

• Hanya skema http dan https yang diterima.

• URL relatif, data:, javascript:, atau nilai yang bukan URL valid akan diabaikan.

• Host gambar harus dapat diakses oleh browser dan mengizinkan CORS.

Properti autoSend

• Opsional, bertipe boolean.

• Nilai bawaan adalah true.

• true mengirim prefill secara otomatis setelah chat siap.

• false hanya mengisi text ke composer agar dapat ditinjau atau diedit oleh pengunjung.

Minimal salah satu dari text atau image harus valid. Jika keduanya kosong atau tidak valid, prefill diabaikan dan panel terbuka seperti chat biasa.

6. Cara penerapan

6.1 Atribut HTML deklaratif

Gunakan pendekatan ini untuk halaman server-rendered atau markup statis. Tambahkan data-barantum-chat pada tombol atau tautan, kemudian berikan konteks melalui atribut data.

<button

  type="button"

  data-barantum-chat

  data-barantum-text="Halo, saya ingin menanyakan Kursi Aurora (SKU AUR-001)."

  data-barantum-image="https://cdn.example.com/products/kursi-aurora.jpg">

  Tanya produk ini

</button>

Atribut yang didukung:

• data-barantum-chat menandai elemen sebagai pemicu Prefill Chat.

• data-barantum-text berisi teks pesan.

• data-barantum-image berisi URL gambar absolut.

• data-barantum-autosend="false" mengisi composer tanpa mengirim otomatis.

Loader menggunakan event delegation. Karena itu, elemen yang ditambahkan secara dinamis setelah widget dimuat tetap dapat bekerja selama atributnya benar.

Contoh mode edit sebelum kirim:

<button

  type="button"

  data-barantum-chat

  data-barantum-text="Halo, saya ingin berkonsultasi tentang paket Enterprise."

  data-barantum-autosend="false">

  Konsultasikan paket ini

</button>

6.2 API JavaScript

Gunakan API JavaScript jika konteks berasal dari state aplikasi, komponen React/Vue, hasil API, pilihan varian, atau data dinamis lainnya.

Barantum.open({

  prefill: {

    text: "Halo, saya ingin menanyakan Kursi Aurora (SKU AUR-001).",

    image: "https://cdn.example.com/products/kursi-aurora.jpg",

    autoSend: true,

  },

});

Contoh payload dinamis:

function askAboutProduct(product) {

  Barantum.open({

    prefill: {

      text: `Halo, saya ingin menanyakan ${product.name} (SKU ${product.sku}).`,

      image: product.imageUrl,

    },

  });

}

Panggil API dari interaksi yang disengaja oleh pengguna, misalnya klik tombol. Hindari membuka chat otomatis saat halaman dimuat karena dapat mengganggu pengalaman pengguna.

6.3 Embed widget

Prefill Chat tidak memerlukan atribut khusus pada embed. Gunakan konfigurasi widget yang sama dengan integrasi Live Chat biasa.

<script

  src="https://livechat.barantum.com/widget.js"

  data-livechat-url="https://livechat.barantum.com"

  data-livechat-inbox="INBOX_IDENTIFIER_ANDA"

  defer>

</script>

Ganti INBOX_IDENTIFIER_ANDA dengan identifier inbox yang sesuai. Jangan pernah menaruh secret HMAC atau kredensial backend di source frontend.

7. Perilaku autoSend

Saat autoSend bernilai true

• Teks saja dikirim sebagai pesan teks.

• Gambar valid dikirim sebagai lampiran.

• Jika teks dan gambar tersedia, teks digunakan sebagai caption lampiran.

• Pengiriman dilakukan setelah koneksi chat siap.

Saat autoSend bernilai false

• SDK hanya menyalin text ke composer.

• Pengunjung dapat mengubah isi pesan sebelum menekan kirim.

• image tidak dimasukkan sebagai draft dan tidak dikirim otomatis.

• Karena itu, selalu sertakan text jika menggunakan autoSend: false.

Gunakan true untuk tindakan yang eksplisit seperti “Kirim pertanyaan tentang produk ini”. Gunakan false untuk konteks yang sebaiknya dikonfirmasi atau dilengkapi lebih dahulu oleh pengunjung.

8. Pemrosesan gambar dan fallback

Untuk mengirim gambar sebagai lampiran, widget mengambil URL menggunakan fetch dengan mode cors dan tanpa mengirim credentials. Gambar diterima jika:

• Respons HTTP berhasil.

• Content-Type diawali image/.

• Ukuran file lebih dari 0 byte dan tidak melebihi 40 MB.

• Klien chat yang aktif mendukung lampiran.

Jika gambar tidak dapat dijadikan lampiran karena CORS, respons gagal, tipe konten bukan gambar, ukuran tidak sesuai, atau lampiran tidak didukung, konteks tidak langsung dibuang. Widget mengirim teks fallback dengan susunan:

Pesan dari pengunjung

https://cdn.example.com/products/kursi-aurora.jpg

Jika proses pengiriman pesan juga gagal, teks fallback ditempatkan di composer agar pengunjung masih dapat mengirimnya secara manual.

Catatan: URL dengan skema yang tidak didukung sudah dihapus saat normalisasi. Jika text tetap valid, hanya teks yang dikirim; jika tidak ada text valid, seluruh prefill diabaikan.

9. Siklus hidup dan pengiriman satu kali

Prefill dapat dipanggil sebelum widget siap. Loader menahannya sampai iframe menyelesaikan handshake, kemudian widget menunggu koneksi chat siap sebelum memproses pesan.

Setelah mulai diproses, payload dikeluarkan dari antrean. Menutup dan membuka panel kembali tidak mengirim ulang payload yang sama. Namun, setiap pemanggilan baru Barantum.open({ prefill }) dianggap sebagai permintaan baru. Pastikan handler aplikasi hanya terpanggil sekali untuk satu tindakan pengguna.

Jika beberapa payload diberikan sebelum widget siap, aplikasi sebaiknya menganggap prefill sebagai konteks terbaru dan tidak mengantrekan banyak permintaan sekaligus.

10. Menyusun isi prefill yang baik

Pesan yang baik harus ringkas, spesifik, dan mudah dipahami tanpa melihat halaman asal.

Disarankan:

• Sertakan nama objek utama, misalnya nama produk atau paket.

• Sertakan identifier yang berguna bagi agent, seperti SKU atau nomor referensi non-sensitif.

• Sertakan pertanyaan atau intent, bukan hanya nama objek.

• Gunakan harga atau varian hanya jika nilainya benar-benar sama dengan yang sedang dilihat pengguna.

• Gunakan URL gambar stabil yang dapat diakses tanpa cookie autentikasi.

Contoh yang baik:

“Halo, saya ingin menanyakan Kursi Aurora warna abu-abu (SKU AUR-001). Apakah stoknya masih tersedia?”

Kurang informatif:

“Saya mau tanya ini.”

Hindari:

• Instruksi internal seperti “Agent harus menawarkan diskon”.

• Data rahasia, access token, secret, atau informasi kartu pembayaran.

• Pesan sangat panjang yang menutupi pertanyaan utama.

• URL gambar sementara yang kedaluwarsa sebelum widget sempat mengambilnya.

11. Praktik implementasi yang disarankan

• Bentuk payload dari data yang sudah tampil kepada pengunjung agar konteks konsisten.

• Encode nilai dengan aman dan jangan membangun HTML dari input pengguna tanpa sanitasi.

• Gunakan URL HTTPS pada website produksi.

• Konfigurasikan CORS hanya untuk origin yang diperlukan bila kebijakan infrastruktur mengharuskannya.

• Pastikan tombol memiliki label yang menjelaskan hasil tindakan, misalnya “Tanya produk ini”.

• Gunakan autoSend: false ketika pengguna perlu menambahkan detail pribadi atau memilih variasi pertanyaan.

• Jangan menjadikan event ready sebagai syarat manual untuk membuka prefill; SDK sudah menangani antreannya.

12. Troubleshooting

Chat terbuka tetapi tidak ada pesan

Pastikan text atau image memiliki nilai valid. Nilai kosong, tipe data yang salah, serta URL gambar dengan skema selain http/https dapat membuat payload diabaikan.

Gambar muncul sebagai URL

Pastikan URL absolut, respons sukses, host mengizinkan CORS, Content-Type bernilai image/*, ukuran tidak melebihi 40 MB, dan integrasi chat mendukung lampiran.

Pesan hanya muncul di composer

Periksa nilai autoSend atau atribut data-barantum-autosend. Perilaku tersebut memang diharapkan ketika nilainya false.

Gambar tidak muncul saat autoSend false

Ini adalah perilaku yang diharapkan. Mode tersebut hanya mengisi text ke composer. Jika gambar harus dikirim, gunakan autoSend: true atau sediakan alur unggah manual.

Pesan terkirim lebih dari sekali

Periksa apakah event handler, effect, atau listener aplikasi memanggil open({ prefill }) lebih dari sekali. SDK mencegah pengiriman ulang dari satu payload tertunda, tetapi pemanggilan API baru tetap dianggap sebagai permintaan baru.

Gambar dapat dibuka di browser tetapi gagal dilampirkan

Membuka URL secara langsung tidak membuktikan bahwa cross-origin fetch diizinkan. Periksa header CORS, redirect, status respons, Content-Type, dan apakah URL memerlukan cookie karena fetch gambar tidak mengirim credentials.

13. Checklist sebelum produksi

• Tombol membuka chat dari tindakan pengguna yang jelas.

• Pesan memuat konteks yang cukup dan tidak mengandung data sensitif.

• text tetap berada di bawah batas 2.000 karakter.

• URL image absolut, menggunakan HTTPS, stabil, dan lolos CORS.

• Perilaku autoSend sesuai ekspektasi UX.

• Jalur gambar valid dan jalur fallback teks + URL sama-sama diuji.

• Form pra-chat, bila digunakan, selesai sebelum prefill dikirim.

• Satu tindakan pengguna hanya menghasilkan satu pemanggilan prefill.

14. Tutorial: Menambahkan Tombol Prefill Chat pada Dynamic Embed

Bagian ini memperagakan penerapan Prefill Chat pada halaman yang memuat widget Barantum secara dinamis. Tujuannya adalah menyediakan tombol tindakan yang membuka chat dengan pesan awal yang relevan, sambil tetap membawa identitas dan atribut visitor.

14.1 Hasil yang akan dibuat

Setelah implementasi selesai:

• SDK Livechat dimuat melalui JavaScript.

• Widget diinisialisasi satu kali dengan inbox, identitas visitor, tampilan, dan pra-chat.

• Tombol Prefill Chat dinonaktifkan selama SDK belum tersedia.

• Ketika tombol diklik, panel terbuka dan pesan prefill diproses setelah chat siap.

• Kesalahan pemuatan dan inisialisasi ditampilkan melalui status serta console.

14.2 Tambahkan tombol dan status

Letakkan elemen berikut di dalam body. Atribut disabled mencegah pengguna menekan tombol sebelum SDK selesai dimuat. Elemen status memberi informasi yang dapat dibaca pengguna dan teknologi bantu.

<button id="prefill-chat-button" type="button" disabled>

  Konsultasikan layanan ini

</button>

<p id="livechat-status" role="status" aria-live="polite">

  Memuat Livechat...

</p>

14.3 Muat SDK secara dinamis

Buat elemen script, isi src dengan URL widget biasa, lalu tambahkan ke document.body. Pada pola ini, jangan menambahkan data-livechat-url dan data-livechat-inbox pada elemen script jika konfigurasi lengkap akan diberikan melalui Barantum.init().

Alasannya, atribut data-livechat-* akan memicu auto-init saat script dieksekusi. Memanggil Barantum.init() lagi setelah itu dapat membuat dua jalur inisialisasi dan berisiko kehilangan konfigurasi yang hanya tersedia pada salah satu jalur. Tutorial ini memilih satu jalur: script hanya memuat SDK, lalu onload menjalankan Barantum.init() dengan konfigurasi lengkap.

Pastikan URL ditulis sebagai string URL biasa. Jangan menyalin format tautan Markdown seperti [URL](URL) ke atribut src atau konfigurasi JavaScript.

14.4 Inisialisasi widget

Jalankan Barantum.init() di dalam widgetScript.onload. Dengan demikian, API global sudah tersedia ketika konfigurasi diberikan.

Konfigurasi penting pada contoh:

• livechat.baseUrl: alamat layanan Livechat Barantum.

• livechat.inboxIdentifier: identifier inbox tujuan.

• livechat.identifierHash: hasil verifikasi HMAC untuk externalId visitor.

• livechat.appId: pemisah konteks aplikasi jika satu inbox digunakan oleh beberapa aplikasi.

• visitor.externalId: identifier visitor yang sama dengan input saat membuat HMAC.

• visitor.name dan visitor.email: identitas yang ditampilkan pada kontak.

• visitor.attributes: metadata tambahan seperti label dan kode klien.

• displayMode: panel atau fullscreen.

• preChat: mengaktifkan alur pra-chat bila diperlukan.

Setelah init berhasil, hapus kondisi disabled pada tombol. Jangan mengaktifkan tombol hanya karena halaman selesai dimuat; yang dibutuhkan adalah keberhasilan pemuatan dan inisialisasi SDK.

14.5 Hubungkan tombol dengan Prefill Chat

Tambahkan listener klik yang memanggil Barantum.open({ prefill }).

prefillButton.addEventListener("click", function () {

  window.Barantum.open({

    prefill: {

      text: "Halo, saya ingin berkonsultasi mengenai layanan untuk Klien A.",

      autoSend: true,

    },

  });

});

Ketika tombol ditekan, widget dibuka dan payload disimpan sampai chat siap. Jika pra-chat meminta input tambahan, prefill baru diproses setelah proses tersebut selesai.

Pada contoh di atas, autoSend bernilai true sehingga pesan langsung dikirim setelah siap. Untuk memberi kesempatan kepada pengunjung mengedit pesan, gunakan:

prefill: {

  text: "Halo, saya ingin berkonsultasi mengenai layanan ini.",

  autoSend: false,

}

Pada mode autoSend: false, hanya text yang dimasukkan ke composer. Gambar tidak dimasukkan sebagai draft.

14.6 Menambahkan gambar

Tambahkan image jika halaman memiliki gambar produk atau layanan yang relevan.

prefill: {

  text: "Halo, saya ingin menanyakan Kursi Aurora (SKU AUR-001).",

  image: "https://cdn.domain-anda.com/products/kursi-aurora.jpg",

  autoSend: true,

}

URL gambar harus absolut, dapat diakses tanpa cookie autentikasi, menggunakan http/https, dan mengizinkan CORS. Bila gambar tidak dapat diambil, SDK menggunakan teks dan URL gambar sebagai fallback.

14.7 Kode lengkap

Contoh berikut menggabungkan tombol, status, pemuatan SDK, konfigurasi visitor, dan action Prefill Chat. Ganti seluruh nilai placeholder sebelum digunakan.

<!doctype html>

<html lang="id">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Embedding Livechat Barantum</title>

    <link rel="stylesheet" href="styles.css" />

  </head>

  <body>

    <h1>Embedding Livechat Barantum</h1>

    <button id="prefill-chat-button" type="button" disabled>

      Konsultasikan layanan ini

    </button>

    <p id="livechat-status" role="status" aria-live="polite">

      Memuat Livechat...

    </p>

    <script>

      /*

       * Hanya untuk pengujian lokal.

       * Pada production, identifierHash wajib dibuat oleh backend.

       */

      async function generateIdentifierHmac(identifier, secretKey) {

        const encoder = new TextEncoder();

        const key = await crypto.subtle.importKey(

          "raw",

          encoder.encode(secretKey),

          {

            name: "HMAC",

            hash: "SHA-256",

          },

          false,

          ["sign"]

        );

        const signature = await crypto.subtle.sign(

          "HMAC",

          key,

          encoder.encode(identifier)

        );

        return Array.from(new Uint8Array(signature))

          .map((byte) => byte.toString(16).padStart(2, "0"))

          .join("");

      }

      async function loadBarantumLivechat() {

        const prefillButton = document.querySelector(

          "#prefill-chat-button"

        );

        const statusElement = document.querySelector(

          "#livechat-status"

        );

        const visitorId = "VISITOR_EXTERNAL_ID";

        const hmacSecret = "SECRET_TEST_LOKAL";

        try {

          const identifierHash = await generateIdentifierHmac(

            visitorId,

            hmacSecret

          );

          const widgetScript = document.createElement("script");

          widgetScript.src =

            "https://livechat.barantum.com/widget.js";

          widgetScript.onload = function () {

            try {

              window.Barantum.init({

                livechat: {

                  baseUrl: "https://livechat.barantum.com",

                  inboxIdentifier: "INBOX_IDENTIFIER_ANDA",

                  identifierHash,

                  appId: "website-utama",

                },

                visitor: {

                  externalId: visitorId,

                  name: "Nama Pengunjung",

                  email: "pengunjung@example.com",

                  attributes: {

                    label: "Klien A",

                    appId: "website-utama",

                    code: "CLIENT_A",

                  },

                },

                title: "Customer Support",

                subtitle: "Kami siap membantu!",

                logoUrl:

                  "https://domain-anda.com/assets/livechat-logo.png",

                locale: "id",

                position: "right",

                displayMode: "fullscreen",

                preChat: true,

              });

              prefillButton.disabled = false;

              statusElement.textContent =

                "Livechat siap digunakan.";

            } catch (error) {

              statusElement.textContent =

                "Livechat gagal diinisialisasi.";

              console.error(

                "Gagal menginisialisasi Livechat:",

                error

              );

            }

          };

          widgetScript.onerror = function () {

            statusElement.textContent =

              "Script Livechat gagal dimuat.";

            console.error(

              "Livechat Barantum gagal dimuat"

            );

          };

          document.body.appendChild(widgetScript);

        } catch (error) {

          statusElement.textContent =

            "Gagal menyiapkan identitas visitor.";

          console.error(

            "Gagal membuat identifier HMAC:",

            error

          );

        }

      }

      document

        .querySelector("#prefill-chat-button")

        .addEventListener("click", function () {

          if (!window.Barantum) {

            console.error(

              "SDK Barantum belum tersedia."

            );

            return;

          }

          window.Barantum.open({

            prefill: {

              text:

                "Halo, saya ingin berkonsultasi mengenai layanan untuk Klien A.",

              autoSend: true,

            },

          });

        });

      loadBarantumLivechat();

    </script>

  </body>

</html>

14.8 Hasil tampilan

Screenshot berikut memperlihatkan hasil implementasi tutorial menggunakan widget lokal dalam mode mock.

Gambar 1 — Halaman setelah SDK berhasil dimuat. Tombol “Konsultasikan layanan ini” sudah aktif dan siap digunakan.

Gambar 2 — Hasil setelah tombol ditekan. Panel Live Chat terbuka dan pesan prefill tampil sebagai pesan pengunjung.

15. Penjelasan Alur Eksekusi

15.1 Halaman menyiapkan tombol

Tombol tersedia sejak HTML dirender tetapi masih disabled. Ini mencegah pemanggilan Barantum.open() sebelum SDK mendefinisikan window.Barantum dan sebelum widget memiliki konfigurasi.

15.2 Identitas visitor disiapkan

visitorId digunakan sebagai externalId. Pada mode pengujian lokal, contoh generateIdentifierHmac() menghasilkan signature HMAC-SHA256 berbentuk hexadecimal lowercase.

Nilai identifier yang ditandatangani harus sama persis dengan visitor.externalId. Perbedaan karakter, kapitalisasi, prefix, atau spasi akan menghasilkan hash yang berbeda dan dapat membuat verifikasi identitas gagal.

15.3 Script widget dimuat

document.createElement("script") membuat loader secara dinamis. Callback onload berjalan setelah file JavaScript berhasil dieksekusi. Callback onerror menangani kegagalan jaringan, URL salah, atau resource yang tidak dapat dimuat.

15.4 Widget diinisialisasi

Barantum.init() membuat container, iframe, dan konfigurasi koneksi. Semua konfigurasi diberikan dalam satu object agar inbox, visitor, atribut, branding, pra-chat, dan mode tampilan berasal dari sumber yang sama.

15.5 Tombol diaktifkan

prefillButton.disabled = false dijalankan hanya setelah init tidak melempar error. Teks status kemudian diubah menjadi “Livechat siap digunakan”.

15.6 Pengunjung menekan tombol

Listener memeriksa keberadaan window.Barantum lalu memanggil open({ prefill }). Panel fullscreen dibuka. SDK menahan payload jika iframe atau koneksi chat belum siap.

15.7 Prefill dikirim

Setelah status chat ready, widget menormalisasi payload. Karena autoSend bernilai true, teks dikirim sebagai pesan visitor. Payload kemudian dikeluarkan dari antrean sehingga membuka ulang panel tidak mengirim pesan yang sama untuk kedua kalinya.

16. HMAC yang Aman untuk Production

Fungsi generateIdentifierHmac() di browser hanya sesuai untuk pengujian lokal. Secret yang tertanam pada JavaScript dapat dibaca melalui source code, DevTools, cache, atau Network panel.

Alur production yang disarankan:

Browser meminta identitas chat ke backend aplikasi

Backend membuat HMAC menggunakan secret inbox

Backend mengembalikan visitorId dan identifierHash

Browser meneruskan keduanya ke Barantum.init()

Backend harus memastikan pengguna sudah terautentikasi sebelum menerbitkan identifierHash. Browser hanya menerima hash yang sudah jadi dan tidak pernah menerima secret inbox.

Jika secret pernah dimasukkan ke frontend atau dibagikan melalui media yang tidak aman, lakukan rotasi secret sebelum implementasi digunakan pada production.

17. Penyesuaian Konteks Dinamis

Nilai prefill tidak harus ditulis permanen. Pada halaman produk, buat pesan dari data produk yang benar-benar sedang ditampilkan. Contohnya:

function openProductChat(product) {

  window.Barantum.open({

    prefill: {

      text: `Halo, saya ingin menanyakan ${product.name} (SKU ${product.sku}).`,

      image: product.imageUrl,

      autoSend: true,

    },

  });

}

Pastikan handler hanya dijalankan satu kali untuk setiap klik. Pada React atau Vue, hindari mendaftarkan listener berulang ketika komponen melakukan render ulang. Jika context berubah, bangun payload dari state terbaru tepat saat pengguna menekan tombol.