▷▷ Kode HTML WHATSAPP
Tutorial ini membahas tentang Cara Membuat Kode HTML Whatsapp yang bisa Teman-Teman gunakan pada artikel blog, pada postingan penjualan dan lain sebagainya.
Karena kode HTML pada Whatsapp ini sebenarnya ada link WA yang kita berikan anchro teks ataupun anchro berupa gambar logo/icon Whatsapp sehingga memudahkan orang lain untuk menghubungi kita melalui WA.
Dalam membuat link WA dengan kode HTML dan menerapkannya di postingan website atau blog, kita harus membuat postingan dalam bentuk HTML.
Kalau di Blogger bisa dengan mengubahnya dulu ke Tampilan HTML saat membuat artikel dan kalau di Wordpress kita jadikan dulu edit sebagai HTML juga.
Kode HTML Whatsapp
Untuk menambahkan kode HTML pada blog atau website sehingga menjadi sebuah tombol WA yang menarik dan bagus untuk di klik, silakan Teman-Teman ikuti tutorial berikut ini.
Menambahkan tombol Whatsapp dengan Teks
Untuk membuat tombol chat whatsapp dalam bentuk teks, Kalian perlu memahami dulu format penulisannya.
Untuk penulisan atau pembahasan mengenai link WA silakan baca dulu artikel yang sudah Admin terbitkan sebelumnya tentang Cara Membuat Link ke Whatsapp.
Script HTML Link WA secara umum yaitu ada 2 jenis, menggunakan wa.me dan juga menggunakan api.whatsapp.com
Dalam artikel ini akan Admin contohkan script link HTML dalam membuat tombol WA dengan kedua alamat website tersebut.
Format Tombol WA dengan wa.me
Template yang bisa Teman-Teman pakai untuk buat link WA dengan HTML yaitu :
<a href="https://wa.me/nomorHP">AnchorTeks</a>
Kemudian untuk AnchorTeks adalah teks yang akan ditampilkan untuk menjadi tombol WA. Misalnya saja dengan kata-kata Hubungi di Whatsapp, Chat melalui WA atau lainnya.
Contoh penulisannya yaitu
<a href="https://wa.me/6281234567890">Hubungi melalui Whatsapp</a>
Sebenarnya kalau Kalian seorang blogger, format penulisan tersebut adalah seperti kita menambahkan link dalam postingan blog dengan anchor teks tertentu dan menuju ke alamat link WA.
Template membuat tombol Whatsapp dengan api.whatsapp.com
Format menambahkan tombol whatsapp yang ini yaitu hanya link tujuannya saja yang diubah.
Untuk format anchor teksnya bisa sama saja atau disesuaikan dengan keinginan Kalian ya.
Formatnya yaitu :
<a href="https://api.whatsapp.com/send?phone=nomorHP">AnchorTeks</a>
Sama ketentuannya pada wa.me di atas bahwa untuk NomorHP bisa diisi dengan nomor HP dalam format internasional, AnchorTeks disesuaikan juga sesuai kebutuhan.
Contoh penulisan dengan format api whatsapp ini sebagai berikut :
<a href="https://api.whatsapp.com/send?phone=6281234567890">Hubungi Kami melalui WA</a>
Penulisan format dan contoh diatas sengaja Admin tuliskan dalam blockquote supaya Kalian bisa copy dan paste kode HTML untuk WA tersebut, sehingga Teman-Teman mudah dalam memodifikasi sesuai kebutuhan Kalian.
Membuat tombol WA dengan Gambar
Supaya lebih menarik pelanggan atau calon customer, sebaiknya Kalian perlu juga mempertimbangkan opsi menambahkan tombol WA dalam bentuk gambar.
Terlihat lebih interaktif juga sih dengan mengganti tombol Whatsapp menggunakan gambar, apalagi jika dikombinasikan dengan kata-kata ajakan yang membuat pengunjung blog atau website menjadi penasaran untuk menghubungi melalui WA.
Seperti apa format penulisannya?
Buat Gambar Tombol WA dengan WA.ME
Supaya lebih menarik orang lain untuk menghubungi dengan WA, format untuk penulisannya yaitu :
<a href="https://wa.me/nomorHP"><img src="LinkLogoWA"></a>
Keterangan :
- NomorHP, seperti biasa itu merupakan format internasional nomor HP yang ada WA nya, misalnya nomor HP Kalian adalah 081234567890 maka ubah pada penulisan diatas menjadi 6281234567890;
- LinkLogoWA adalah link logo atau icon atau foto Whatsapp dimana logo itu ditempatkan, kita bisa menguploadnya terlebih dahulu dan dapatkan URL link dari logo WA tersebut.
Misalnya saja link logo WA nya adalah https://blogmu.com/logo-wa.png, dimana blogmu.com merupakan link blog atau website Teman-Teman.
Contoh penulisannya yaitu
<a href="https://wa.me/6281234567890"><img src="https://blogmu.com/logo-wa.png"></a>
Menambahkan Icon Whatsapp di Blog dengan api.whatsapp.com
Kalau Kalian mau membuat tombol WA dengan alamat api.whatsapp.com tinggal ubah saja format https://wa.me/nomorHP menjadi https://api.whatsapp.com/send?phone=nomorHP
Sehingga penulisan formatnya menjadi seperti berikut ini :
<a href="https://api.whatsapp.com/send?phone=nomorHP"><img src="LinkLogoWA"></a>
Contoh penulisan secara lengkapnya yaitu
<a href="https://api.whatsapp.com/send?phone=6281234567890"><img src="https://blogmu.com/logo-wa.png"></a>
Hasil atau contoh logo dari tutorial ini silakan bisa dilihat selengkapnya pada video tutorial dibawah. Jadi Kalian harus stay tune dan tonton video tersebut dari awal hingga akhir supaya lebih mudah memahaminya.
Video Tutorial Membuat Kode HTML Whatsapp
Supaya Teman-Teman lebih memahami dalam tutorial membuat kode HTML untuk Whatsapp di postingan blog atau menambahkannya dalam widget blog atau website, silakan lihat pada tutorial dibawah ini.
Jangan lupa untuk bagikan video tersebut ke orang lain, terutama bagi Teman-Teman yang sedang merintis jualan online yang memanfaatkan media website atau blog.
Dengan adanya tutorial dalam bentuk video, Admin berharap apa yang dituliskan dalam artikel ini semuanya dapat dipahami dan bisa dipraktekkan secara langsung oleh Teman-Teman dan Kalian mendapatkan nilai lebih dan nilai tambah dari artikel yang Admin buat ini.
Tips dalam Membuat Kode HTML dari WHATSAPP
Berikut adalah beberapa tips dalam membuat tautan HTML untuk WhatsApp:
- Gunakan format URL: Saat membuat tautan HTML untuk WhatsApp, pastikan Anda menggunakan format URL yang benar.
URL harus dimulai dengan "https://api.whatsapp.com/send?phone=" dan diikuti dengan nomor telepon yang dituju tanpa karakter "+" atau tanda baca lainnya. - Tautkan nomor telepon: Gunakan tag "a" HTML untuk membuat tautan ke halaman WhatsApp. Misalnya: <a href="https://api.whatsapp.com/send?phone=6281234567890">Kirim Pesan</a>.
Ganti "6281234567890" dengan nomor telepon yang ingin dituju. - Beri label: Anda dapat memberi label pada tautan WhatsApp dengan menambahkan teks dalam tag "a". Misalnya: <a href="https://api.whatsapp.com/send?phone=6281234567890">Hubungi Admin</a>.
Di sini, "Hubungi Admin" akan muncul sebagai teks tautan. - Opsi pesan: Jika Anda ingin mengirim pesan default bersamaan dengan tautan WhatsApp, Anda dapat menambahkan parameter teks di URL.
Misalnya: <a href="https://api.whatsapp.com/send?phone=6281234567890&text=Halo!">Kirim Pesan</a>. Di sini, "Halo!" akan menjadi pesan yang muncul sebagai teks default dalam kotak chat WhatsApp. - Gunakan ikon WhatsApp: Untuk memberi tahu pengguna bahwa itu adalah tautan WhatsApp, Anda dapat menambahkan ikon WhatsApp ke tautan HTML Anda.
Anda dapat mencari atau mendownload ikon WhatsApp secara online dan menambahkannya sebagai gambar di samping tautan HTML.
Pastikan Teman-Teman menguji tautan yang dibuat untuk memastikan bahwa tautan tersebut berfungsi dengan baik dan mengarahkan pengguna ke akun WhatsApp yang diinginkan.
Penutup
Demikian Teman-Teman cara membuat Kode HTML Whatsapp yang bisa Admin bagikan.
Dengan opsi menambahkan kode HTML untuk Whatsapp pada postingan blog berupa teks maupun gambar, semoga Kalian bisa menambahkan sendiri pada blog atau website Kalian agar lebih menarik.
Semoga dengan adanya tutorial dalam bentuk video, Kalian bisa dengan mudah memahami dan mempraktekkannya, jangan lupa subscribe di channel tersebut ya.
Semoga bermanfaat!