Widget do motor de reservas da Cloudbeds para o site

Juss Reyes

Atualizado 17 de janeiro de 2024 19:49

Este tutorial oferece uma visão geral dos 5 widgets pré-criados do motor de reservas da Cloudbeds e explica como instalar o melhor no seu site, de acordo com as necessidades da sua empresa.

Adicionar widgets requer um conhecimento mínimo de HTML. Cuidado ao adicioná-los.

Visão geral

O widget é um elemento que pode ser adicionado ao seu site. Pode ser exibido como uma barra de pesquisa ou um botão de procura, permitindo que hóspedes em potencial façam suas reservas através do motor de reservas da Cloudbeds, diretamente no seu site. Saiba mais sobre os diferentes tipos de widgets no PMS da Cloudbeds a seguir.

Visualização dos tipos de widgets disponíveis no PMS da Cloudbeds

Duas linhas

Horizontal

Flutuante

Botão grande

Botão pequeno

Sobreposição

Depois de adicionado, o código do widget mostrará o botão Reservar agora no seu site. Quando hóspedes em potencial clicarem nele, aparecerá um calendário sobreposto ao site, permitindo que selecionem as datas desejadas:

Como adicionar widgets do motor de reservas ao site

Passo 1 - Acesse os widgets de sites e confirme as configurações

No menu da conta, acesse a página de Configurações e clique em Motor de reservas.
Clique em Widgets do site.
Escolha o idioma do widget (inglês, português ou espanhol). Se você quiser que o widget tente detectar o idioma do hóspede no navegador, configure a opção para detectado pelo navegador. Se o widget não conseguir detectar o idioma, ele será carregado no idioma padrão da propriedade.
Selecione um dos 5 widgets pré-criados para ver uma representação visual de como cada uma das opções será exibida. Selecionar o tipo de widget específico fornecerá seu código único.
Confirme se você deseja abrir a página de reserva em uma nova janela.

Passo 2 - Copie o código e veja o widget

Copie o código completo mostrado na seção Copie o código abaixo e cole em seu website
Acesse o seu site (ferramenta de criação de site/página). Dependendo de qual widget você selecionar, você precisará colar o código do widget dentro de um elemento div/div. Se você selecionou o widget flutuante, cole o código no na close body tag do seu site.

A equipe da Cloudbeds não pode realizar essa ação por você, pois não temos acesso ao seu site. Caso precise colar o código do widget no seu site, entre em contato com o seu webdesigner ou suporte à criação do site.

Opção avançada: crie seu próprio widget customizado do motor de reservas da Cloudbeds

A equipe da Cloudbeds não oferece suporte na criação de widgets customizados. Recomendamos que você entre em contato com o seu webdesigner/desenvolvedor web para lhe ajudar a criar o widget customizado do motor de reservas.

Uma opção avançada para quem tem conhecimento em desenvolvimento web é criar seu próprio widget. A diferença entre os exemplos abaixo é o formato da data.
Eles substituem os widgets pré-criados, mas podem complementar outros métodos dependendo de como serão projetados. Recomendamos que você mantenha um link em algum local do seu site com as palavras reservas ou reserve.

Para formato de data internacional:

form method="post" action="https://hotels.cloudbeds.com/reservas/dEF4YR"
  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 formato de data dos Estados Unidos:

form method="post" action="https://hotels.cloudbeds.com/reservas/dEF4YR"
  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 o formato de data ISO:

form method="post" action="https://hotels.cloudbeds.com/reservas/dEF4YR"
  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 sua propriedade no local do estilo. Se o widget for colado em um iframe, o seguinte estilo deve ser salvo depois do 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>