Pengunjung Salin Manual? Aktifkan Tombol Copy-Paste Sekali Klik Ini!

📌 Apa itu Copy-Paste Button Generator?

Copy-Paste Button Generator adalah modul script kustom ringan dari Luxee Toolkit yang memungkinkan Anda membuat tombol interaktif pada bagian kado digital (gift/amplop) undangan digital. Saat tombol ini diklik, ornamen teks target (seperti nomor rekening atau alamat rumah) langsung tersalin ke clipboard ponsel pengunjung tanpa perlu memblok teks secara manual.

📖

Skenario Penggunaan Nyata

Tamu undangan ingin mengirimkan kado amplop digital berupa transfer bank ke rekening mempelai. Di layar ponsel, mereka melihat nomor rekening mempelai yang cukup panjang. Jika mereka harus menghafal atau memblok teks nomor rekening secara manual, proses ini sangat tidak nyaman dan rentan terjadi kesalahan angka saat transfer. Dengan menyematkan tombol "Salin Nomor Rekening", tamu cukup mengetuk tombol tersebut sekali, lalu langsung menempelkannya (paste) di aplikasi m-banking mereka dengan akurat.

✨ Fitur Unggulan Copy-Paste Button Generator

Clipboard API Integration: Memanfaatkan protokol HTML5 Clipboard yang modern, cepat, dan aman.
Visual Feedback Alert: Memunculkan notifikasi tooltip lembut bertuliskan *"Berhasil Disalin!"* setelah pengetukan tombol.
Bebas Hambatan Render: Script sangat minimalis dan tidak membebani kecepatan pemuatan halaman utama undangan.

🛠️ Langkah Memasang Tombol Salin Otomatis

Langkah 1: Menyiapkan Widget Tombol di Elementor

Buka editor Elementor pada undangan Anda. Tarik widget **Button** biasa ke area bawah teks nomor rekening bank Anda.

Langkah 2: Menambahkan Custom CSS Class

Klik widget tombol tersebut, buka tab **Advanced**, lalu cari kolom **CSS Classes**. Isikan kelas target khusus (misalnya: btn-salin-rekening).

Langkah 3: Menghubungkan Teks Target dengan Script

Tambahkan widget HTML di samping tombol tersebut, kemudian salin dan tempel skrip kustom Copy-Paste bawaan Luxee Toolkit ke dalamnya. Pastikan selector ID/Class yang Anda daftarkan di dalam skrip mengarah ke elemen teks nomor rekening Anda.

Langkah 4: Menonton Video Implementasi Lengkap

Saksikan langkah demi langkah penempatan widget tombol, penyisipan kode JavaScript interaktif, dan cara mendesain efek tooltip melayang di sini:

💡

Pro Tips Dukungan HTTPS

Fungsi penyalinan otomatis Clipboard API modern mewajibkan website Anda menggunakan protokol koneksi aman **HTTPS (SSL)**. Jika website agensi Anda masih menggunakan HTTP biasa, fungsi salin instan ini kemungkinan besar akan dinonaktifkan oleh browser demi alasan keamanan.

🔗 Modul Panduan Terkait

Lengkapi fitur ornamen multimedia dan form transaksi agensi Anda:

💡 Pertanyaan Sering Ditanya (FAQ)

Mengapa tombol salin tidak berfungsi sama sekali saat dicoba di browser bawaan Instagram/TikTok?

Beberapa peramban internal (in-app browser) media sosial seperti Instagram membatasi akses ke fungsionalitas sistem clipboard perangkat. Sarankan tamu untuk membuka tautan undangan digital Anda menggunakan browser Google Chrome atau Safari asli.

Apakah saya bisa memasang lebih dari satu tombol salin dalam satu halaman undangan?

Tentu bisa. Anda hanya perlu mendefinisikan Class/ID yang unik pada masing-masing tombol dan teks target di Elementor agar skrip tidak tertukar saat mengeksekusi penyalinan data.

Bagaimana cara mengubah gaya warna dan durasi tampil tulisan notifikasi "Berhasil Disalin"?

Semua properti visual tooltip diatur melalui CSS kustom. Anda dapat memodifikasi nilai properti background dan properti animation-duration pada style CSS yang disematkan di template Luxee Toolkit.