Tutorial Menambahkan Halaman Layar Sapa dan QR Code Scanner Untuk Web Jasa Undangan Online
Tutorial ini dibuat untuk anda yang telah memiliki website jasa undangan online dan menggunakan plugins Elementor serta Weddingpress.
Sebelumnya saya disclaimer dulu, segala bentuk kesalahan yang terjadi pada website anda setelah mencoba tutorial ini menjadi tanggung jawab anda sepenuhnya. Penulis hanya memberikan petunjuk yang sudah dicoba sebelumnya dan berhasil berjalan di web penulis.Halaman Layar Sapa dan QR Scaner ini berhasil saya jalankan dengan beberapa plugins berikut :
- Wordpress - 6.0.1
- Elemetor Free - 3.6.8
- Weddingpress - 2.8.8
- WPCode - Insert Headers, Footers, and Code Snippets - 2.0.1
- QR Scanner Redirect - 1.2.2 (https://github.com/aigenseer/qr-scanner-redirect)
- PRO Elements - 3.7.3 (https://proelements.org/)
Beberapa setting yang yang disesuaikan diantaranya :
1. Menu Setting > Reading
Setting sesuai gambar
2. Menambahkan Script CDN SweetAlert2 di header
3. Mengubah Setting plugins dan Edit script plugins QR Scanner Redirect pada file javascriptnya
- Setting Plugins QR Scanner Redirect seperti gambar
- EDIT - SCRIPT : replace semua code di sini dengan file yang saya sertakan di link download
4. Menambahkan file html untuk iframe di halaman layar sapa. Catat folder tempat anda menyimpan file ini. Pada contoh ini saya menyimpannya difolder wp-content/uploads/neo
Bila semua hal di atas sudah dilakukan, silahkan anda download file JSON dan html ini ( password: 17082022 )
Langkah selanjutnya silahkan buat sebuah halaman baru dan catat link halaman anda
Lalu jangan lupa untuk meng-enable comment halaman tersebut
Import template JSON Halaman QR Scanner yang sudah didownload tadi ke halaman yang baru saja dibuat
Tampilan Halaman QR Scan seperti ini bila tidak ada masalah,
coba anda scan QR CODE dari web undangan anda, lalu klik Kirim
Format data QR Code nya harus menggunakan LINK seperti contoh ini https://domainAnda.com/mempelai/?to=Tamu%20Undangan
namun file yang dipilih adalah JSON_Welcome_Screen_Page....
Setelah berhasil diimport, silahkan ganti beberapa gambar yang hilang di halaman tersebut, dibagian Section Style dan Widget Image
Selanjutnya dibagian Navigator, klik pada Section yang paling atas dan pilih Column paling atas dan klik pada HTML pertama
Perhatikan pada baris 1 bagian Script HTML Tersebut,
Ganti Juga https://NAMA-DOMAIN_ANDA.com/qr-scan dengan link halaman qr scan anda yang tadi dicatat sebelumnya
Untuk ?url= biarkan jangan diganti dan penulisan di bagian src ini harus seperti contoh.
<iframe class="guestFrame" id="recent_guest" scrolling="no" height="115" src="https://NAMA-DOMAIN_ANDA.com/wp-content/uploads/NAMA-FOLDER/iframeloop.html?url=https://NAMA-DOMAIN_ANDA.com/qr-scan" style="border-radius:5px"></iframe>
Bila tidak ada masalah, saat link selesai diganti, pop up UCAPAN SELAMAT DATANG akan muncul dihalaman layar sapa anda selama 5 detik, kemudian menghilang.
untuk mengganti durasi, ganti angka 5000 dengan yang lebih besar contoh 10000 untuk 10 Detik.
Sampai disini, semuanya sudah selesai.
Silhkan Coba Update dan Preview halaman Layar Sapa Anda, dan lakukan scan QR CODE dari ponsel anda dengan membuka halaman QR Scanner yang sudah di buat tadi.
Klik tombol KIRIM pada Comment Kit, agar Nama di QR CODE tampil di Layar Sapa.
Sebagai tambahan
Bila ingin mengganti TEXT placeholder textarea dan Button comment kit
seperti ini :
Anda harus Inspect Halaman QR Scan Anda untuk mencari nomor ID dari form Comment Kit tersebut
Lalu ganti nomor pada script ini
Itu saja barangkali tutorial menambahkan halaman Layar Sapa dan QR Code Scanner dengan memanfaatkan wordpress dan beberapa plugins dan script tambahan
tanpa harus membuat web khusus untuk layar sapa.
Semoga Berhasil menambahkan Layar Sapa nya ya ges ya.. :)
Bila ada yang ingin ditanyakan, kontak saya di telegram
Comments
Post a Comment