Formulir pemesanan situs web
Untuk mulai menggunakan formulir pemesanan di situs web Anda, Anda perlu mengetahui nomor teknis khusus perusahaan Anda (token). Untuk melakukan ini, Anda perlu pergi ke Profil Perusahaan di tab Perusahaan, di sana Anda akan menemukan baris token API. Untuk menyalin token, Anda perlu mengekliknya dan token akan disalin. Setelah menerima nomor tersebut, Anda hanya perlu memasukkan beberapa baris ke dalam kode situs Anda.
Kode ini harus disisipkan di antara tag <head>
<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>
Kode ini harus disisipkan sebelum tag penutup </body>
<script src="https://rentprog-b5205.web.app/js/app.js"></script>
Ini adalah kode aplikasi itu sendiri, perlu disisipkan di antara tag <body> di tempat yang Anda perlukan
<rentprog-widget
token="token"
locale="id"
show_all_cars='true'
hidden_car_year='false'
places='[{"place":"Office","price":0},{"place":"Delivery within the city","price":30},{"place":"Airport","price":80}]'
equipment='[{"item":"Roof rack","price":40, "daily": true},{"item":"GPS Navigator","price":15, "daily": false}]'
middlename_required="false"
agreement='{"text": ", and also accept ", "link_text": "rental terms", "link": "https://rentprog.ru/public/agreement.html"}'
button_classes="text-4xl lg:text-lg h-14 lg:h-10 bg-blue-500 flex justify-center items-center w-full text-white px-4 py-3 mt-2 rounded-md focus:outline-none"
icon_classes="h-14 w-14 bg-yellow-200 rounded-full flex flex-shrink-0 justify-center items-center text-yellow-500 text-2xl font-mono"
form_container="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg lg:text-base"
container_classes="relative px-2 py-4 lg:px-10 lg:py-10 bg-white lg:mx-8 mx-0 shadow"
title_container_classes="block pl-2 font-semibold text-xl self-start text-gray-700"
title_classes="lg:leading-relaxed sm:text-4xl text-xl"
show_email="false"
show_phone="false"
show_middlename="false"
show_birthday="false"
show_passport="false"
show_driver_license="false"
rental_object="Choose a boat"
>
</rentprog-widget>
token - Anda perlu memasukkan token API Anda. Itu dapat ditemukan di profil perusahaan, tab Perusahaan. Anda perlu mengkliknya dan token akan disalin ke clipboard.
lokal - bahasa formulir, perlu memasukkan en - untuk bahasa Inggris, de - untuk bahasa Jerman, fr - untuk bahasa Prancis, pt - untuk bahasa Portugis, es - untuk bahasa Spanyol, hi - untuk bahasa Hindi, sr - untuk bahasa Serbia, tr - untuk bahasa Turki, th - untuk bahasa Thailand, it - untuk bahasa Italia, id - untuk bahasa Indonesia.
show_all_cars - tampilkan semua mobil; secara default, hanya reservasi yang tersedia untuk tanggal tertentu yang ditampilkan, dengan mempertimbangkan interval antara reservasi yang ditentukan dalam pengaturan.
show_email - menampilkan kolom input email atau tidak. Jika nilainya "benar", bidang tersebut akan ditampilkan; jika nilainya "salah", bidang tersebut akan disembunyikan.
show_phone - tampilkan kolom input telepon atau tidak. Jika nilainya "benar", bidang tersebut akan ditampilkan; jika nilainya "salah", bidang tersebut akan disembunyikan.
show_middlename - menampilkan kolom untuk memasukkan nama tengah atau tidak. Jika nilainya "benar", bidang tersebut akan ditampilkan; jika nilainya "salah", bidang tersebut akan disembunyikan.
show_birthday - menampilkan kolom untuk memasukkan tanggal lahir atau tidak. Jika nilainya "benar", bidang tersebut akan ditampilkan; jika nilainya "salah", bidang tersebut akan disembunyikan.
show_passport - menampilkan kolom untuk memasukkan data paspor atau tidak. Jika nilainya "benar", bidang tersebut akan ditampilkan; jika nilainya "salah", bidang tersebut akan disembunyikan.
show_address - menampilkan kolom input alamat atau tidak. Jika nilainya "benar", bidang tersebut akan ditampilkan; jika nilainya "salah", bidang tersebut akan disembunyikan.
show_driver_license - menampilkan kolom untuk memasukkan data SIM atau tidak. Jika nilainya "benar", bidang tersebut akan ditampilkan; jika nilainya "salah", bidang tersebut akan disembunyikan.
rental_object - parameter yang menggantikan baris “Pilih mobil” dengan nilai yang dimasukkan, misalnya “Pilih perahu”.
hidden_car_year - menyembunyikan tahun pembuatan mobil, jika disetel ke "true", maka tahun akan disembunyikan, jika disetel ke "false" atau parameternya hilang, maka tahun akan ditampilkan.
passport_required - kolom data paspor, jika disetel ke "true", kolom tersebut menjadi wajib.
driver_license_required - kolom data SIM, jika nilainya "benar", kolom tersebut menjadi wajib, jika "salah" maka kolom tersebut opsional.
birthday_required - kolom tanggal lahir, jika “benar”, kolom tersebut menjadi wajib, jika “salah” maka kolom tersebut opsional.
email_required - Bidang email, jika “benar”, maka bidang tersebut wajib diisi, jika “salah” maka bersifat opsional.
phone_required - kolom masukan telepon, jika “benar”, kolom tersebut menjadi wajib, jika “salah” maka kolom tersebut opsional.
middlename_required - kolom masukan nama tengah, jika “true”, kolom tersebut wajib diisi, jika “false” maka kolom tersebut opsional.
places - Ini adalah tempat pengiriman dan penerimaan, yang menunjukkan harga pengiriman/penerimaan. Jika Anda tidak memerlukan data lapangan, hapus opsi ini.
equipment - daftar peralatan tambahan, daily - pembayaran setiap hari atau untuk seluruh periode sewa, price - harga. Jika Anda tidak memerlukan bidang ini, hapus saja parameter ini.
chairs - kursi anak, daily - pembayaran setiap hari atau untuk seluruh periode sewa, price - harga. Jika Anda tidak memerlukan data lapangan, hapus opsi ini.
boosters - kursi anak tanpa sandaran (dudukan), pengaturannya sama. Jika Anda tidak memerlukan kolom ini, hapus parameter ini.
agreement - baris pertama sudah diperbaiki, karena kami mengumpulkan data pribadi, jika Anda ingin menambahkan tautan ke syarat dan ketentuan Anda, Anda perlu mengisi parameter ini.
Jika kursi, booster, peralatan, parameter perjanjian tidak diperlukan, hapus saja dari kode.
Desain visual
Pustaka Tailwind v2 digunakan untuk desain. Detail selengkapnya tentang hal ini di sini. Untuk mempercepat pemuatan form, tidak semua kelas digunakan, hanya yang sudah digunakan di formulir, serta semua kelas latar belakang dan warna teks (bg-... dan teks-...). Jika Anda benar-benar membutuhkan kelas tambahan, silakan menulis ke dukungan dan kami akan menambahkannya. Jika Anda ingin melakukan perubahan, gunakan variabel di bawah ini. Yang terbaik adalah membiarkan kelas default yang bertanggung jawab atas indentasi, dll., dan hanya mengubah kelas yang bertanggung jawab atas latar belakang dan warna teks. Namun melakukan perubahan pada lekukan, dll juga dimungkinkan, namun hal ini dapat memengaruhi tampilan di perangkat yang berbeda, harap berhati-hati. Anda dapat melihat nilai default pada contoh di atas, serta pada formulir yang dihasilkan di situs web Anda. Penggunaan variabel di bawah ini bersifat opsional; jika tidak diisi, nilai default akan diambil.
button_classes - kelas css yang mengontrol tampilan visual tombol.
icon_classes - kelas css yang mengontrol tampilan visual ikon di sebelah kiri.
container_classes - kelas css yang mengontrol tampilan visual container.
form_container - kelas css yang mengontrol tampilan visual wadah formulir.
title_container_classes - kelas css yang mengontrol tampilan visual wadah header.
title_classes - kelas css yang mengontrol tampilan visual header.