Your AI Connector Docs

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 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) di bawah. Untuk alternatif SMS, lihat Menambahkan Tautan Klik-untuk-Teks (SMS).

Instalasi

  1. Buka file HTML situs web Anda di editor teks.
  2. Cari tag </body> (biasanya di akhir file HTML Anda).
  3. Tempel skrip berikut tepat sebelum tag </body>:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  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:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. Contoh dengan nomor dan pesan asli:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

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 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>

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:

https://wa.me/NUMBER

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:

https://wa.me/31658015937

Mengisi pesan sebelumnya

Agar pesan sudah tertulis saat obrolan dibuka, tambahkan ?text= diikuti dengan pesan Anda:

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

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:

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

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.