Formulário de reserva do site

Para começar a utilizar o formulário de reserva do seu site, você precisa saber o número técnico especial da sua empresa (token). Para fazer isso, você precisa ir até o Perfil da Empresa na aba Empresa, lá você encontrará a linha do token API. Para copiar um token você precisa clicar nele e ele será copiado. Após receber o número, você precisa inserir apenas algumas linhas no código do seu site.

Este código deve ser inserido entre as tags <head>

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

Este código deve ser inserido antes da tag de fechamento </body>

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

Este é o código da aplicação em si, ele precisa ser inserido entre as tags <body> no local que você precisar

<rentprog-widget 
      token="token" 
      locale="pt" 
      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 - você precisa inserir seu token de API. Ele pode ser encontrado no perfil da empresa, aba Empresa. Você precisa clicar nele e o token será copiado para a área de transferência.

locale - idioma do formulário, é necessário inserir en - para inglês, de - para alemão, fr - para francês, pt - para português, es - para espanhol, hi - para hindi, sr - para sérvio, tr - para turco, th - para tailandês, it - para italiano, id - para indonésio.

show_all_cars - mostra todos os carros; por padrão, apenas são mostradas as disponíveis para datas específicas, levando em consideração o intervalo entre as reservas especificado nas configurações.

show_email - mostra ou não o campo de entrada do email. Se o valor for “true”, o campo será mostrado; se o valor for “false”, o campo ficará oculto.

show_phone - mostra ou não o campo de entrada do telefone. Se o valor for “true”, o campo será mostrado; se o valor for “false”, o campo ficará oculto.

show_middlename - mostra o campo para inserir o nome do meio ou não. Se o valor for “true”, o campo será mostrado; se o valor for “false”, o campo ficará oculto.

show_birthday - mostra o campo para inserir ou não a data de nascimento. Se o valor for “true”, o campo será mostrado; se o valor for “false”, o campo ficará oculto.

show_passport - mostra ou não o campo para inserção dos dados do passaporte. Se o valor for “true”, o campo será mostrado; se o valor for “false”, o campo ficará oculto.

show_address - mostra ou não o campo de entrada do endereço. Se o valor for “true”, o campo será mostrado; se o valor for “false”, o campo ficará oculto.

show_driver_license - mostra o campo para inserção ou não dos dados da carteira de habilitação. Se o valor for “true”, o campo será mostrado; se o valor for “false”, o campo ficará oculto.

rental_object - um parâmetro que substitui a linha “Selecionar carro” pelo valor inserido, por exemplo “Selecionar um barco”.

hidden_car_year - oculta o ano de fabricação do carro, se estiver definido como “true”, então o ano ficará oculto, se estiver definido como “false” ou o parâmetro estiver faltando, então o ano será mostrado.

passport_required - campos de dados do passaporte, se definido como "true", os campos tornam-se obrigatórios.

driver_license_required - campos de dados da carteira de habilitação, se o valor for "true" os campos tornam-se obrigatórios, se "false" então são opcionais.

birthday_required - campo data de nascimento, se for “true” os campos tornam-se obrigatórios, se “false” então são opcionais.

email_required - Campo de email, se for “true” os campos tornam-se obrigatórios, se “false” então são opcionais.

phone_required - campo de entrada do telefone, se for “true” os campos tornam-se obrigatórios, se “false” então são opcionais.

middlename_required - campo de entrada do nome do meio, se for “true”, os campos tornam-se obrigatórios, se “false” então são opcionais.

places - São locais de entrega e recepção, indicando preços de entrega/recepção. Caso não precise dos dados do campo, remova esta opção.

equipment - lista de equipamentos adicionais, daily - pagamento diário ou para todo o período de locação, price - preço. Se você não precisar deste campo, basta remover este parâmetro.

chairs - cadeiras infantis, daily - pagamento diário ou durante todo o período de locação, price - preço. Caso não precise dos dados do campo, remova esta opção.

boosters - cadeiras infantis sem encosto (assentos), as configurações são as mesmas. Se você não precisar desses campos, exclua esse parâmetro.

agreement - a primeira linha é fixa, pois coletamos dados pessoais, caso queira adicionar um link aos seus termos e condições é necessário preencher este parâmetro.

ISe as cadeiras, reforços, equipamentos, parâmetros de concordância não forem necessários, basta removê-los do código.

Design visual

A biblioteca Tailwind v2 é usada para design. Mais detalhes sobre issoaqui. Para agilizar o carregamento do formulário, não são utilizadas todas as classes, apenas aquelas que já são utilizadas no formulário, bem como todas as classes de fundo e cores do texto (bg-... e text-...). Se você realmente precisar de alguma aula adicional, escreva para o suporte e nós a adicionaremos. Se você quiser fazer alterações, use as variáveis abaixo. É melhor deixar as classes padrão responsáveis pelos recuos, etc., e alterar apenas as classes responsáveis pelo fundo e pela cor do texto. Mas também é possível fazer alterações nos recuos, etc., mas isso pode afetar a exibição em diferentes dispositivos, tenha cuidado. Você pode ver os valores padrão no exemplo acima, bem como no formulário gerado em seu site. A utilização das variáveis abaixo é opcional; caso não sejam preenchidos, serão considerados os valores padrão.

button_classes - classes css que controlam a exibição visual dos botões.

icon_classes - classes css que controlam a exibição visual do ícone à esquerda.

container_classes - classes css que controlam a exibição visual do contêiner.

form_container - classes css que controlam a exibição visual do contêiner do formulário.

title_container_classes - classes css que controlam a exibição visual do contêiner de cabeçalho.

title_classes - classes css que controlam a exibição visual do cabeçalho.