Formularz rezerwacji na stronę

Aby rozpocząć korzystanie z formularza rezerwacji na swojej stronie, musisz poznać specjalny techniczny numer Twojej firmy (token). W tym celu przejdź do Profilu firmy na zakładkę Firma i znajdź wiersz Token API. Aby skopiować token, naciśnij go — zostanie skopiowany. Po uzyskaniu numeru wystarczy wkleić kilka linii kodu na swojej stronie.

Ten kod należy wkleić między znacznikami <head>

<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>

Ten kod należy wkleić przed zamykającym znacznikiem </body>

<script src="https://rentprog-b5205.web.app/js/app.js"></script>

To jest kod samego formularza — należy go wkleić między znacznikami <body> w odpowiednie miejsce

<rentprog-widget 
      token="token" 
      locale="ru" 
      show_all_cars='true' 
      hidden_car_year='false'
      places='[{"place":"Офис","price":0},{"place":"Багажник на крышу","price":300},{"place":"Аэропорт","price":800}]'
      equipment='[{"item":"Багажник на крышу","price":400, "daily": true},{"item":"Видеорегистратор","price":600, "daily": false},{"item":"Навигатор","price":500, "daily": false},{"item":"Поперечины","price":1000, "daily": false}]'
      chairs='{"price":900, "daily": false}'
      boosters='{"price":600, "daily": false}'
      middlename_required="false"
      agreement='{"text": ", а так же принимаете ", "link_text": "условия аренды", "link": "https://rentprog.ru/ru/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="Выберите лодку"
    >
    </rentprog-widget>

token — należy wkleić swój token API. Można go znaleźć w profilu firmy, zakładka Firma. Kliknij na niego, a token zostanie skopiowany do schowka.

locale - язык формы, нужно вставить ru - для русского языка, en - для английского, de - для немецкого , fr - для французского, pt - для португальского, es - для испанского, hi - для хинди, sr - для сербского, tr - для турецкого, th - для тайского, it - для итальянского, id - для индонезийского, pl - для польского, ro - для румынского.

show_all_cars — wyświetlaj wszystkie samochody; domyślnie wyświetlane są tylko wolne na podane daty z uwzględnieniem odstępu między rezerwacjami ustawionego w konfiguracji.

car_id — jeśli ten parametr jest obecny, formularz będzie działać tylko dla jednego konkretnego samochodu/obiektu wynajmu. Należy wstawić ID samochodu z systemu RentProg. Można go znaleźć na liście wszystkich obiektów lub w karcie samochodu, patrząc na parametry adresu URL w pasku adresu przeglądarki.

car_name — używany razem z parametrem car_id. W tym parametrze należy podać nazwę samochodu/obiektu wynajmu.

show_email — czy wyświetlać pole do wpisania e-maila. Wartość "true" — pole jest widoczne, "false" — pole jest ukryte.

show_phone — czy wyświetlać pole do wpisania telefonu. Wartość "true" — pole jest widoczne, "false" — pole jest ukryte.

show_middlename — czy wyświetlać pole do wpisania drugiego imienia. Wartość "true" — pole jest widoczne, "false" — pole jest ukryte.

show_birthday — czy wyświetlać pole do wpisania daty urodzenia. Wartość "true" — pole jest widoczne, "false" — pole jest ukryte.

show_passport — czy wyświetlać pole do wpisania danych paszportu. Wartość "true" — pole jest widoczne, "false" — pole jest ukryte.

show_address — czy wyświetlać pole do wpisania adresu. Wartość "true" — pole jest widoczne, "false" — pole jest ukryte.

show_driver_license — czy wyświetlać pole do wpisania danych prawa jazdy. Wartość "true" — pole jest widoczne, "false" — pole jest ukryte.

rental_object — parametr zastępujący tekst "Wybierz samochód" podaną wartością, np. "Wybierz łódkę".

hidden_car_year — ukryj rok produkcji samochodu. Wartość "true" — rok jest ukryty, "false" lub brak parametru — rok jest widoczny.

passport_required — pola danych paszportu; wartość "true" — pola stają się obowiązkowe.

driver_license_required — pola danych prawa jazdy; wartość "true" — pola obowiązkowe, "false" — nieobowiązkowe.

birthday_required — pole daty urodzenia; wartość "true" — pole obowiązkowe, "false" — nieobowiązkowe.

email_required — pole e-mail; wartość "true" — pole obowiązkowe, "false" — nieobowiązkowe.

phone_required — pole numeru telefonu; wartość "true" — pole obowiązkowe, "false" — nieobowiązkowe.

middlename_required — pole drugiego imienia; wartość "true" — pole obowiązkowe, "false" — nieobowiązkowe.

places — miejsca wydania i odbioru z podaniem cen dostawy/odbioru. Jeśli nie potrzebujesz tych pól, usuń ten parametr.

equipment — lista wyposażenia dodatkowego; daily — płatność za dobę lub za cały okres wynajmu, price — cena. Jeśli nie potrzebujesz tego pola, po prostu usuń ten parametr.

chairs — foteliki dziecięce; daily — płatność za dobę lub za cały okres wynajmu, price — cena. Jeśli nie potrzebujesz tych pól, usuń ten parametr.

boosters — podkładki dla dzieci (bez oparcia), ustawienia takie same. Jeśli nie potrzebujesz tych pól, usuń ten parametr.

agreement — pierwsza linia jest stała, ponieważ zbieramy dane osobowe; jeśli chcesz dodać link do własnych warunków, należy wypełnić ten parametr.

Jeśli parametry chairs, boosters, equipment, agreement nie są potrzebne, po prostu usuń je z kodu.

Wygląd wizualny

Do stylizacji używana jest biblioteka Tailwind v2. Więcej informacji tutaj. Aby przyspieszyć ładowanie formularza, nie są używane wszystkie klasy — tylko te już używane w formularzu, a także wszystkie klasy koloru tła i tekstu (bg-... i text-...). Jeśli potrzebujesz dodatkowej klasy, napisz do pomocy technicznej, a my ją dodamy. Jeśli chcesz wprowadzić zmiany, użyj zmiennych poniżej. Najlepiej pozostawić domyślne klasy odpowiedzialne za odstępy itp. i zmieniać tylko klasy odpowiedzialne za kolor tła i tekstu. Zmiany w odstępach są również możliwe, ale mogą wpływać na wyświetlanie na różnych urządzeniach — proszę być ostrożnym. Wartości domyślne można zobaczyć w przykładzie powyżej oraz w wygenerowanym formularzu na swojej stronie. Używanie zmiennych poniżej jest opcjonalne — jeśli nie zostaną wypełnione, zostaną użyte wartości domyślne.

button_classes — klasy CSS sterujące wyglądem wizualnym przycisków.

icon_classes — klasy CSS sterujące wyglądem wizualnym ikony po lewej stronie.

container_classes — klasy CSS sterujące wyglądem wizualnym kontenera.

form_container — klasy CSS sterujące wyglądem wizualnym kontenera formularza.

title_container_classes — klasy CSS sterujące wyglądem wizualnym kontenera nagłówka.

title_classes — klasy CSS sterujące wyglądem wizualnym nagłówka.

Przykład instalacji formularza w kreatorze Tilda w tym filmie.

Śledzenie konwersji

Do śledzenia konwersji i optymalizacji kampanii reklamowych w Yandex Direct w formularz wbudowane są zdarzenia JavaScript, które wyzwalają się przy wyszukiwaniu i wysyłaniu zgłoszenia. Do działania niezbędny jest licznik Yandex Metrica i skonfigurowane cele.

yandex_metrika_id — ten parametr odpowiada za powiązanie licznika Yandex Metrica i wbudowanych zdarzeń. Należy wstawić numer licznika. Aby zdarzenia się wyzwalały, należy też utworzyć dwa cele na zdarzenia JavaScript.

Aby zdarzenia się wyzwalały, należy utworzyć dwa cele w Yandex Metrica na zdarzenia JavaScript: jeden, w którym identyfikator celu odpowiada search_cars, i drugi, w którym identyfikator celu odpowiada send_booking.