Widgets do Motor de Reservas da Cloudbeds para sites

As datas de check-in e check-out aparecem em uma caixa empilhada com poucas informações adicionais.

As datas de check-in e check-out aparecem em uma caixa horizontal com poucas informações adicionais.

As datas de check-in e check-out são exibidas em um banner escuro, junto com uma breve mensagem estimulando seus clientes a reservar.

Isso incorpora apenas um botão sem seletor de data que redireciona o hóspede para o seu Motor de Reservas.

Isso incorpora apenas um botão sem seletor de data que redireciona o hóspede para o seu Motor de Reservas.

Uma vez adicionado, o código do widget em Sobreposição exibirá um botão de Reservar Agora em seu site. Quando os hóspedes em potencial clicarem nele, um grande calendário será exibido de forma sobreposta ao site, permitindo que eles selecionem as datas desejadas sem serem redirecionados para fora da página.

O widget para Imersivo aprimora a página da sua propriedade incorporando recursos essenciais de navegação do seu Motor de Reservas da Cloudbeds.

Quando os hóspedes clicam no botão "Reservar Agora" em seu site de propriedade (como mostrado no passo 1 da imagem abaixo), uma janela aparecerá na tela deles, permitindo acesso a várias opções de reserva (passos 2, 3 e 4).

Os hóspedes podem visualizar detalhes, preços e fotos das acomodações disponíveis. Eles podem adicionar sua escolha preferida ao carrinho e concluir a reserva diretamente em sua página.

1. No seu menu de Conta , vá para Configurações e clique no Motor de Reservas da Cloudbeds;
2. Clique em Widgets do Site;
3. Escolha o idioma de preferência do widget (Inglês, Português ou Espanhol). Se você deseja que o widget tente detectar qual idioma seu hóspede está usando em seu navegador, defina esta opção como Detectar pelo navegador. Caso o widget não consiga detectar um idioma suportado, ele será carregado no idioma padrão da propriedade;
4. Selecione um dos 7 widgets predefinidos para ver uma representação visual de como cada opção se parece. A seleção de um tipo específico de widget fornecerá seu código exclusivo.;
5. Confirme se você gostaria de abrir a página de reserva em uma nova janela.

1. Copie todo o código que aparece na seção Copie o código abaixo e cole-o em seu site;
2. Vá para seu site (Ferramenta/Página de Criação de Sites) Dependendo de qual widget você selecionar, você deve colar o código do widget em um elemento div/div. Se você selecionou o widget flutuante, cole o código logo antes da tag de fechamento do corpo do seu site.

• Uma opção avançada para aqueles familiarizados com programação é criar seu próprio widget. A diferença entre os exemplos abaixo é o formato de data.
• Esses formulários substituiriam os widgets predefinidos, mas poderiam complementar outros métodos dependendo de como você os projetar. Recomendamos que você sempre tenha um link em algum lugar do seu site que diga Reservar ou Reservas.

Para formatos de data internacionais:

form method="post" action="COLE_SEU_URL_DO_MOTOR_DE_RESERVAS_AQUI"
  input type="hidden" name="date_format" value="d/m/Y"
  input type="text" name="widget_date" value="24/08/2015" /
  input type="text" name="widget_date_to" value="25/08/2015" /
/form

Para formatos de data dos EUA:

form method="post" action="COLE_SEU_URL_DO_MOTOR_DE_RESERVAS_AQUI"
  input type="hidden" name="date_format" value="m/d/Y"
  input type="text" name="widget_date" value="08/24/2015" /
  input type="text" name="widget_date_to" value="08/25/2015" /
/form

Para formatos de data ISO:

form method="post" action="COLE_SEU_URL_DO_MOTOR_DE_RESERVAS_AQUI"
  input type="hidden" name="date_format" value="Y-m-d"
  input type="text" name="widget_date" value="08/24/2015" /
  input type="text" name="widget_date_to" value="08/25/2015" /
/form

O código abaixo deve ser salvo no site da propriedade onde quer que o estilo do site seja salvo. Se o widget for colado em um iframe, o seguinte estilo deve ser salvo logo após o script do widget:

<style>
.widgetHotelsForm .horizontal-widget a {
background: #007d8a!important;
border-color: #007d8a!important;
top: 5px;
}
.CloudBedsDatePicker.pika-single .is-selected .pika-button {
background: #007D8A !important;
}
.CloudBedsDatePicker.pika-single .is-today .pika-button:hover {
background: #007D8A !important;
font-weight: bold;
}
.CloudBedsDatePicker .pika-button:hover {
background: #888;
}
</style>