Immersive Experience 2.0 no Motor de Reservas da Cloudbeds - Tudo o que você precisa saber

Gabriela Garcia

Atualizado 2 de janeiro de 2026 12:56

Visão Geral

O Immersive Experience 2.0 no Motor de Reservas da Cloudbeds é uma moderna solução de reserva totalmente baseada na internet que oferece uma experiência de reserva descomplicada e amigável para os hóspedes diretamente no site da sua propriedade. Ele facilita pagamentos seguros em conformidade com a PCI e incorpora o rastreamento de dados de compatibilidade do Google para obter informações desde a visualização da página até a compra.

Como um componente com base na internet, o Immersive Experience 2.0 elimina a necessidade de listas de permissões ou processos de mascaramento complexos. Em vez disso, simplifica a integração por meio de uma incorporação simples que se integra perfeitamente ao site da sua propriedade, mantendo tanto a consistência de design quanto a facilidade de implementação.

Uma experiência de reserva aprimorada

O Immersive Experience 2.0 introduz recursos exclusivos desenvolvidos para elevar a experiência de reserva de seus hóspedes em seu próprio site:

Índices de conversão mais altos: menos cliques, tempos de carregamento mais rápidos e uma experiência de marca coesa geram mais reservas.
Mais personalização: crie uma experiência única e memorável para os hóspedes sem as restrições de um iframe padrão.
Crescimento orientado por dados: acesse as principais métricas e informações para otimizar seu processo de reserva e aumentar as reservas diretas.
Confiança aumentada: o fluxo de reserva seguro e descomplicado aumenta a confiança dos hóspedes, encorajando-os a concluir o processo de reserva.

Componentes baseados na web vs. baseados em iframe

Em contraste com sistemas baseados em iframe, este componente integrado baseado na web oferece:

Mais rapidez no carregamento do site
Personalização de marca aprimorada
Um fluxo de reserva unificado que garante que os hóspedes permaneçam no site desde a busca inicial até a conclusão do pagamento

Qual é a aparência?

O Immersive Experience 2.0 oferece duas opções de incorporação flexíveis para se adequar ao design do site da sua propriedade e ao fluxo do usuário. Você pode escolher incorporar uma página inteira do Immersive Experience ou criar e incorporar uma janela do Immersive Experience.

A incorporação de página inteira funciona exatamente como parece - ela coloca o motor de reservas diretamente dentro de uma página do seu site, proporcionando aos hóspedes uma jornada de reserva ininterrupta e totalmente imersiva do início ao fim.

A janela incorporada oferece uma alternativa elegante e moderna. Quando um hóspede clica no botão “Reservar agora”, um painel lateral desliza suavemente a partir da borda da tela, oferecendo uma experiência de reserva compacta, mas totalmente funcional, sem sair da página atual.

O fluxo de reserva inclui:

Busca de Disponibilidade
Seleção de quarto
Exibição de tarifa
Oportunidades de Upsell
Entrada de informações do hóspede
Processamento seguro de pagamento

Preços e disponibilidade

O Motor de Reservas Plus da Cloudbeds está incluído em todas as assinaturas da Cloudbeds, sem custo adicional, para as propriedades incluídas em nossa primeira fase de lançamento. O Immersive Experience 2.0 utiliza o mesmo fluxo de reservas, mas oferece uma maneira aprimorada de integrá-lo diretamente ao seu site.

Se o Immersive Experience 2.0 tiver uma taxa adicional depende da sua assinatura e do programa de migração atual:

Durante a transição para longe dos iframes antigos e do Immersive 1.0, muitas propriedades podem ter o Immersive Experience 2.0 habilitado, sem custo extra, como parte da atualização.
Fora desses programas, o Immersive Experience 2.0 pode ser oferecido como módulo adicional cobrado, aplicado à fatura regular da propriedade na Cloudbeds.

A Cloudbeds fornecerá comunicação clara e antecipada sobre quaisquer futuras atualizações de preços antes que as alterações entrem em vigor.

Observação: Qualquer valor mostrado como {PARAMETER} neste artigo é um espaço reservado. Substitua-o pelo seu valor real e remova as chaves ({ })

IImportante:

O Immersive Experience foi testado com sites personalizados. Sites baseados em modelos ou sem código criados usando plataformas de construtores de sites podem lidar com scripts personalizados de maneira diferente, o que pode impactar a funcionalidade.
Não use tags de componentes web do Immersive Experience 2.0 dentro de Iframes.
- Essa configuração pode causar problemas de rolagem e exigiria a inclusão de cada item na cadeia de iframes - uma configuração que não é recomendada.
Uma lista de práticas recomendadas quando um usuário utiliza um CMP:
- Adicione o Immersive Experience no início do head antes da tag CMP, e inclua o atributo que impede que seja bloqueada. É melhor não especificar tudo na documentação, mas eles podem ser diferentes dependendo da plataforma
  - Cookiebot: data-cookieconsent="ignore"
  - OneTrust: data-ignore-consent="true"
  - Quantcast:data-quantcast-ignore="true"
- Classifique o script abaixo como Necessário no painel de administração do CMP; novamente, pode ser diferente em cada plataforma:
```
<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>
```

Como instalar o Immersive Experience 2.0

Para ativar o Immersive Experience 2.0 no site da sua propriedade, siga as etapas abaixo.

Etapa 1 – Ativar domínios permitidos

Para iniciar a instalação do Immersive Experience 2.0 e maximizar sua experiência de reserva, acesse Domínios Permitidos nas configurações do Widget do Site. Se a opção não estiver disponível, entre em contato com nossa Equipe de Suporte para ativá-la.
Se você é cliente do Cloudbeds Websites, pode entrar em contato com a equipe do Cloudbeds Websites para obter orientações sobre solicitações de implementação e ativação.

Etapa 2 – Coloque seu domínio na lista de permissões

Assim que nossa equipe de suporte habilitar as configurações adequadas, você verá a seção Domínios permitidos no seu PMS.

Do menu de sua Conta, clique em Configurações;
Clique em Motor de Reservas ;
Acesse Widgets do site e, na seção Domínios permitidos, adicione o(s) domínio(s) onde você instalará o Immersive Experience. Você pode adicionar até 5 domínios.

São suportados tanto domínios primários como subdomínios (p.ex, my-hotel.com e booking.my-hotel.com).

Lista de domínios permitidos: como verificar o formato correto do domínio

Às vezes, o domínio de um site pode ser configurado de forma a exigir a inclusão do “www”. Para cobrir ambas as possibilidades, recomendamos fazer um teste simples.

Verifique a barra de URL: abra seu site e observe a URL no navegador.
Inclui www? Por exemplo, mostra https://www.yourdomain.com ou apenas https://yourdomain.com?

Depois de saber qual formato o seu site usa, você pode inserir o domínio correto no campo da lista de permissões do PMS da Cloudbeds. Por exemplo, se o seu site é exibido com www, você deve colocar o seu domínio na lista de permissões como www.yourdomain.com.

Por que os domínios devem ser incluídos na lista de permissões

O Immersive Experience é um componente web (não um iframe). Ele é executado no seu site e faz solicitações de API aos serviços da Cloudbeds a partir do seu domínio. A lista de permissões informa à Cloudbeds quais origens estão autorizadas para que essas solicitações entre domínios sejam aceitas.

Etapa 3 – Adicione o script do Immersive Experience

Adicione o seguinte script no elemento <head> do documento HTML do seu site:

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

Observação: O data-cookieconsent varia e será necessário apenas se você usar um CMP (integração de conformidade de cookies) em seu site. Se você usar um CMP, precisará verificar se o atributo (ou seja, "data-cookieconsent=ignore") está ajustado para atender às configurações de atributo do seu CMP específico.

Etapa 4 – Incorporar o motor de reservas

Você pode apresentar o Immersive Experience de duas maneiras:

Modo padrão (incorporação em página inteira): também conhecido como “incorporação em página inteira”, este é o modo padrão em que o aplicativo do Motor de Reservas está totalmente integrado ao site. Para incorporá-lo, inclua o seguinte trecho no HTML onde ele deve ser apresentado:

<cb-immersive-experience mode="standard" property-code="{PROPERTY_CODE}" />

Modo de janela pop-up (botão de Reservar agora): este modo exibe o aplicativo do Motor de Reservas como uma janela pop-up com uma posição fixa e sobreposição. Para adicionar um botão de Reservar agora que abre o Immersive Experience em uma janela pop-up:

<cb-book-now-button property-code="{PROPERTY_CODE}" />

Se você omitir o atributo de modo, o componente assumirá o padrão.

Encontre o código da sua propriedade

Vá para o menu da Conta > Configurações > Motor de Reservas > guia de Resumo. Seu código é o valor alfanumérico de 6 caracteres no final do link do Motor de Reservas:

https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}

No exemplo abaixo, o segmento destacado é o Código da Propriedade que você deve usar na sua incorporação (substitua as chaves e o valor no seu snippet).

Considerações sobre a configuração e comportamento

As seções abaixo destacam detalhes de comportamento e implementação que são úteis saber antes de entrar em operação.

Compatibilidade com criadores de sites

O Immersive Experience foi testado com sites personalizados. Os criadores de sites com modelos/sem código podem lidar com scripts personalizados de maneira diferente, o que pode afetar a funcionalidade.

✔️ Injeção no cabeçalho: Confirma se você pode adicionar o Immersive Experience <script> na página <head>.

✔️ Lista de permissões: Certifique-se de que seus domínios ativos (e quaisquer domínios de teste/visualização) sejam adicionados em Domínios permitidos para que as solicitações de API sejam aceitas (até 5 domínios).

✔️ CSS/JS personalizado: Os estilos ou scripts adicionados na seção de personalização do Motor de Reservas não se aplicam automaticamente ao Immersive Experience; adicione-os ao HTML do seu site.

✔️ Página de pagamento: A etapa de pagamento pode variar dependendo da forma de pagamento selecionada.

⮕ Se o hóspede escolher Apple Pay, Google Pay ou outra opção de pagamento de terceiros, ele será redirecionado para a respectiva página de terceiros para concluir o pagamento.

⮕ Uma vez que a transação for bem-sucedida, eles serão redirecionados de volta para a página de confirmação do Immersive Experience.

✔️ Links profundos/parâmetros: Os parâmetros de pesquisa são lidos apenas no carregamento inicial. Se você alterar a URL após o carregamento do aplicativo, recarregue a página para aplicá-los.

Portais

O Motor de Reservas apresenta vários elementos numa posição fixa na tela, por exemplo:

Janela restrita
Dicas de ferramentas
Calendário
Verificador de tarifas
Faixa do carrinho de compras (no celular)
Seletores de idioma e moeda

Esses elementos são processados dentro de um Portal, o que significa que, em vez de seguirem a estrutura da árvore DOM, eles são envolvidos por um elemento com a classe estática .cb-portal e anexados ao final do corpo. Os portais têm valores de z-index diferentes de acordo com a camada correspondente em nosso contexto de empilhamento.

A maioria dos sites possui contextos de empilhamento próprios e, dependendo de como são definidos no eixo z imaginário, podem ou não entrar em conflito com os contextos de empilhamento do Immersive Experience.

Por exemplo, se não estiverem definidos corretamente, o Verificador de Tarifas do Immersive Experience poderá ser exibido na parte superior do menu de navegação do celular que pertence ao site da propriedade, ou um elemento flutuante no site da propriedade poderá ser exibido na parte superior do botão “Reservar agora” na faixa do carrinho de compras no celular, bloqueando-o e, portanto, impedindo o usuário de continuar com o processo de reserva.

No momento, temos quatro tipos de portais:janela restrita, janela emergente, fixo e dica de ferramenta. O tipo de portal usado em cada caso depende do tipo de elemento para o qual o portal é destinado. Portanto, todos as janelas restritas usarão um portal de janela restrita, a janela emergente do Calendário e os seletores de Idioma e Moeda usarão um portal de janela emergente, enquanto a faixa do Carrinho de compras no celular e o Verificador de tarifas usarão um portalfixo, para dar alguns exemplos.

Dependendo do tipo de portal, estes são os valores que o Immersive Experience usa para o z-index no CSS da propriedade:

Janela restrita:1400
Janela emergente:1500
Fixo:1100
Dica de ferramenta:1800

Resolução de problemas de sobreposição

Ao enfrentar problemas com elementos processados pelo Immersive Experience que estão sobrepondo outros elementos do site principal, recomendamos procurar o Portal (elemento com a classe estática .cb-portal) que o contém e ajustar o valor z-index de acordo, ou ajustar o valor z-index do elemento do site principal.

Os valores do z-index para os diferentes tipos de portais processados pelo Immersive Experience poderão ser personalizados simplesmente redefinindo as variáveis CSS utilizadas para esse fim, conforme mostrado no exemplo abaixo:

<style>
/* Scope to the Booking Engine root when overriding */
.cb-bookingengine-root {
--booking-engine-zIndices-sticky: 1100;
--booking-engine-zIndices-modal: 1400;
--booking-engine-zIndices-popover: 1500;
--booking-engine-zIndices-tooltip: 1800;
}
</style>

O Verificador de Tarifas está incluído em todos os pacotes do Motor de Reservas da Cloudbeds, exceto nos planos Antigos (Legacy). As propriedades com pacotes ativos podem ativá-lo sem custo adicional.

Parâmetros de pesquisa

O Immersive Experience suporta os mesmos parâmetros de pesquisa que a versão hospedada. Os parâmetros são lidos apenas no carregamento inicial e não são atualizados dinamicamente.

Nome	Tipo	Descrição	Exemplo
adults	Número	O número de adultos para a reserva, utilizado na pesquisa de acomodações disponíveis.	adults=2
allotment_block_code	Sequência	O código do bloqueio de alocação a ser usado ao buscar acomodações para as datas selecionadas.	allotment_block_code=b123456
checkin	AAAA-MM-DD	A data selecionada para o check-in.	checkin=2025-12-01
checkout	AAAA-MM-DD	A data selecionada para o check-out. Se o check-in for fornecido, mas o check-out não, o padrão será o dia seguinte.	checkout=2025-12-01
currency	Código ISO-4217 de 3 letras para moedas	Moeda selecionada. Se nenhuma for fornecida, o Motor de Reservas utiliza a moeda padrão da propriedade.	currency=brl
kids	Número	O número de crianças para a reserva, utilizado na pesquisa de acomodações disponíveis.	kids=1
promo	Sequência	Código promocional a utilizar ao pesquisar acomodações para as datas selecionadas.	promo=superpromo
rate_plan	Sequência separada por ponto e vírgula	Para filtrar os resultados de acomodações com base nos planos tarifários, corresponde ao “Nome do plano tarifário privado” no PMS.	rate_plan=3DAYSTAY;LOWSEASON
rid	Sequência numérica separada por ponto e vírgula	Lista de IDs de quartos para filtrar os resultados de acomodações.	rid=27434;23421
room_type	Sequência de três letras separadas por ponto e vírgula	Corresponde à “Abreviação da acomodação” no PMS e é usado para filtrar os resultados da acomodação. Se nenhum check-in e checkout forem fornecidos, o Motor de Reservas seleciona automaticamente o dia seguinte e o dia seguinte.	room_type=PRI;SHA
utm_source	Sequência	Usado para saber a origem da campanha de marketing ( p. ex.: Google, TripAdvisor, Trivago)	utm_source=Google

Rastreamento e Análise

O Immersive Experience suporta os mesmos parâmetros de pesquisa que a versão hospedada. Os parâmetros são lidos a partir da localização da janela apenas no carregamento inicial do aplicativo, o que significa que alterações dinâmicas nos parâmetros de pesquisa não terão qualquer impacto no Immersive Experience depois de carregado.

Além disso, o Immersive Experience não atualiza a URL da janela como a versão hospedada faz após determinadas ações do usuário (por exemplo, selecionar datas de check-in e check-out).

Google Analytics 4 / GTM: A ID do Google Tag ou a ID do GTM Container devem ser inicializadas no site do hotel.
Google Ads: O acompanhamento de conversões requer configuração manual no site da propriedade.
Meta Pixel: O script do Meta Pixel deve ser adicionado no <head> do HTML para inicialização.

Para obter detalhes adicionais sobre a configuração, consulte a documentação de cada plataforma de rastreamento.

Adicione manualmente os scripts do Google Tag Manager (GTM) ou do Google Analytics 4 (GA4) ao <head> do seu HTML para ativar o rastreamento.

Parâmetros de pesquisa do Google Hotel Ads

Esses parâmetros são agregados pelo Google Hotel Ads e o motor de reservas os envia ao servidor na solicitação ao fazer uma reserva:

Parâmetros

gha_advance_booking_window

gha_campaign_id

gha_google_site

gha_is_ad_click

gha_is_click_type_hotel

gha_is_click_type_room

gha_is_hotel_campaign

gha_is_promoted

gha_length

gha_payment_id

gha_price_displayed_total

gha_promo_code

gha_user_country

gha_user_currency

gha_user_device

gha_user_language

gha_user_list_id

Personalização: Atributos, Parâmetros de URL e Estilo

Personalize o Immersive Experience usando atributos de componentes, além do seu próprio CSS/JS no seu site.

Os códigos personalizados podem necessitar de manutenção ao longo do tempo.

À medida que o motor de reservas evolui, as personalizações aplicadas pelo próprio utilizador podem deixar de funcionar ou necessitar de atualizações.
Sempre que possível, teste as alterações em uma versão preliminar ou cópia do seu site antes de publicá-las.

Atributos dos componentes para cb-immersive-experience e cb-book-now-button

Esses atributos são compartilhados pelos modos Padrão e Janela Pop-up. (confira Incorporar o motor de reservas).

Os seguintes atributos são todos opcionais (exceto o código da propriedade) e os componentes web cb-immersive-experience e cb-book-now-button são compatíveis com eles.

Nome	Tipo	Necessário	Valor padrão	Descrição
*currency ()**	Código ISO-4217 de 3 letras para moedas	Não	Moeda padrão da propriedade	A moeda a ser utilizada para o carregamento inicial do Immersive Experience.
disable-css-title-reset	sim \| não	Não	não	sim deve ser usado se a propriedade quiser definir seus próprios conjuntos de regras CSS para títulos na interface do usuário (h1… h6).
hide-custom-header	sim \| não	Não	não	Para ocultar o cabeçalho personalizado definido no PMS.
hide-custom-footer	sim \| não	Não	não	Para ocultar o rodapé personalizado definido no PMS.
hide-property-info	sim \| não	Não	não	Para ocultar a seção Informações da propriedade em todas as páginas.
*ignore-search-params ()**	sim \| não	Não	não	O Immersive Experience lê por padrão os parâmetros de consulta na URL do site hospedeiro e os utiliza no carregamento inicial do aplicativo. Ele suporta os mesmos parâmetros que o Motor de Reservas hospedado.
*lang ()**	*detecção automática* \| Código de idioma de 2 letras *ISO 639-1*	Não	Idioma padrão da propriedade.	O idioma a ser usado no carregamento inicial do Immersive Experience. Se nenhum for fornecido, o Immersive Experience verificará o atributo lang do HTML. Se ele também não estiver definido, será usado o idioma padrão da propriedade. Se o valor de detecção automática for fornecido, o Immersive Experience será carregado no idioma do navegador do usuário.
mode	*padrão* \| *janela pop-up*	Não	padrão	O modo em que o Immersive Experience deve ser processado. Uma janela *pop-up* deve ser usada quando o Immersive Experience é processado dentro de um contêiner com altura fixa ou altura máxima.
*property-code ()**	Código alfanumérico de 6 dígitos que identifica sua propriedade.	Sim	—	O código alfanumérico de 6 dígitos que representa a propriedade. É o mesmo código da URL do Motor de Reservas: https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}.

Os atributos marcados para o carregamento inicial são lidos apenas uma vez quando o aplicativo é iniciado. Alterá-los posteriormente em sua propriedade não afetará uma experiência imersiva já carregada.

Atributos personalizados do botão de Reservar agora

Essas opções se aplicam ao componente cb-book-now-button (confira a seção Incorporar o motor de reservas ) e permitem que você defina o estilo do botão e controle o rótulo e as dimensões da janela pop-up.

Atributo	Descrição
class-name	Classe CSS para estilizar o botão.
close-label	Rótulo personalizado para o botão de Fechar.
height	Altura da janela pop-up.
width	Largura da janela pop-up.

Exemplo do botão de Reservar agora com rótulo, tamanho e classe CSS:

<cb-book-now-button
property-code="{PROPERTY_CODE}"
class-name="cb-book-now-button"
label="Book Now"
height="90vh"
width="90vw"
/>

Adicione código CSS e JavaScript personalizados para o Immersive Experience

O código CSS ou JavaScript personalizado adicionado nos campos de personalização do Motor de Reservas não se aplica automaticamente ao Immersive Experience. Estes devem ser adicionados manualmente ao documento HTML.

Adicione o atributo data-cb-immersive-experience-root às tags de estilo e script para evitar conflitos.

Exemplo de código CSS personalizado:

<style data-cb-immersive-experience-root>
:is(#cb-bookingengine, .cb-bookingengine-root) {
h1 {
font-family: serif;
font-size: 24px;
}
}
</style>