Chat Tertanam

Tampilkan widget chat secara inline di halaman Anda alih-alih sebagai gelembung mengambang

Semua Paket

Ringkasan

Secara default, widget obrolan Asyntai muncul sebagai gelembung mengambang di sudut situs web Anda. Dengan Obrolan Tertanam, Anda juga dapat menampilkan obrolan langsung di halaman Anda — misalnya, di bagian "Obrolan dengan kami" di halaman utama Anda.

Gelembung mengambang tetap berfungsi bersamaan dengan obrolan tertanam. Pengunjung yang tidak menggulir ke bagian tertanam tetap dapat menggunakan gelembung. Keduanya berbagi percakapan yang sama.

Cara Kerjanya

Tambahkan satu tag skrip Tempatkan di mana saja Anda ingin obrolan muncul di HTML Anda

Obrolan ditampilkan secara inline Widget muncul di posisi tersebut, selalu terlihat, ukuran sama dengan obrolan biasa

Gelembung tetap aktif Gelembung mengambang tetap di sudut untuk pengunjung yang tidak melihat obrolan tertanam

Percakapan bersama Pesan disinkronkan antara obrolan tertanam dan widget mengambang secara real-time

Pengaturan

Tambahkan satu baris HTML ini di mana saja Anda ingin obrolan muncul di halaman Anda:

<script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Ganti YOUR_WIDGET_ID dengan ID widget Anda. Anda dapat menemukan kode embed dengan ID Anda yang sudah terisi di halaman pengaturan Obrolan Tertanam.

Catatan: Skrip utama chat-widget.js juga harus ada di halaman. Jika Anda sudah memasang widget Asyntai di situs Anda, ini sudah ditangani.

Contoh

Berikut cara Anda menggunakannya di halaman utama:

<section style="max-width: 500px; margin: 0 auto;">
    <h2>Chat with us</h2>
    <p>Ask us anything — our AI assistant is here to help.</p>

    <!-- The chat will appear right here -->
    <script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</section>

Detail

Ukuran

Obrolan tertanam ditampilkan dengan ukuran yang sama dengan widget mengambang: lebar 400px dan tinggi 650px di desktop, lebar penuh dan tinggi 550px di ponsel. Anda dapat mengontrol posisinya dengan mengatur gaya kontainer induk.

Perilaku Gelembung Mengambang

Saat obrolan tertanam terlihat di layar dan pengunjung mengklik gelembung mengambang, halaman bergulir ke obrolan tertanam. Jika obrolan tertanam tidak terlihat, gelembung membuka overlay obrolan mengambang biasa.

Sinkronisasi Pesan

Obrolan tertanam dan mengambang berbagi percakapan yang sama. Pesan yang dikirim dari salah satu muncul di keduanya. Sesi, konteks AI, dan riwayat obrolan yang sama digunakan.

Beberapa Halaman

Anda dapat menggunakan obrolan tertanam di beberapa halaman dan widget mengambang biasa di halaman lain. Cukup sertakan skrip embed di halaman tempat Anda menginginkan obrolan inline. Percakapan tetap berlanjut antar halaman seperti biasa.

Pratinjau Langsung

Berikut obrolan tertanam langsung sehingga Anda dapat melihat tampilannya:

Persyaratan

Widget obrolan utama Asyntai (chat-widget.js) harus terpasang di halaman

Berfungsi pada semua paket — tidak perlu upgrade

Kompatibel dengan semua browser yang mendukung Shadow DOM (semua browser modern)

Tip: Uji obrolan tertanam dengan menempatkannya di halaman staging terlebih dahulu. Pastikan terlihat benar dalam tata letak halaman Anda sebelum dipublikasikan ke produksi.

Dokumentasi