Formulario de reserva en el sitio web
Para empezar a utilizar el formulario de reserva en su sitio web, necesita averiguar el número técnico especial de su empresa (token). Para hacer esto, debe ir al Perfil de la empresa en la pestaña Empresa, allí encontrará la línea del token API. Para copiar un token, debe hacer clic en él y se copiará. Después de recibir el número, deberá insertar solo unas pocas líneas en el código de su sitio.
Este código debe insertarse entre las etiquetas <head>
<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>
Este código debe insertarse antes de la etiqueta de cierre </body>
<script src="https://rentprog-b5205.web.app/js/app.js"></script>
Este es el código de la aplicación en sí, debe insertarse entre las etiquetas <body> en el lugar que necesite.
<rentprog-widget
token="token"
locale="es"
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: debe insertar su token API. Se puede encontrar en el perfil de la empresa, pestaña Empresa. Debe hacer clic en él y el token se copiará en el portapapeles.
locale - idioma del formulario, es necesario insertar en - para inglés, de - para alemán, fr - para francés, pt - para portugués, es - para español, hi - para hindi, sr - para serbio, tr - para turco, th - para tailandés, it - para italiano, id - para indonesio.
show_all_cars - muestra todos los coches; De forma predeterminada, solo se muestran aquellos disponibles para fechas específicas, teniendo en cuenta el intervalo entre reservas especificado en la configuración.
show_email: muestra o no el campo de entrada de correo electrónico. Si el valor es "verdadero", se mostrará el campo; si el valor es "falso", el campo quedará oculto.
show_phone: muestra o no el campo de entrada del teléfono. Si el valor es "verdadero", se mostrará el campo; si el valor es "falso", el campo quedará oculto.
show_middlename: muestra el campo para ingresar un segundo nombre o no. Si el valor es "verdadero", se mostrará el campo; si el valor es "falso", el campo quedará oculto.
show_birthday: muestra el campo para ingresar la fecha de nacimiento o no. Si el valor es "verdadero", se mostrará el campo; si el valor es "falso", el campo quedará oculto.
show_passport: muestra o no el campo para ingresar los datos del pasaporte. Si el valor es "verdadero", se mostrará el campo; si el valor es "falso", el campo quedará oculto.
show_address: muestra o no el campo de entrada de dirección. Si el valor es "verdadero", se mostrará el campo; si el valor es "falso", el campo quedará oculto.
show_driver_license: muestra el campo para ingresar datos de la licencia de conducir o no. Si el valor es "verdadero", se mostrará el campo; si el valor es "falso", el campo quedará oculto.
rental_object: un parámetro que reemplaza la línea "Seleccionar automóvil" con el valor ingresado, por ejemplo, "Seleccionar un barco".
hidden_car_year: oculta el año de fabricación del automóvil, si está configurado en "verdadero", entonces el año se ocultará, si está configurado en "falso" o falta el parámetro, entonces el Se mostrará el año.
passport_required: campos de datos del pasaporte; si se configuran en "true", los campos se vuelven obligatorios.
driver_license_required: campos de datos de la licencia de conducir, si el valor es "verdadero", los campos se vuelven obligatorios, si es "falso", entonces son opcionales.
birthday_required - campo de fecha de nacimiento, si es "verdadero", los campos se vuelven obligatorios, si es "falso", entonces son opcionales.
email_required - Campo de correo electrónico, si es "verdadero", los campos se vuelven obligatorios, si es "falso", entonces son opcionales.
phone_required - campo de entrada del teléfono, si es "verdadero", los campos se vuelven obligatorios, si es "falso", entonces son opcionales.
middlename_required - campo de entrada del segundo nombre, si es "verdadero", los campos se vuelven obligatorios, si es "falso", entonces son opcionales.
places - Son lugares de entrega y recepción, indicando precios de entrega/recepción. Si no necesita los datos del campo, elimine esta opción.
equipment - lista de equipos adicionales, daily - pago diario o por todo el período de alquiler, price - precio. Si no necesita este campo, simplemente elimine este parámetro.
chairs - sillas para niños, daily - pago diario o por todo el periodo de alquiler, price - precio. Si no necesita los datos del campo, elimine esta opción.
boosters - sillas para niños sin respaldo (asientos), los ajustes son los mismos. Si no necesita estos campos, elimine este parámetro.
agreement - la primera línea es fija, ya que recopilamos datos personales, si desea agregar un enlace a sus términos y condiciones, debe completar este parámetro.
Si las sillas, los elevadores, el equipo y los parámetros de acuerdo no son necesarios, simplemente elimínelos del código.
Diseño visual
La biblioteca Tailwind v2 se utiliza para el diseño. Más detalles al respectoaquí. Para agilizar la carga del formulario no se utilizan todas las clases, sólo aquellas que ya están utilizadas en el formulario, así como todas las clases de color de fondo y texto (bg-... y text-...). Si realmente necesita alguna clase adicional, escriba al soporte y la agregaremos. Si desea realizar cambios, utilice las variables siguientes. Es mejor dejar las clases predeterminadas que son responsables de las sangrías, etc., y cambiar solo las clases que son responsables del fondo y el color del texto. Pero también es posible realizar cambios en las sangrías, etc., pero esto puede afectar la visualización en diferentes dispositivos, tenga cuidado. Puede ver los valores predeterminados en el ejemplo anterior, así como en el formulario generado en su sitio web. El uso de las siguientes variables es opcional; si no se completan, se tomarán los valores predeterminados.
button_classes: clases CSS que controlan la visualización de los botones.
icon_classes: clases CSS que controlan la visualización del icono de la izquierda.
container_classes: clases CSS que controlan la visualización del contenedor.
form_container: clases CSS que controlan la visualización del contenedor del formulario.
title_container_classes: clases CSS que controlan la visualización del contenedor de encabezado.
title_classes: clases CSS que controlan la visualización del encabezado.