Widget Copas Button: Tombol Salin Nomor Rekening & Teks Otomatis

📌 Apa itu Widget Copas Button?

Copas Button (Copy-Paste Button) adalah widget Elementor yang mengombinasikan kotak informasi (gambar logo, judul, deskripsi) dengan sebuah tombol canggih yang bisa menyalin teks rahasia/nomor penting secara otomatis langsung ke papan klip (clipboard) HP pengunjung hanya dengan sekali klik.

Mengapa Anda membutuhkannya?
Sering mendapati tamu undangan kesulitan memblok dan menyalin nomor rekening bank di layar HP mereka yang sempit? Widget ini mengevaporasi rasa frustrasi tersebut! Tamu tinggal menekan satu tombol, lalu tulisan "Tersalin ✓" akan muncul secara estetik, memastikan nomor rekening/alamat siap ditempel di aplikasi mutlak pembayaran.

📖

Skenario Interaksi Sempurna (Direct Answer)

TL;DR: Tarik widget Copas Button ke menu "Hadiah Digital" atau "Lokasi Acara" di landing page Anda. Unggah logo bank (misal: BCA), isi nama pemilik dan nomor rekening, lalu pengunjung hanya tinggal mengklik tombol "Salin Rekening", maka detik itu juga nomor rekening berpindah ke *clipboard* perangkat mereka tanpa meleset angka satu pun.

✨ Fitur Unggulan

Desain Image Box 3-in-1: Dalam satu widget, Anda langsung mendapatkan gabungan tata letak untuk Logo/Ikon, Teks Judul (Nama Rekening), dan Deskripsi singkat tanpa perlu menyusun banyak *widget text* terpisah di Elementor.
Status Konfirmasi (Success State) Animatif: Memberikan kelegaan pada pengunjung. Segera setelah tombol diklik, label akan langsung ganti wujud dari "Salin" menjadi tulisan hijau "Tersalin! ✓" sementara waktu.
Transparansi Kotak Nomor: Tersedia opsi pintar untuk memunculkan atau menyembunyikan tulisan nomor rekening/alamat aslinya di atas tombol, menyesuaikan gaya estetika desain web Anda.
Anti-Deteksi Safari/Apple: Pintar meredam sistem pembaca otomatis dari peramban (browser) ponsel tertentu sehingga format nomor Anda tidak tiba-tiba berubah warna menjadi biru yang memecah desain aslinya.

🛠️ Cara Penggunaan

Langkah 1: Mengatur Blok Informasi & Gambar

Masuk ke menu Content → Image Box. Mulailah dengan mengunggah gambar/logo identitas (misalnya: Logo Bank, Ikon Amplop, atau Denah Peta). Kemudian, ketik tajuk judul (contoh: "Bank BCA a/n Budi") beserta kalimat deskripsi ajakan untuk menyalin nomor tersebut.

Visual: Mengisi struktur dasar judul dan logo pada pengaturan Image Box.

Langkah 2: Menentukan Sasaran Teks (Target Salinan)

Gulir turun menuju label Copas Button. Porsi terpenting ada di isian "Teks yang Disalin". Tulislah kumpulan digit angka murni atau detail alamat pasti di sana. Jika Anda ingin menyembunyikan teks tersebut demi mendesain tata letak yang ekstra bersih, segera matikan pilihan Tampilkan Teks di atas Tombol.

Langkah 3: Mengkustomisasi Label "Sukses" dan Durasi

Masih dalam pengaturan yang sama, atur bahasa sapaan untuk Label Tombol (Default) (misal: "Salin Nomor rekening") dan ubah Label Tombol (Berhasil) (misalnya: "Berhasil Disalin! 👍"). Tentukan seberapa lama pemberitahuan hijau tersebut tayang lewat tuas nilai (*ms*); di mana 2000 artinya 2 detik.

Visual: Perubahan warna dramatis ketika tombol sukses disentuh oleh pengguna.

Langkah 4: Bermain dengan Warna dan Geometri Kotak

Singgahi deretan tab Style. Silakan tumpahkan palet warna desain Anda di sini. Mulai dari menata peletakan elemen menjadi rata tengah (Center Arrange), memberi warna belakang Button Normal dan Button Success, membengkokkan sudut kotak terluar (Box Border Radius), sampai melebarkan tombol agar pas seukuran layar penuh (100% Full Width).

🔗 Widget Terkait (RSVP & Buku Tamu)

Sempurnakan fitur "Amplop Digital" dengan memadukannya bersama formulir konfirmasi kedatangan tamu modern:

💡 Pertanyaan Sering Ditanya (FAQ)

Apakah tombol salin ini aman untuk menyalin teks panjang seperti paragraf alamat?

Tentu saja! Batask kemampuannya sangat mumpuni. Area "Teks yang Disalin" sanggup menelan kalimat penuh, koordinat peta (*Google Maps*), maupun kode OTP. Namun pastikan lebar *Box* Anda cukup leluasa jika memilih fungsi unjuk angka (Tampilkan Teks).

Mengapa kadang angka rekening di-copy malah ikut spasi berlebihan?

Seringkali hal ini lantaran Anda tidak sengaja memuat karakter Spasi (Space/Enter) tepat sebelum atau sesudah barisan nomor di dalam kolom "Teks yang Disalin". Biasakan meninjau isian ujung angka dan membuang elemen *whitespace* yang tersisa di Elementor Editor.

Ketika tombol berubah Hijau (Tersalin), apakah fungsi salinnya rusak/berhenti?

Sama sekali tidak. Pengunjung bisa mengeklik tombol hijau puluhan kali berturut-turut, dan nomor tersebut terus-menerus diserap segar masuk ke papan *clipboard* HP-nya berkat sokongan algoritma murni JS di baliknya.