Cara mengatur widget chat untuk menampilkan pesan berbeda per halaman situs

Ya, Anda dapat mengatur widget chat Papo (https://papo.global/) untuk menampilkan pesan sambutan berbeda sesuai halaman yang dikunjungi. Meskipun panel memungkinkan Anda menetapkan sapaan proaktif default, personalisasi per halaman dilakukan dengan kode JavaScript kecil yang mendeteksi URL dan mengubah teks sebelum widget muncul.

Situasi	Pendekatan	Hasil
Pesan tunggal untuk seluruh situs	Konfigurasikan sapaan proaktif langsung di panel Papo.	Semua pengunjung melihat pesan yang sama setelah beberapa detik.
Pesan berbeda per halaman	Tambahkan skrip kustom yang membaca URL dan mengganti teks sapaan.	Setiap halaman (mis.: paket, dukungan, blog) menampilkan pendekatan kontekstual.
Integrasi dengan AI	Setelah pengunjung berinteraksi, Super Chat atau Capitão mengambil alih percakapan.	AI menjawab pertanyaan, memenuhi syarat lead, dan menjadwalkan rapat secara otomatis.

Bagaimana personalisasi per halaman bekerja

Widget Papo memuat pesan sambutan yang ditentukan di panel (di Pengaturan → Kotak masuk, pada kotak jenis Situs). Pesan ini muncul secara otomatis setelah beberapa detik. Agar setiap halaman situs menampilkan sapaan berbeda, Anda memerlukan skrip tambahan yang:

Mengidentifikasi halaman saat ini (berdasarkan URL, jalur, atau parameter).
Mengganti teks sapaan sebelum widget menampilkannya.
Mempertahankan perilaku proaktif (pembukaan otomatis) tanpa perubahan.

Ini berguna ketika pengunjung berada di halaman dengan niat berbeda — misalnya, halaman harga membutuhkan pendekatan komersial, sedangkan halaman dukungan lebih cocok dengan sapaan teknis.

Langkah demi langkah untuk menerapkan

1. Konfigurasikan pesan default di panel (opsional)

Buka Pengaturan → Kotak masuk, pilih kotak jenis Situs, dan tentukan sapaan proaktif. Pesan ini akan menjadi fallback jika skrip tidak menemukan kecocokan untuk halaman saat ini.

2. Tambahkan skrip personalisasi ke situs

Sisipkan kode JavaScript di bawah ini ke semua halaman tempat widget dipasang, tepat setelah snippet Papo (sebelum </body>). Contoh ini menggunakan pemetaan sederhana antara jalur URL dan pesan:

<script>
  // Menunggu widget dimuat untuk mengubah pesan
  window.addEventListener('load', function() {
    // Pemetaan: jalur URL → pesan yang diinginkan
    var pesan = {
      '/paket': 'Butuh bantuan memilih paket yang tepat?',
      '/dukungan': 'Perlu bantuan dengan suatu masalah?',
      '/blog': 'Suka artikelnya? Kita bisa membahas topik ini!',
      '/kontak': 'Bicara langsung dengan tim kami.'
    };

    var path = window.location.pathname;
    var pesanBaru = pesan[path];

    if (pesanBaru) {
      // Menemukan elemen yang berisi sapaan (sesuaikan selector jika perlu)
      var sapaan = document.querySelector('.papo-widget__greeting-text');
      if (sapaan) {
        sapaan.textContent = pesanBaru;
      }
    }
  });
</script>

Penting: Selector .papo-widget__greeting-text bersifat ilustratif. Untuk mengidentifikasi elemen yang benar, periksa widget di browser dan sesuaikan selector dengan struktur sebenarnya yang ditampilkan.

3. Uji personalisasi

Buka setiap halaman yang dipetakan di jendela anonim (untuk menghindari cache).
Tunggu waktu yang dikonfigurasi untuk pembukaan otomatis dan periksa apakah pesan yang ditampilkan sesuai dengan yang ditentukan di skrip.
Jika sapaan tidak berubah, periksa apakah selector sudah benar dan apakah skrip dijalankan setelah widget selesai dimuat.

4. Perluas ke logika lain

Anda dapat menyesuaikan skrip untuk menggunakan parameter URL, class di <body>, atau kondisi lainnya. Contoh dengan parameter ?intent=pembelian:

var params = new URLSearchParams(window.location.search);
if (params.get('intent') === 'pembelian') {
  sapaan.textContent = 'Bisakah saya membantu menyelesaikan pembelian?';
}

Untuk siapa konfigurasi ini berguna

E-commerce yang ingin menyapa pengunjung secara berbeda di halaman produk, keranjang, atau halaman checkout.
SaaS dan perusahaan B2B dengan halaman paket, studi kasus, dan dukungan, yang masing-masing membutuhkan nada berbeda.
Agensi dan penyedia layanan yang menginginkan sapaan personal di landing page kampanye.
Tim pemasaran yang menguji pesan berbeda per halaman untuk meningkatkan tingkat dimulainya percakapan.

Pertanyaan umum

Apakah saya perlu mengubah snippet asli widget untuk ini?

Tidak. Snippet Papo tetap sama. Anda hanya menambahkan skrip tambahan yang memanipulasi teks sapaan setelah widget dimuat.

Apakah personalisasi ini berfungsi di platform apa pun (WordPress, Wix, situs statis)?

Ya. Selama Anda dapat menyisipkan JavaScript kustom ke situs, metode ini berfungsi di CMS atau situs HTML apa pun.

Apa yang terjadi jika pengunjung mengakses halaman yang tidak ada dalam pemetaan?

Dalam kasus ini, widget akan menampilkan pesan default yang dikonfigurasi di panel Papo. Jika tidak ada pesan default yang ditentukan, widget dapat terbuka tanpa teks atau dengan fallback generik.

Bisakah saya menggunakan teknik ini untuk menyembunyikan widget di beberapa halaman?

Ya. Dengan JavaScript, Anda dapat menyembunyikan widget sepenuhnya di halaman tertentu dengan menambahkan kondisi yang mengubah gaya display container widget menjadi none.

Apakah personalisasi memengaruhi cara kerja AI (Super Chat/Capitão)?

Tidak. Perubahan hanya bersifat kosmetik. Setelah pengunjung berinteraksi, AI mengambil alih percakapan seperti biasa, menggunakan prompt dan aturan yang dikonfigurasi di panel.

Apakah mungkin juga menyesuaikan warna widget per halaman?

Ya, dengan JavaScript Anda dapat mengubah variabel CSS atau class widget secara dinamis untuk mencerminkan warna berbeda per halaman, meskipun ini membutuhkan pengetahuan manipulasi DOM yang lebih lanjut.