Member Area

Tamu Ribet Catat No Rekening? Pasang Tombol Salin Satu Klik (Copy to Clipboard)!

📌 Apa itu Fitur Copy to Clipboard?

Copy to Clipboard (Salin ke Papan Klip) adalah tombol interaktif cerdas yang menyalin teks panjang (seperti nomor rekening bank, nomor e-wallet, alamat pengiriman kado fisik, atau koordinat peta) langsung ke clipboard smartphone pengunjung hanya dengan satu ketukan.

📖
Skenario Masalah Nyata

Mengetikkan nomor rekening 10 digit secara manual di aplikasi m-banking sangat rentan salah transfer dan merepotkan tamu. Dengan tombol satu klik, teks langsung tersalin rapi dan tombol otomatis memberikan umpan balik visual "Tersalin! ✓".

✨ Keunggulan Fitur

  • Visual Feedback Realtime: Tombol berubah warna menjadi hijau centang sesaat setelah ditekan, lalu kembali normal secara otomatis.
  • Modern Navigator Clipboard API: Mendukung peramban modern iOS Safari, Android Chrome, dan desktop.
  • Mudah Diimplementasikan: Cukup 1 fungsi reusable untuk banyak target kotak nomor rekening yang berbeda.

💻 Kode Sumber Lengkap (HTML + CSS + JS)

<!-- ELEMEN KOTAK INFORMASI DENGAN TOMBOL SALIN -->
<div class="luxee-copy-box">
  <div class="luxee-copy-label">Bank Central Asia (BCA)</div>
  <div class="luxee-copy-target" id="target-rekening-bca">8830192847</div>
  <button type="button" class="luxee-copy-btn" onclick="salinTeks('target-rekening-bca', this)">
    <span>📋 Salin Nomor Rekening</span>
  </button>
</div>

<style>
.luxee-copy-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(194, 155, 100, 0.25);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  margin: 12px 0;
}
.luxee-copy-label {
  font-size: 0.85rem;
  color: #C4C0B5;
  margin-bottom: 4px;
}
.luxee-copy-target {
  font-size: 1.25rem;
  font-weight: 700;
  color: #F4F1EA;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.luxee-copy-btn {
  background: #C29B64;
  color: #121814;
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.luxee-copy-btn:hover {
  background: #D4AF37;
  transform: translateY(-2px);
}
</style>

<script>
function salinTeks(elementId, btnElement) {
  const target = document.getElementById(elementId);
  if (!target) return;
  
  const textToCopy = target.innerText.trim();
  navigator.clipboard.writeText(textToCopy).then(function() {
    const originalText = btnElement.innerHTML;
    btnElement.innerHTML = '<span>✓ Tersalin ke Clipboard!</span>';
    btnElement.style.background = '#22c55e';
    btnElement.style.color = '#ffffff';
    
    setTimeout(function() {
      btnElement.innerHTML = originalText;
      btnElement.style.background = '';
      btnElement.style.color = '';
    }, 2500);
  }).catch(function(err) {
    console.error('Gagal menyalin:', err);
  });
}
</script>

🛠️ Langkah Mengganti Nomor Rekening / Alamat

  1. Buka widget HTML di Elementor.
  2. Ganti teks angka pada elemen <div class="luxee-copy-target" id="target-rekening-bca">8830192847</div> dengan nomor rekening atau alamat Anda.
  3. Jika Anda memiliki 2 rekening berbeda (misal BCA dan Mandiri), buat ID target yang unik (contoh: target-bca dan target-mandiri), lalu panggil pada tombol dengan salinTeks('target-bca', this) dan salinTeks('target-mandiri', this).

🔗 Modul Panduan Terkait

Langkah berikutnya dalam kustomisasi script:

💡 Pertanyaan Sering Ditanya (FAQ)

Ya. Sebagian besar browser modern hanya mengizinkan akses ke Clipboard API jika website diakses menggunakan protokol keamanan HTTPS (SSL aktif).

Bisa. Cukup masukkan teks alamat lengkap atau tautan URL maps pada elemen target, lalu hubungkan tombol salin ke ID elemen tersebut.

Ubah nilai angka pada fungsi setTimeout(..., 2500) di baris JavaScript. Angka 2500 setara dengan 2.5 detik.

*Terakhir diperbarui: 24-Agustus-2026*