Website-Buchungsformular
Um das Buchungsformular auf Ihrer Website nutzen zu können, müssen Sie die spezielle technische Nummer Ihres Unternehmens (Token) herausfinden. Dazu müssen Sie zum Firmenprofil auf der Registerkarte „Firma“ gehen, dort finden Sie die API-Token-Zeile. Um ein Token zu kopieren, müssen Sie darauf klicken und es wird kopiert. Nachdem Sie die Nummer erhalten haben, müssen Sie nur noch wenige Zeilen in den Code Ihrer Website einfügen.
Dieser Code muss zwischen den Tags <head> eingefügt werden
<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>
TSein Code muss vor dem schließenden Tag </body> eingefügt werden
<script src="https://rentprog-b5205.web.app/js/app.js"></script>
Dies ist der Code der Anwendung selbst. Er muss zwischen den <body>-Tags an der gewünschten Stelle eingefügt werden
<rentprog-widget
token="token"
locale="de"
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 – Sie müssen Ihr API-Token einfügen. Sie finden es im Firmenprofil auf der Registerkarte „Firma“. Sie müssen darauf klicken und der Token wird in die Zwischenablage kopiert.
locale – Formularsprache, muss eingefügt werden: en – für Englisch, de – für Deutsch, fr – für Französisch, pt – für Portugiesisch, es – für Spanisch, hi – für Hindi, sr – für Serbisch, tr – für Türkisch, th – für Thailändisch, it – für Italienisch, id – für Indonesisch.
show_all_cars – alle Autos anzeigen; Standardmäßig werden nur diejenigen angezeigt, die für bestimmte Daten verfügbar sind, wobei das in den Einstellungen angegebene Intervall zwischen den Reservierungen berücksichtigt wird.
show_email – E-Mail-Eingabefeld anzeigen oder nicht. Wenn der Wert „true“ ist, wird das Feld angezeigt; Wenn der Wert „false“ ist, wird das Feld ausgeblendet.
show_phone – Zeigt das Telefoneingabefeld an oder nicht. Wenn der Wert „true“ ist, wird das Feld angezeigt; Wenn der Wert „false“ ist, wird das Feld ausgeblendet.
show_middlename – Zeigt das Feld zur Eingabe eines zweiten Vornamens an oder nicht. Wenn der Wert „true“ ist, wird das Feld angezeigt; Wenn der Wert „false“ ist, wird das Feld ausgeblendet.
show_birthday – zeigt das Feld zur Eingabe des Geburtsdatums an oder nicht. Wenn der Wert „true“ ist, wird das Feld angezeigt; Wenn der Wert „false“ ist, wird das Feld ausgeblendet.
show_passport – zeigt das Feld zur Eingabe von Passdaten an oder nicht. Wenn der Wert „true“ ist, wird das Feld angezeigt; Wenn der Wert „false“ ist, wird das Feld ausgeblendet.
show_address – zeigt das Adresseingabefeld an oder nicht. Wenn der Wert „true“ ist, wird das Feld angezeigt; Wenn der Wert „false“ ist, wird das Feld ausgeblendet.
show_driver_license – zeigt das Feld zur Eingabe von Führerscheindaten an oder nicht. Wenn der Wert „true“ ist, wird das Feld angezeigt; Wenn der Wert „false“ ist, wird das Feld ausgeblendet.
rental_object – ein Parameter, der die Zeile „Auto auswählen“ durch den eingegebenen Wert ersetzt, zum Beispiel „Boot auswählen“.
hidden_car_year – verbirgt das Herstellungsjahr des Autos, wenn es auf „true“ gesetzt ist, wird das Jahr ausgeblendet, wenn es auf „false“ gesetzt ist oder der Parameter fehlt, dann wird das Jahr ausgeblendet Jahr angezeigt.
passport_required – Passdatenfelder, wenn auf „true“ gesetzt, werden die Felder zu Pflichtfeldern.
driver_license_required – Datenfelder für den Führerschein. Wenn der Wert „true“ ist, werden die Felder obligatorisch, wenn „false“, dann sind sie optional.
birthday_required – Feld „Geburtsdatum“. Wenn es „true“ ist, werden die Felder obligatorisch, wenn es „false“ ist, sind sie optional.
email_required – E-Mail-Feld. Wenn es „true“ ist, werden die Felder obligatorisch, wenn es „false“ ist, sind sie optional.
phone_required – Telefon-Eingabefeld. Wenn es „true“ ist, werden die Felder obligatorisch, wenn es „false“ ist, sind sie optional.
middlename_required – Eingabefeld für den zweiten Vornamen. Wenn es „true“ ist, werden die Felder obligatorisch, wenn es „false“ ist, sind sie optional.
places - Hierbei handelt es sich um Liefer- und Empfangsorte mit Angabe der Preise für Lieferung/Empfang. Wenn Sie die Felddaten nicht benötigen, entfernen Sie diese Option.
equipment - Liste der Zusatzausrüstung, daily - Zahlung täglich oder für die gesamte Mietdauer, price - Preis. Wenn Sie dieses Feld nicht benötigen, entfernen Sie einfach diesen Parameter.
chairs - Kindersitze, täglich - Bezahlung täglich oder für die gesamte Mietdauer, Preis - Preis. Wenn Sie die Felddaten nicht benötigen, entfernen Sie diese Option.
boosters - Bei Kinderstühlen ohne Rückenlehne (Sitzfläche) sind die Einstellungen gleich. Wenn Sie diese Felder nicht benötigen, löschen Sie diesen Parameter.
agreement - Die erste Zeile ist festgelegt, da wir personenbezogene Daten erfassen. Wenn Sie einen Link zu Ihren Allgemeinen Geschäftsbedingungen hinzufügen möchten, müssen Sie diesen Parameter ausfüllen.
Wenn die Stühle, Booster, Geräte oder Vereinbarungsparameter nicht benötigt werden, entfernen Sie sie einfach aus dem Code.
Visuelle Gestaltung
Für das Design wird die Tailwind v2-Bibliothek verwendet. Weitere Details dazu finden Sie hier. Um das Laden des Formulars zu beschleunigen, werden nicht alle Klassen verwendet, sondern nur diejenigen, die bereits im Formular verwendet werden, sowie alle Hintergrund- und Textfarbklassen (bg-... und text-...). Wenn Sie wirklich zusätzlichen Kurs benötigen, schreiben Sie bitte an den Support und wir werden ihn hinzufügen. Wenn Sie Änderungen vornehmen möchten, verwenden Sie die folgenden Variablen. Es ist am besten, die Standardklassen beizubehalten, die für Einrückungen usw. verantwortlich sind, und nur die Klassen zu ändern, die für die Hintergrund- und Textfarbe verantwortlich sind. Aber auch Änderungen an Einrückungen etc. sind möglich, allerdings kann dies Auswirkungen auf die Darstellung auf unterschiedlichen Geräten haben, bitte seien Sie vorsichtig. Die Standardwerte können Sie im obigen Beispiel sowie im generierten Formular auf Ihrer Website sehen. Die Verwendung der folgenden Variablen ist optional; Wenn sie nicht ausgefüllt sind, werden die Standardwerte übernommen.
button_classes – CSS-Klassen, die die visuelle Anzeige von Schaltflächen steuern.
icon_classes – CSS-Klassen, die die visuelle Anzeige des Symbols auf der linken Seite steuern.
container_classes – CSS-Klassen, die die visuelle Anzeige des Containers steuern.
form_container – CSS-Klassen, die die visuelle Anzeige des Formularcontainers steuern.
title_container_classes – CSS-Klassen, die die visuelle Anzeige des Header-Containers steuern.
title_classes – CSS-Klassen, die die visuelle Anzeige des Headers steuern.