Cara Membuat Tombol WhatsApp Melayang di Pojok Bawah dengan JavaScript

Tombol WhatsApp melayang (floating WhatsApp button) adalah elemen antarmuka sederhana tapi sangat berguna untuk meningkatkan interaksi langs...

Tombol WhatsApp melayang (floating WhatsApp button) adalah elemen antarmuka sederhana tapi sangat berguna untuk meningkatkan interaksi langsung antara pengunjung dan pemilik website. Tombol ini biasanya ditempatkan di pojok bawah halaman dan saat diklik, langsung membuka aplikasi WhatsApp atau WhatsApp Web untuk mengirim pesan.


Pada artikel ini, kamu akan belajar cara membuat tombol WhatsApp melayang menggunakan JavaScript murni, tanpa perlu menyentuh HTML secara langsung.


๐Ÿ” Mengapa Floating Button WhatsApp?

Berikut adalah alasan mengapa floating WhatsApp penting untuk situs atau blog:

  • Mempermudah komunikasi langsung
  • Meningkatkan konversi penjualan/lead
  • Mudah dibuat dan ringan (tanpa plugin)
  • Dapat digunakan di situs statis maupun dinamis

๐Ÿ’ก Fitur yang Akan Kita Buat

  • Tombol melayang di pojok kanan bawah
  • Menggunakan ikon Font Awesome (atau SVG jika ingin ringan)
  • Arahkan ke https://wa.me/nomor
  • Dapat ditambahkan ke halaman mana pun dengan satu snippet JavaScript

✍️ Langkah-Langkah Implementasi

1. Buat Struktur HTML Minimal

Misalnya, HTML kamu hanya berisi:

<!DOCTYPE html>
<html>
<head>
<title>Contoh WhatsApp Floating</title>
</head>
<body>
<h1>Welcome to syahdandev</h1>
<script src="whatsapp-float.js"></script>
</body>
</html>

Kita akan menaruh seluruh kode tombol WhatsApp di file JavaScript eksternal (whatsapp-float.js), atau langsung di <script>.


2. Tambahkan Kode JavaScript

Berikut adalah kode lengkap JavaScript untuk:

  • Memuat Font Awesome secara dinamis
  • Menambahkan elemen tombol <a> ke body
  • Menyisipkan CSS melalui JavaScript
// Tambahkan Font Awesome
const faLink = document.createElement("link");
faLink.rel = "stylesheet";
faLink.href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css";
document.head.appendChild(faLink);
// Tambahkan tombol WA
const waButton = document.createElement("a");
waButton.href = "https://wa.me/628998937095";
waButton.target = "_blank";
waButton.setAttribute("aria-label", "Chat via WhatsApp");
waButton.className = "wa-float";
waButton.innerHTML = '<i class="fab fa-whatsapp wa-icon"></i>';
document.body.appendChild(waButton);
// Tambahkan gaya
const style = document.createElement("style");
style.textContent = `
.wa-float {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25d366;
color: white;
border-radius: 50%;
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
z-index: 9999;
transition: transform 0.3s ease;
text-decoration: none;
}
.wa-float:hover {
transform: scale(1.1);
}
.wa-icon {
font-size: 28px;
}
`;
document.head.appendChild(style);

๐Ÿงช Demo Langsung

Kamu bisa melihat versi langsung dari tombol ini di CodePen berikut:

๐Ÿ‘‰ Demo CodePen (by: @cloud-dark)

CodePen tersebut menggunakan pendekatan full JavaScript, sehingga bisa kamu salin dan tempel ke halaman manapun tanpa menyentuh HTML.


๐Ÿ”ง Tips Tambahan

✅ Ganti Nomor WhatsApp

Pastikan mengganti:

waButton.href = "https://wa.me/628998937095";

… dengan nomor kamu, dan bisa juga ditambah pesan otomatis:

"https://wa.me/628998937095?text=Halo%20saya%20tertarik%20dengan%20layanan%20Anda"

✅ Ubah Posisi ke Kiri

Ganti:

right: 20px;

… menjadi:

left: 20px;

✅ Kelebihan Menggunakan JavaScript

  • Tidak perlu menulis ulang elemen HTML
  • Cocok untuk Blogger, WordPress (via custom HTML), atau CMS lainnya
  • Mudah dikustom tanpa plugin

✨ Penutup

Dengan mengikuti tutorial ini, kamu sekarang bisa membuat tombol WhatsApp melayang di pojok bawah hanya menggunakan JavaScript. Teknik ini cocok untuk situs sederhana, blog pribadi, atau toko online yang ingin meningkatkan konversi lewat komunikasi langsung.

Jangan lupa untuk mengecek CodePen ini jika kamu butuh referensi langsung.

Semoga bermanfaat! ๐Ÿ‘‹

COMMENTS

Nama

2fa,2,adsense,3,ai,34,Alat,1,Algorithms,3,Android,29,anti virus,1,Apache,4,api,4,apipedia,3,Aplikasi Android,10,apps,2,AppSheet,40,arang,1,Array,3,array formula,3,Artikel,8,bca,1,Belajar,1,Bengkak,1,Berita,1,Berita terkini,13,Biografi,1,Bisnis,139,Bitcoin,1,Blog,7,Blogger,34,Blogger Template,1,Blogging,2,Bootable,1,bot,1,build with ai,9,build with syahdandev,16,bun.js,1,catlang,1,chat gpt,2,Cheat,1,Chrome,2,cloudflare,1,Code,14,coding,11,collaboration tools,1,Competitive Coding,7,copilot,1,CPU,1,Crud,1,CSS3,2,cybersecurity,8,Data Structures,18,Database,1,decode,1,Deep Learning,3,Desain Blogger,47,Design,3,developer,5,Development,8,Domain Hosting,2,Download,4,dunia kerja,2,Elon Musk,4,enak,1,encode,1,excel,2,express,1,Facebook,2,fact or hoax,1,fastify,1,free,1,Free Course,13,Game,5,Gamers,2,gemini,1,generate with AI,3,generator,1,github,2,google,12,Google AdSense,20,Google Apps Script,25,google calendar,1,google docs,2,google drive,2,google forms,1,google mail,1,google maps,1,Google Script,3,google sheets,15,Google Webmaster Tools,1,Hardware,1,Home,1,hosting,4,Hostinger,1,HP,2,HTML,6,HTML5,2,HyperOs,1,ice cream,1,ide kreatif,2,image creator,2,Indonesia,1,Instagram,2,instant vdeo generator,1,integrator,1,Internet,8,iOS,1,IOT,2,iphone,1,IT,6,JavaScript,7,js,4,Kenali,1,Keren,1,Kesehatan,14,laragon,1,laravel,1,Leet Code,7,library,1,Linked List,4,Linux,8,llama,1,Machine Learning,4,malware,2,map,1,Mark Zuck,1,Marketing Tools,1,marketplace,1,Mata,1,Math,8,mbti,2,McDonald's,1,meme,1,meta,1,mfa,1,Microsoft Word,1,Minimalis,1,miscellaneous questions,1,mixue,1,Mobile Legends,4,Motherboard,1,motivasi,1,murah,1,mysql,5,Neovim,1,Networking,1,next js,1,ngingx,1,NIK,1,NLP,1,no code,5,node js,11,nodejs,1,NPWP,1,obfuscated,1,Office,1,open ai,3,Oppo,1,Parallel Space,1,pc,2,PDF Print,1,pgsql,2,Phoenix OS,1,PHP,16,phpmyadmin,2,portofolio,1,postman,3,Power Point,1,Presentation,1,price list,1,Program Aplikasi,6,programmer,3,programming,1,psikolog,4,python,5,query,1,Quesions or Answers (Quora),2,Questions or Answers (Quora),1,RAR,2,Recursion,3,regex,2,Regulasi,1,Review,147,Rufus,1,Rumus,55,Sakit,1,Samsung,1,Security,1,SEO,21,SHAREit,1,shop,1,simple apps,2,Smart City,1,smartfren,1,Smartphone,1,sms,1,Social Media,1,socket.io,2,Software,2,spesifikasi,1,SQL,1,SQL Server,1,Steemit,7,string,3,team IT,1,Tebak Gambar,2,Technology,4,Teknologi,8,Teknologi Informasi,3,Telegram,3,Template Blog SEO,10,Template Blogger,1,Templates,1,terminal,1,tiktok,1,Tips,22,Tips & Trik,20,Tips Blogging,36,Tips SEO,23,toolkit,1,Tree,8,Trick,27,trik,3,Tulisan Lepas,1,tutorial,6,Tutorial CSS,3,Tutorial HTML,56,Tutorial JavaScript,3,Twitter,2,Ubuntu,5,udemy,7,UX,8,VirtualBox,1,VLC Media Player,1,VSCode,2,waconsole,26,wallpaper engine,1,web dev,2,Web Server,5,WhatsApp,14,WhatsApp Gateway,8,Widget,2,Windows,25,wordpress,4,XAMPP,7,Xiaomi,5,Yii2,1,YouTube,3,
ltr
item
Syahdan Dev Blog: Cara Membuat Tombol WhatsApp Melayang di Pojok Bawah dengan JavaScript
Cara Membuat Tombol WhatsApp Melayang di Pojok Bawah dengan JavaScript
https://blogger.googleusercontent.com/img/a/AVvXsEgxyk-DXkoJffa6rEWwBhAlG6lUJO9nA5LD6sV8UFieQYl8t3nugievxwTfdOu26o_fysDjH9PDzhZ6Dh7MXUCUjTUz0qJJTSwi5w9_zTafetJj79ZmmKswftGS33qSmKP7JCSiO7tzOiKuE-02Ff1tXCgWr6tj7XeBGPv7sm6bm7HEq-4GHvQg-i8czsI
https://blogger.googleusercontent.com/img/a/AVvXsEgxyk-DXkoJffa6rEWwBhAlG6lUJO9nA5LD6sV8UFieQYl8t3nugievxwTfdOu26o_fysDjH9PDzhZ6Dh7MXUCUjTUz0qJJTSwi5w9_zTafetJj79ZmmKswftGS33qSmKP7JCSiO7tzOiKuE-02Ff1tXCgWr6tj7XeBGPv7sm6bm7HEq-4GHvQg-i8czsI=s72-c
Syahdan Dev Blog
https://syahdandev.blogspot.com/2025/05/cara-membuat-tombol-whatsapp-melayang.html
https://syahdandev.blogspot.com/
https://syahdandev.blogspot.com/
https://syahdandev.blogspot.com/2025/05/cara-membuat-tombol-whatsapp-melayang.html
true
6341435550051226882
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content