Formulaire de réservation sur le site Internet
Pour commencer à utiliser le formulaire de réservation sur votre site Internet, vous devez connaître le numéro technique spécial de votre entreprise (token). Pour ce faire, vous devez vous rendre dans le profil de l'entreprise dans l'onglet Entreprise, vous y trouverez la ligne de jetons API. Pour copier un jeton, vous devez cliquer dessus et il sera copié. Après avoir reçu le numéro, il vous suffit d'insérer quelques lignes dans le code de votre site.
Ce code doit être inséré entre les balises <head>
<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>
Ce code doit être inséré avant la balise fermante </body>
<script src="https://rentprog-b5205.web.app/js/app.js"></script>
Il s'agit du code de l'application elle-même, il doit être inséré entre les balises <body> à l'endroit dont vous avez besoin
<rentprog-widget
token="token"
locale="fr"
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 - vous devez insérer votre jeton API. Il se trouve dans le profil de l'entreprise, onglet Entreprise. Vous devez cliquer dessus et le jeton sera copié dans le presse-papiers.
locale - langue du formulaire, il faut insérer en - pour l'anglais, de - pour l'allemand, fr - pour le français, pt - pour le portugais, es - pour l'espagnol, hi - pour l'hindi, sr - pour le serbe, tr - pour le turc, th - pour le thaï, it - pour l'italien, id - pour l'indonésien.
show_all_cars - afficher toutes les voitures ; par défaut, seules celles disponibles aux dates spécifiées sont affichées, en tenant compte de l'intervalle entre les réservations spécifié dans les paramètres.
show_email - afficher ou non le champ de saisie de l'e-mail. Si la valeur est « vrai », le champ sera affiché ; si la valeur est "false", le champ sera masqué.
show_phone - affiche ou non le champ de saisie du téléphone. Si la valeur est « vrai », le champ sera affiché ; si la valeur est "false", le champ sera masqué.
show_middlename - affiche le champ pour saisir ou non un deuxième prénom. Si la valeur est « vrai », le champ sera affiché ; si la valeur est "false", le champ sera masqué.
show_birthday - affiche le champ pour saisir ou non la date de naissance. Si la valeur est « vrai », le champ sera affiché ; si la valeur est "false", le champ sera masqué.
show_passport - affiche le champ de saisie ou non des données du passeport. Si la valeur est « vrai », le champ sera affiché ; si la valeur est "false", le champ sera masqué.
show_address - affiche ou non le champ de saisie de l'adresse. Si la valeur est « vrai », le champ sera affiché ; si la valeur est "false", le champ sera masqué.
show_driver_license - afficher le champ pour saisir ou non les données du permis de conduire. Si la valeur est « vrai », le champ sera affiché ; si la valeur est "false", le champ sera masqué.
rental_object - un paramètre qui remplace la ligne « Sélectionner une voiture » par la valeur saisie, par exemple « Sélectionner un bateau ».
hidden_car_year - masquer l'année de fabrication de la voiture, si elle est définie sur "true", alors l'année sera masquée, si elle est définie sur "false" ou si le paramètre est manquant, alors le l’année sera affichée.
passport_required - champs de données du passeport, s'ils sont définis sur "true", les champs deviennent obligatoires.
driver_license_required - champs de données du permis de conduire, si la valeur est "true", les champs deviennent obligatoires, si "false" alors ils sont facultatifs.
birthday_required - champ date de naissance, s'il est « vrai », les champs deviennent obligatoires, s'il est « faux » alors ils sont facultatifs.
email_required - Champ email, s'il est « vrai », les champs deviennent obligatoires, s'il est « faux » alors ils sont facultatifs.
phone_required - champ de saisie du téléphone, s'il est « vrai », les champs deviennent obligatoires, s'il est « faux » alors ils sont facultatifs.
middlename_required - champ de saisie du deuxième prénom, s'il est « vrai », les champs deviennent obligatoires, s'il est « faux » alors ils sont facultatifs.
places - Il s'agit des lieux de livraison et de réception, indiquant les tarifs de livraison/réception. Si vous n'avez pas besoin des données de champ, supprimez cette option.
equipment - liste des équipements supplémentaires, daily - paiement journalier ou pour toute la durée de location, price - prix. Si vous n'avez pas besoin de ce champ, supprimez simplement ce paramètre.
chairs - sièges enfants, daily - paiement journalier ou pour toute la durée de location, price - prix. Si vous n'avez pas besoin des données de champ, supprimez cette option.
boosters - chaises enfants sans dossier (sièges), les réglages sont les mêmes. Si vous n'avez pas besoin de ces champs, supprimez ce paramètre.
agreement -la première ligne est fixe, puisque nous collectons des données personnelles, si vous souhaitez ajouter un lien vers vos conditions générales de vente, vous devez renseigner ce paramètre.
Si les chaises, boosters, équipements, paramètres d'accord ne sont pas nécessaires, supprimez-les simplement du code.
Aspect visuel
La bibliothèque Tailwind v2 est utilisée pour la conception. Plus de détails à ce sujet ici. Pour accélérer le chargement du formulaire, toutes les classes ne sont pas utilisées, seulement celles qui sont déjà utilisées dans le formulaire, ainsi que toutes les classes de couleurs de fond et de texte (bg-... et text-...). Si vous avez vraiment besoin d'un cours supplémentaire, veuillez écrire au support et nous l'ajouterons. Si vous souhaitez apporter des modifications, utilisez les variables ci-dessous. Il est préférable de laisser les classes par défaut responsables des retraits, etc., et de modifier uniquement les classes responsables de la couleur de l'arrière-plan et du texte. Mais apporter des modifications aux indentations, etc. est également possible, mais cela peut affecter l'affichage sur différents appareils, soyez prudent. Vous pouvez voir les valeurs par défaut dans l'exemple ci-dessus, ainsi que dans le formulaire généré sur votre site Web. L'utilisation des variables ci-dessous est facultative ; s'ils ne sont pas renseignés, les valeurs par défaut seront prises.
button_classes - classes CSS qui contrôlent l'affichage visuel des boutons.
icon_classes - classes CSS qui contrôlent l'affichage visuel de l'icône de gauche.
container_classes - classes CSS qui contrôlent l'affichage visuel du conteneur.
form_container - classes CSS qui contrôlent l'affichage visuel du conteneur de formulaire.
title_container_classes - classes CSS qui contrôlent l'affichage visuel du conteneur d'en-tête.
title_classes - classes CSS qui contrôlent l'affichage visuel de l'en-tête.