# Widget WhatsApp ## Integrasi Widget WhatsApp Tambahkan tombol obrolan WhatsApp melayang ke situs web Anda dengan panduan sederhana ini. > **Perlu diketahui.** Widget WhatsApp adalah tombol "klik untuk chat" sederhana — mengekliknya akan membuka WhatsApp bagi pengunjung Anda sehingga mereka dapat mengirim pesan kepada Anda di sana. Widget ini tidak memasukkan pesan ke dalam kotak masuk Obrolan Anda atau memicu AI dengan sendirinya. Untuk pengalaman obrolan AI dalam halaman yang disematkan di situs web Anda, gunakan [Widget Obrolan](chat-widget.md) terpisah sebagai gantinya. > > **Hanya ingin tautan biasa atau tombol Anda sendiri?** Jika Anda tidak menginginkan widget mengambang dan lebih memilih untuk menautkan tombol Anda sendiri (atau potongan teks) langsung ke obrolan WhatsApp, lewati ke [Lebih suka tautan atau tombol biasa? (wa.me)](#prefer-a-plain-link-or-button-wa-me) di bawah. Untuk alternatif SMS, lihat [Menambahkan Tautan Klik-untuk-Teks (SMS)](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website). ### Instalasi 1. Buka file HTML situs web Anda di editor teks. 2. Cari tag `` (biasanya di akhir file HTML Anda). 3. Tempel skrip berikut tepat sebelum tag ``: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Pada kode di atas, ganti: * `NUMBER` dengan nomor WhatsApp Anda * Sebagai contoh: untuk nomor +1 555 123 4567, cukup gunakan: 15551234567 ### Menambahkan Pesan Kustom Jika Anda ingin pesan yang telah diisi sebelumnya muncul saat seseorang mengeklik tombol tersebut: 1. Gunakan kode ini sebagai gantinya: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Contoh dengan nomor dan pesan asli: {% code overflow="wrap" %} ```html ``` {% endcode %} ### Apa yang Anda Dapatkan Setelah instalasi, Anda akan secara otomatis melihat: * Tombol WhatsApp hijau di kanan bawah situs web Anda * Tombol tetap terlihat saat menggulir * Tombol berfungsi dengan lancar di perangkat seluler * Animasi halus muncul saat mengarahkan kursor ke tombol ### Informasi Tambahan * Nomor telepon Anda dapat ditulis dengan atau tanpa: * Tanda plus (+) * Spasi * Tanda hubung (-) * Ini akan diproses secara otomatis dengan benar * Pesan dapat berisi spasi secara alami * Tidak diperlukan file atau instalasi tambahan * Tombol secara otomatis menyesuaikan dengan layar seluler ### Contoh Halaman Web Lengkap {% code overflow="wrap" %} ```html My Website ``` {% endcode %} ## Lebih suka tautan atau tombol biasa? (wa.me) Widget di atas memberi Anda tombol melayang yang sudah jadi. Namun, jika Anda sudah memiliki tombol sendiri (atau tautan menu, gambar, atau potongan teks) dan hanya ingin tombol tersebut membuka obrolan WhatsApp dengan nomor Anda, Anda sama sekali tidak memerlukan widget tersebut — Anda cukup menautkannya ke URL `wa.me`. Formatnya adalah: {% code overflow="wrap" %} ``` https://wa.me/NUMBER ``` {% endcode %} Ganti `NUMBER` dengan nomor lengkap Anda dalam format internasional — **hanya angka, tanpa tanda plus, spasi, atau tanda hubung**. Misalnya, untuk +31 6 5801 5937 Anda akan menggunakan: {% code overflow="wrap" %} ``` https://wa.me/31658015937 ``` {% endcode %} ### Mengisi pesan sebelumnya Agar pesan sudah tertulis saat obrolan dibuka, tambahkan `?text=` diikuti dengan pesan Anda: {% code overflow="wrap" %} ``` https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question ``` {% endcode %} Spasi dalam pesan perlu ditulis sebagai `%20` (ini adalah cara tautan menangani spasi). ### Menempatkannya pada tombol Tautkan tombol apa pun ke URL tersebut — persis seperti cara Anda menautkan tombol ke alamat web lainnya. Dalam HTML mentah, tampilannya seperti ini: {% code overflow="wrap" %} ```html Chat on WhatsApp ``` {% endcode %} Di pembuat situs web (Wix, Squarespace, WordPress, Webflow, dll.), tambahkan tombol seperti biasa dan tempel URL `wa.me` ke kolom "tautan" / "URL"-nya. > **Ingin satu tautan pendek yang berotasi di antara beberapa nomor, mengingat pengunjung yang kembali, dan melacak klik?** Gunakan Tautan Pendek (di bawah **Pengaturan → Saluran**) alih-alih URL `wa.me` mentah.