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
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
- 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.
- 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.
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>
Comentários
Por favor, entre para comentar.