Calendário de Propriedade Única - Incorporação de Seletor de Datas

Gabriela Garcia

Atualizado 21 de fevereiro de 2026 12:13

Visão Geral

Este componente foi criado para integrações que precisam de uma busca por data a nível da propriedade no seu site. Ele funciona bem em:

Página principal ou na seção de destaque do seu site;
Seções de reserva ou de “Verificar Disponibilidade”;
Páginas de destino (landing pages) que direcionam os usuários para o fluxo completo de reservas;
Qualquer página onde você queira que as datas sejam selecionadas antes do hóspede chegar ao Motor de Reservas.

O componente mostra a disponibilidade ao nível da propriedade (em todos os tipos de acomodação), e não de um quarto específico. Após selecionar uma data, o hóspede é direcionado ao Motor de Reservas para escolher um quarto e finalizar a reserva.

Configuração

Para adicionar os Componentes Web do Motor de Reservas a um site externo, primeiro precisamos adicionar o script do Immersive Experience no head do documento HTML:

O <cb-property-date-picker> é um componente web que oferece uma barra de seleção de datas para a sua propriedade. Ele mostra os campos de check-in e check-out, uma janela de calendário e um botão de busca. Quando o hóspede seleciona as datas e clica em Buscar, é redirecionado para o Motor de Reservas com essas datas, onde pode escolher um quarto e concluir a reserva.

Observação: Todas as tags de script do primeiro passo são as mesmas para o Immersive Experience 2.0 e para todos os widgets. Se você já instalou isso em uma incorporação anterior, não precisa fazer novamente. Só precisa ser instalado uma vez no head (global) do site.

Importante:Não use as tags de componentes web do Immersive Experience 2.0 dentro de iframes.

Esta configuração pode causar problemas de rolagem e exigiria a liberação de todos os itens na cadeia de iframes — uma configuração que não é recomendada.

Uma lista de práticas recomendadas quando um usuário utiliza um CMP (Plataforma de Gestão de Consentimento):

Adicione o Immersive Experience no início do head, antes da tag do CMP, e inclua o atributo que impede que ele seja bloqueado. É melhor não especificar todos na documentação, pois podem variar conforme a plataforma
- Cookiebot: data-cookieconsent="ignore"
- OneTrust: data-ignore-consent="true"
- Quantcast: data-quantcast-ignore="true"
Classifique o script abaixo como Necessário no painel administrativo do CMP; novamente, isso pode variar conforme a plataforma

<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>

Instalação

Inclua o script dos componentes web da Cloudbeds no <head> do seu HTML (ou antes do componente no <body>). O script deve ser carregado antes de qualquer tag <cb-property-date-picker> para que o componente seja registrado.

Uso Básico

<script  
src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js">
</script>

O que a configuração faz

Carregar este script registra o componente <cb-property-date-picker> na página.
Após o carregamento do script, você pode colocar uma ou mais tags <cb-property-date-picker> em qualquer lugar. Cada instância exibe a barra do seletor de datas (check-in, check-out e botão de busca) e, quando o hóspede seleciona as datas e clica em buscar, redireciona para o Motor de Reservas (ou sua URL personalizada) com as datas selecionadas, conforme descrito abaixo.

Uso do Componente

Exemplo de mínimo obrigatório

Você pode usar o componente apenas com o data-property-code do script (sem atributos no elemento), ou passar o código da propriedade no próprio elemento:

<cb-property-date-picker  
property-code="YOUR_PROPERTY_CODE"
></cb-property-date-picker>

Com apenas o código da propriedade (no script ou no elemento), o componente exibe o botão “Buscar” padrão e usa o idioma e a moeda padrão da sua propriedade.

Atributos

Atributo	Obrigatório	Padrão	Descrição
`property-code`	Sim	—	O código da sua Propriedade Cloudbeds. Se omitido, o componente usa o `data-property-code` do script (apenas para propriedades únicas).
`button-label`	Não	"Pesquisar"	O texto exibido no botão de busca (p.ex., “Verificar Disponibilidade”, “Pesquisar Quartos”).
`layout`	Não	"horizontal"	Layout da barra de datas: `horizontal` (datas e botão em uma linha) ou `vertical` (empilhados).
`open-in-new-tab`	Não	"false"	Se o Motor de Reservas deve abrir em uma nova guia. Use `"true"` ou `"false"` como string.
`lang`	Não	Padrão da Propriedade	Código de idioma para a interface (p.ex., en, es).
`currency`	Não	Padrão da Propriedade	Código da moeda para as tarifas exibidas (p.ex., `usd`, `eur`).
`class-name`	Não	—	Nome de classe CSS aplicado ao componente para estilização personalizada.
`custom-url`	Não	—	URL para redirecionar após a seleção da data, em vez do Motor de Reservas. Recebe `checkin`, `checkout`, `widget_source`, `promo` e parâmetros de análise como parâmetros de consulta.

O que o componente gera

Ao carregar a página: Uma barra de datas com campos de check-in e check-out e um botão de busca (horizontal ou vertical, conforme o layout). Tocar/clicar em um campo de data abre um popover com o calendário.
Na janela que se abrir, o hóspede seleciona as datas de check-in e check-out. O calendário mostra a disponibilidade ao nível da propriedade e quaisquer restrições ou tarifas que a propriedade tenha ativado.
Ao buscar (clique no botão): O hóspede é redirecionado (na mesma aba ou em uma nova aba, dependendo do open-in-new-tab) para o Motor de Reservas com:
- A data de check-in selecionada.
- A data de check-out selecionada.
- Idioma e outros parâmetros de consulta (p.ex., promo, análise).

Se você definir o custom-url, os mesmos parâmetros de consulta (checkin, checkout, widget_source, promo, análise) serão adicionados a essa URL para que sua página possa continuar o fluxo.

Encontrando o código da sua propriedade

O código da sua propriedade é o identificador único na URL do seu motor de reservas. Você pode encontrá-lo nas configurações do seu PMS, na guia Resumo da seção Motor de Reservas:

Fluxo do Usuário

O hóspede vê a barra de datas (check-in, check-out, botão de busca) na sua página.
O hóspede clica em um campo de data → Uma janela com o calendário é aberta.
O hóspede seleciona a data de check-in → O calendário destaca as datas de check-out disponíveis.
O hóspede seleciona a data de check-out → O botão de busca fica ativo.
O hóspede clica no botão de busca → Ele é redirecionado para a URL especificada (Immersive Experience ou URL hospedada) no Motor de Reservas com as datas selecionadas, onde escolhe um quarto e finaliza a reserva.

Recursos do Seletor de Datas

A janela do calendário inclui:

Exibição de Disponibilidade: Disponibilidade ao nível da propriedade (combinada entre todos os tipos de acomodação).
Indicadores de restrição: Estadia mínima, Fechado para entrada e outras restrições (quando ativadas nas configurações da sua propriedade).
Exibição da tarifa mais baixa: Menor tarifa disponível por dia (quando ativada nas configurações da sua propriedade).
Reservas para o mesmo dia: Reserva para a data de hoje (quando ativada nas configurações da sua propriedade).
Interface localizada: Etiquetas e mensagens seguem o atributo lang que você definiu.

Configuração da Propriedade

Alguns comportamentos dependem das configurações da sua propriedade no PMS da Cloudbeds. Elas são configuradas no Painel de Controle do Cloudbeds, não via atributos do componente:

Configuração	Efeito
`allowSameDayReservation`	Permite que os hóspedes selecionem o mesmo dia como data de check-in.
`showRestrictionsOnCalendar`	Exibe indicadores de restrições (estadia mínima, fechado à entrada, etc.).
`showLowestRatesOnCalendar`	Mostra a menor tarifa disponível para cada dia.

Exemplos de Uso

Básico (código da propriedade no elemento)

<cb-property-date-picker  
property-code="O2YXd0"
></cb-property-date-picker>

Com atributos opcionais

<cb-property-date-picker  
property-code="O2YXd0"  
button-label="Verificar Disponibilidade"  
layout="vertical"  
lang="pt-br"  
currency="eur"  
class-name="my-date-picker"
></cb-property-date-picker>

Abrir o Motor de Reservas em uma nova aba

<cb-property-date-picker  
property-code="O2YXd0"  
open-in-new-tab="true"
></cb-property-date-picker>

Com uma URL de redirecionamento personalizada

Quando você usa custom-url, o hóspede é direcionado para sua URL após escolher as datas. A URL recebe os parâmetros checkin, checkout, widget_source, promo e de análise para que sua página possa continuar o fluxo de reserva.

<cb-property-date-picker  
property-code="O2YXd0"  
custom-url="https://example.com/booking"
></cb-property-date-picker>

Perguntas Frequentes

O widget de busca suporta filtros por hóspedes (Adultos/Crianças)?

Não. O widget atual não inclui filtros por hóspedes adultos ou crianças. Ele suporta apenas check-in, check-out, código promocional e o botão de Busca.