Este recurso está disponível para propriedades com o Premium Embed Suite que inclui o Immersive Experience 2.0. O MVP (Mínimo Produto Viável) atual — ou seja, o lançamento funcional inicial — redireciona os hóspedes para o Motor de Reservas hospedado. O suporte a redirecionamentos diretos para o Immersive Experience 2.0 está previsto para o início do 1º trimestre de 2026.
Isso oferece uma solução simples para adicionar um botão de Reservar Agora para um quarto específico no seu site - sem precisar reconstruir todo o seu fluxo de reservas.
A Incorporação do Calendário de Acomodações é um componente web imersivo leve que abre um calendário, permite que os hóspedes escolham as datas e os envia diretamente ao seu motor de reservas, com tudo preenchido. Menos complicações, mais reservas. Todo mundo ganha.
O que é isso (e Quando usar)
Use o Calendário de Acomodações quando quiser que os hóspedes reservem um quarto ou uma unidade específica, não apenas “o hotel em geral”. É ideal para:
- Páginas de detalhes do quarto.
- Páginas de listagem de quartos.
- Landing pages de marketing ou de campanhas.
- Páginas promocionais apresentando uma única acomodação.
A Experiência do Hóspede
Veja o fluxo do ponto de vista do hóspede:
- O hóspede clica em Reservar Agora;
- Um calendário aparece em uma janela;
- O hóspede seleciona as datas de check-in e check-out;
- O hóspede clica em Continuar;
- Uma nova guia abre com o seu Motor de Reservas, já preenchido com:
- As datas selecionadas.
- O quarto ou unidade correta.
Pré-requisitos antes de começar
Certifique-se de ter:
- O seu Motor de Reservas da Cloudbeds (Código da Propriedade).
- A ID do Tipo de acomodação/Unidade que você quer reservar (explicado abaixo).
- Acesso para editar o HTML do seu site.
Para encontrar o código da sua propriedade, você pode consultar o link do seu motor de reservas e extrair o identificador único.
Opção 1: ID do Tipo de Acomodação
Use esta opção se quiser que os hóspedes reservem qualquer quarto disponível em uma categoria de acomodação. Para encontrar sua ID da acomodação (rid):
- Vá para Conta
→ Configurações
➜ Propriedade
→ guia Acomodações;
-
Depois, clique no nome da acomodação (tipo de acomodação) que você precisa;
-
Olhe para a barra de endereços do navegador; o número mostrado no final da URL é a ID do tipo de acomodação.
Por exemplo, para a URL https://hotels.cloudbeds.com/connect/100000#/manage/roomTypes/123456 → a ID do Tipo de Acomodação é 123456.
Opção 2: ID da Unidade
Use esta opção se você quiser que os hóspedes reservem um quarto físico específico (unidade), em vez de qualquer quarto dentro de um tipo de acomodação. Para encontrar o seu ID da Unidade:
- Vá para Conta
- Clique em Editar ao lado da unidade de quarto específica;
- Abra as Ferramentas de Desenvolvedor do seu navegador e selecione a guia Rede;
- Nas requisições de Rede, localize a chamada de API [find_one];
- No payload da resposta, localize o campo rotulado como "id" — este valor é a ID da Unidade que você deverá utilizar.
Passo 1: Adicione o Script da Cloudbeds
Adicione o seguinte script dentro do <head> do seu site:
<script
src="https://hotels.cloudbeds.com/cb-immersive-experience.js"
data-environment="prod"
data-property-code="YOUR_PROPERTY_CODE"
data-island="YOUR_ISLAND"
></script>Passo 2: Adicione o botão do Seletor de Datas
Coloque esta tag onde você quiser que o botão de Reservar Agora apareça:
<cb-accommodation-date-picker
property-code="YOUR_PROPERTY_CODE"
rid="YOUR_ROOM_ID"
></cb-accommodation-date-picker>Depois de adicionado, o botão será exibido automaticamente.
Personalização Opcional
Você pode ajustar o botão e a interface usando estes atributos opcionais:
| Atributo | O que faz |
| button-label | Altera o texto do botão (padrão é “Reservar Agora”) |
| lang | Define o idioma para o calendário e as etiquetas |
| currency | Substitui a moeda padrão da propriedade |
| class-name | Adiciona uma classe CSS personalizada para estilização |
Exemplo:
<cb-accommodation-date-picker
property-code="YOUR_PROPERTY_CODE"
rid="YOUR_ROOM_ID"
button-label="Reserve Este Quarto"
lang="pt-br"
></cb-accommodation-date-picker>Recursos do Calendário que os hóspedes verão
Dependendo das configurações da sua propriedade, o calendário pode exibir:
- Restrições de reserva (estadia mínima, datas fechadas, etc.).
- Tarifa mais baixa disponível por dia.
- Check-in no mesmo dia (se ativado).
- Idioma e formatação totalmente localizados.
Tudo isso é extraído diretamente da sua configuração do sistema da Cloudbeds — sem necessidade de configuração adicional.
Configurações da propriedade que afetam o comportamento
Esses recursos são controlados no PMS da Cloudbeds:
- Reservas para o mesmo dia – Permite reservar para o mesmo dia.
- Indicadores de restrição – Mostra regras de reserva no calendário.
- Exibição das tarifas mais baixas – Mostra a tarifa disponível mais barata por dia.
Se algo não estiver aparecendo, o primeiro passo é verificar as configurações do PMS da Cloudbeds.
Comentários
Por favor, entre para comentar.