Calendário para Multipropriedades - Incorporação do Seletor de Datas

Gabriela Garcia

Atualizado 20 de fevereiro de 2026 14:39

O <cb-multi-property-date-picker> é um componente web para múltiplas propriedades em uma organização. Você deve informar um atributo de sub-domain obrigatório. Ele exibe um menu de seleção de propriedades, campos de seleção de datas e um botão de busca. O hóspede escolhe uma propriedade, seleciona as datas de check-in e check-out, clica em buscar e é redirecionado para o Motor de Reservas (ou para a sua URL personalizada) daquela propriedade específica.

Visão Geral

O modo multipropriedades é para integrações que exibem múltiplas propriedades em uma única organização (p.ex., uma marca ou um grupo). Funciona bem em:

Páginas iniciais de organizações ou marcas.
Seções de “Escolha uma propriedade” + busca por datas.
Páginas de destino que listam várias propriedades e direcionam os hóspedes ao fluxo de reservas que escolherem.
Qualquer página em que o hóspede deve primeiro escolher uma propriedade e depois as datas.

O componente carrega a lista de propriedades da organização, exibe um menu de pesquisa e, após o hóspede selecionar uma propriedade e as datas, redireciona para o Immersive Experience do Motor de Reservas (ou para uma URL personalizada) dessa propriedade.

Passo 1: Adicione o Script da Cloudbeds

Adicione o seguinte script dentro do <head> do seu site:

Observação: Todas as tags de script no 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. Ele só precisa ser instalado uma vez no <head> (global) do site.

Carregue o script no <head> ou antes do componente no <body> para que ele execute antes da análise da tag do componente.

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

Passo 2: Adicione o Script do Seletor de Datas do Calendário

Para o modo multipropriedades, você deve passar o subdomínio da organização no elemento:

<cb-multi-property-date-picker sub-domain="SEU_SUB_DOMINIO"></cb-multi-property-date-picker>

Com apenas o subdomínio, o componente exibe o botão “Buscar” padrão e usa o idioma e a moeda padrão de cada propriedade assim que uma propriedade é selecionada.

Observação: Para o calendário de multipropriedades, o idioma selecionado será inglês e a moeda será USD por padrão, a menos que sejam substituídos por parâmetros personalizados, conforme descrito abaixo.

Não existe um atributo global custom-url. URLs personalizadas são definidas por propriedade com data-property-url-{code}. Se uma propriedade não tiver URL personalizada, será usada a URL padrão do Motor de Reservas hospedado.

Atributos

Atributo	Obrigatório	Padrão	Descrição
`sub-domain`	Sim	—	Subdomínio da sua organização. Carrega e lista suas propriedades.
`button-label`	Não	"Buscar"	Texto no botão de busca (p.ex., "Verificar Disponibilidade", "Buscar Quartos").
`layout`	Não	"horizontal"	Layout: `horizontal` (seletor de propriedade, datas e botão em uma linha) ou `vertical` (empilhado).
`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 personalizar o estilo.
`property-order`	Não	—	Ordem das propriedades no menu. Códigos separados por ponto e vírgula, p.ex., `"CODE1;CODE2"`.
`data-property-url-{code}`	Não	—	URL personalizada para a propriedade `{code}`, p.ex., `data-property-url-O2YXd0="https://example.com/downtown"`.
`data-property-name-{code}`	Não	—	Nome de exibição personalizado para a Propriedade `{code}`, p.ex., `data-property-name-O2YXd0="Downtown Hotel"`

O que o componente gera

Ao carregar: Um seletor de propriedades (menu pesquisável), campos de check-in e check-out e um botão de busca (horizontal ou vertical conforme o layout). O menu lista todas as propriedades da organização. Tocar/clicar em um campo de data abre uma janela com o calendário.
Após selecionar uma propriedade: O seletor de datas e o calendário usam as configurações dessa propriedade (disponibilidade, restrições, regras para o mesmo dia, etc.).
Ao buscar (clique no botão): O hóspede é redirecionado (na mesma guia ou em nova guia conforme o open-in-new-tab) para o Motor de Reservas (ou para a URL personalizada) com a propriedade selecionada, check-in, check-out, idioma e outros parâmetros de consulta (p.ex., código promocional, análise).

Encontrando seu Subdomínio

Este é o subdomínio da sua Organização. Você pode encontrá-lo acessando seu CRM ou o motor de reservas do seu grupo. É o nome da sua organização antes de "cloudbeds.com", como mostrado na URL:

Fluxo do Usuário

O hóspede vê o seletor de propriedade, a barra de datas (check-in, check-out) e o botão de busca na sua página.
O hóspede seleciona uma propriedade no menu (ele pode digitar para buscar/filtrar).
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 (na mesma guia ou em uma nova guia) para o Motor de Reservas (ou para sua URL) da propriedade selecionada, com as datas escolhidas, onde escolhe um quarto e finaliza a reserva.

Recursos para Múltiplas Propriedades

Menu pesquisável de propriedades: Os hóspedes podem digitar para filtrar propriedades pelo nome.
Ordem personalizada: Use property-order para controlar a ordem das propriedades no menu.
Nomes personalizados: Use data-property-name-{code} para exibir nomes mais amigáveis para cada propriedade.
URLs personalizadas: Use data-property-url-{code} para direcionar os hóspedes para URLs diferentes por propriedade.
Layout:horizontal (padrão) ou vertical para combinar com o layout da sua página.
Quando nenhuma propriedade carregar: O componente ainda é renderizado; o menu de propriedades fica desabilitado e exibe uma dica de ferramenta ao passar o mouse, com a mensagem “Nenhum dado foi encontrado.”

Exemplos de Uso

Básico (apenas subdomínio da organização)

Este é o subdomínio da sua Organização. Estamos trabalhando ativamente para adicionar esta ID na página da propriedade da sua Organização para facilitar o acesso. Até lá, por favor, entre em contato com o suporte e eles poderão fornecer a ID da organização imediatamente.

<cb-multi-property-date-picker sub-domain="dcmcu2"></cb-property-date-picker>

Com atributos opcionais

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 button-label="Verificar Disponibilidade"  
 layout="vertical"  
 lang="pt-br"  
 currency="brl"  
 class-name="my-multi-date-picker">
</cb-multi-property-date-picker>

Abrir o Motor de Reservas em uma nova guia

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 open-in-new-tab="true"
></cb-multi-property-date-picker>

Ordem personalizada das propriedades

Ordem personalizada das propriedades no menu. Códigos das propriedades separados por ponto e vírgula. As propriedades nesta lista aparecerão primeiro, na ordem especificada. As propriedades restantes serão ordenadas alfabeticamente.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 property-order="2SI0CT;O2YXd0;PROP003"
></cb-multi-property-date-picker>

Nomes personalizados das propriedades

Nome personalizado exibido para cada propriedade. Use os atributos data-property-name-{code}, onde {code} é o código da propriedade. Substitui os nomes padrão das propriedades no menu.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-name-O2YXd0="Downtown Hotel"  
 data-property-name-2SI0CT="Beach Resort"  
 data-property-name-PROP003="Mountain Lodge"
></cb-multi-property-date-picker>

URLs de redirecionamento personalizados

URL de redirecionamento personalizada para cada propriedade. Use os atributos data-property-url-{code}, onde {code} é o código da propriedade. Quando uma propriedade for selecionada, se ela tiver um atributo correspondente, essa URL será usada para o redirecionamento. Caso contrário, será usada a URL padrão do motor de reservas hospedado.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-url-O2YXd0="https://example.com/downtown"  
 data-property-url-2SI0CT="https://example.com/beach"
></cb-multi-property-date-picker>