Website booking form
To start using the booking form on your website, you need to find out the special technical number of your company (token). To do this, you need to go to the Company Profile on the Company tab, there you will find the API token line. To copy a token you need to click on it and it will be copied. After receiving the number, you need to insert just a few lines into the code of your site.
This code must be inserted between tags <head>
<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>
This code must be inserted before the closing tag </body>
<script src="https://rentprog-b5205.web.app/js/app.js"></script>
This is the code of the application itself, it needs to be inserted between the <body> tags in the place you need
<rentprog-widget
token="token"
locale="en"
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}]'
chairs='{"price":15, "daily": false}'
boosters='{"price":10, "daily": false}'
middlename_required="false"
agreement='{"text": ", and also accept ", "link_text": "rental terms", "link": "https://rentprog.com/en/agreement"}'
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 - you need to insert your API token. It can be found in the company profile, Company tab. You need to click on it and the token will be copied to the clipboard.
locale - form language, need to insert en - for English, de - for German, fr - for French, pt - for Portuguese, es - for Spanish, hi - for Hindi, sr - for Serbian, tr - for Turkish, th - for Thai, it - for Italian, id - for Indonesian.
show_all_cars - show all cars; by default, only those available for specified dates are shown, taking into account the interval between reservations specified in the settings.
show_email - show the email input field or not. If the value is "true", the field will be shown; if the value is "false", the field will be hidden.
show_phone - show the phone input field or not. If the value is "true", the field will be shown; if the value is "false", the field will be hidden.
show_middlename - show the field for entering a middle name or not. If the value is "true", the field will be shown; if the value is "false", the field will be hidden.
show_birthday - show the field for entering the date of birth or not. If the value is "true", the field will be shown; if the value is "false", the field will be hidden.
show_passport - show the field for entering passport data or not. If the value is "true", the field will be shown; if the value is "false", the field will be hidden.
show_address - show the address input field or not. If the value is "true", the field will be shown; if the value is "false", the field will be hidden.
show_driver_license - show the field for entering driver's license data or not. If the value is "true", the field will be shown; if the value is "false", the field will be hidden.
rental_object - a parameter that replaces the “Select car” line with the entered value, for example “Select a boat”.
hidden_car_year - hide the year of manufacture of the car, if it is set to “true”, then the year will be hidden, if it is set to “false” or the parameter is missing, then the year will be shown.
passport_required - passport data fields, if set to "true", the fields become mandatory.
driver_license_required - driver's license data fields, if the value is "true", the fields become mandatory, if "false" then they are optional.
birthday_required - date of birth field, if it is “true”, the fields become mandatory, if “false” then they are optional.
email_required - Email field, if it is “true”, the fields become mandatory, if “false” then they are optional.
phone_required - phone input field, if it is “true”, the fields become mandatory, if “false” then they are optional.
middlename_required - middle name input field, if it is “true”, the fields become mandatory, if “false” then they are optional.
places - These are places of delivery and reception, indicating prices for delivery/reception. If you do not need the field data, remove this option.
equipment - list of additional equipment, daily - payment daily or for the entire rental period, price - price. If you do not need this field, simply remove this parameter.
chairs - child seats, daily - payment daily or for the entire rental period, price - price. If you do not need the field data, remove this option.
boosters - children's chairs without a backrest (seats), the settings are the same. If you do not need these fields, delete this parameter.
agreement - the first line is fixed, since we collect personal data, if you want to add a link to your terms and conditions, you need to fill out this parameter.
If the chairs, boosters, equipment, agreement parameters are not needed, simply remove them from the code.
Visual design
The Tailwind v2 library is used for design. More details about it here. To speed up the loading of the form, not all classes are used, only those that are already used in the form, as well as all the background and text color classes (bg-... and text-...). If you really need some additional class, please write to support and we will add it. If you want to make changes, use the variables below. It is best to leave the default classes that are responsible for indents, etc., and change only the classes that are responsible for the background and text color. But making changes to indentations, etc. is also possible, but this may affect the display on different devices, please be careful. You can see the default values in the example above, as well as in the generated form on your website. The use of the variables below is optional; if they are not filled in, the default values will be taken.
button_classes - css classes that control the visual display of buttons.
icon_classes - css classes that control the visual display of the icon on the left.
container_classes - css classes that control the visual display of the container.
form_container - css classes that control the visual display of the form container.
title_container_classes - css classes that control the visual display of the header container.
title_classes - css classes that control the visual display of the header.