Immersive Experience 2.0 no Motor de Reservas da Cloudbeds - Configuração e Personalização

Introdução

O Immersive Experience 2.0 do Motor de Reservas da Cloudbeds incorpora a jornada de reserva diretamente no site da sua propriedade, sem usar mascaramento baseado em iframe. Seu site deve estar autorizado por meio de domínios na Lista de permissões, e o script loader suportado deve ser instalado no HTML do site antes que o componente web possa ser exibido.

Use este guia para a implementação em si e para considerações técnicas que podem afetar o fluxo de reservas, incluindo Plataformas de Gerenciamento de Consentimento (CMPs), construtores de sites, rastreamento, parâmetros de busca e personalização de estilo. Para uma visão geral do Motor de Reservas, consulte Motor de Reservas da Cloudbeds: Tudo que você precisa saber.

Conteúdo

• Sobre o Immersive Experience 2.0
• Instalando o Immersive Experience 2.0
• Consentimento de cookies e configuração do CMP
• Considerações de configuração e solução de problemas
• Parâmetros de busca e rastreamento
• Personalizando o Immersive Experience 2.0

Sobre o Immersive Experience 2.0

O Immersive Experience 2.0 do Motor de Reservas da Cloudbeds é um componente baseado na web que permite aos hóspedes buscar disponibilidade, selecionar quartos e tarifas, inserir dados do hóspede e concluir o pagamento diretamente no site da sua propriedade. Ele pode ser implementado como uma experiência em página cheia ou aberto a partir de um botão Reservar Agora.

Principais benefícios

O Immersive Experience 2.0 apresenta recursos únicos projetados para elevar a experiência de reserva dos seus hóspedes no seu próprio site:

• Taxas de conversão mais altas: 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 o hóspede sem as limitações de um iframe padrão.
• Crescimento orientado por dados: Acesse métricas e informações-chave para otimizar seu processo de reserva e aumentar as reservas diretas.
• Maior confiança: O fluxo de reserva seguro e fluido aumenta a confiança do hóspede, incentivando-o 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:

• Tempos de carregamento do site mais rápidos
• Personalização de marca aprimorada
• Fluxo de reserva unificado que garante que os hóspedes permaneçam no site desde a busca inicial até a conclusão do pagamento

Como é a aparência

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

• O embed de página inteira funciona exatamente como o nome indica: ele insere o Motor de Reservas completo diretamente dentro de uma página do seu site, proporcionando aos hóspedes uma jornada de reserva contínua e totalmente imersiva do início ao fim.

O embed de página inteira mantém o hóspede no site da propriedade enquanto ele busca acomodações disponíveis, revisa as tarifas e monta sua reserva.

Durante a finalização da compra, os hóspedes inserem seus dados de contato, informações adicionais opcionais, hóspedes adicionais e preferências de comunicação sem sair do fluxo de reserva incorporado.

Antes de concluir a reserva, os hóspedes podem revisar as políticas de check-in, check-out, cancelamento e outros termos e condições da propriedade.

• A opção de janela incorporada (embed pop-up) 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, porém totalmente funcional, sem que o usuário precise sair da página atual.

Na implementação com janela, o hóspede abre a Experiência Imersiva a partir do botão Reservar Agora da propriedade, enquanto o site original permanece visível atrás do painel de reserva.

O fluxo de reserva inclui:

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

Preço e disponibilidade

O acesso ao Immersive Experience 2.0 depende da sua assinatura Cloudbeds. Se as Incorporações Premium estiverem incluídas no seu pacote, você pode acessar o Immersive Experience 2.0 na seção Premium da guia Incorporações.

Se as Incorporações Premium não estiverem incluídas no seu pacote, a seção Premium pode exibir uma opção Contato com vendas. Clique em Contato com vendas para solicitar mais informações sobre a atualização para um pacote que inclua as Incorporações Premium.

Formas de pagamento personalizadas e suporte a processadores

• Recomendações para suporte a processadores de pagamento: Não recomendamos o uso de processadores de pagamento não suportados no Immersive Experience. Uma vez que os processadores de pagamento não estejam mais em um domínio da Cloudbeds, não temos controle sobre a segurança ou conformidade PCI.
• Limitações atuais: Formas de pagamento personalizadas devem ser usadas apenas em ambientes hospedados neste momento.
• Suporte futuro: A equipe do Cloudbeds Payments está trabalhando para fornecer suporte oficial a esses processadores de pagamento por meio de conexões personalizadas dentro da interface do PMS. Esse recurso está previsto para lançamento em 2026. Os clientes podem esperar detalhes mais específicos sobre o cronograma conforme nos aproximamos da data de entrega.
• Caminho de suporte: Para orientações específicas de implementação ou dúvidas sobre formas de pagamento personalizadas, entre em contato diretamente com nossa equipe do Cloudbeds Payments. Eles gerenciam todo o SDK de pagamentos e estão melhor posicionados para ajudar você.

Instalando o Immersive Experience 2.0

Complete a configuração abaixo para autorizar o domínio do seu site, carregar o script suportado da Immersive Experience e adicionar o componente do Motor de Reservas ao seu site. As etapas se aplicam tanto para a implementação de página completa quanto para o botão Reservar Agora.

Passo 1: Confirme o acesso às Incorporações Premium

Passo 2: Adicione seu domínio à lista de domínios permitidos

Adicione o domínio onde você instalará o Immersive Experience 2.0 na seção Lista de permissões da Incorporação Premium selecionada. Você pode adicionar até 5 domínios.

1. No seu Menu da Conta , selecione Configurações
2. Clique em Motor de Reservas
3. Clique na guia Incorporações.
4. Na seção Premium, selecione a opção Immersive Experience que deseja instalar.
5. No cartão Lista de permissões, clique em Adicionar domínio.
6. Insira o domínio onde o Immersive Experience será instalado e salve suas alterações.

Passo 3: Adicione o script da Experiência Imersiva

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

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

Passo 4: Incorpore o Motor de Reservas

Você pode exibir a Experiência Imersiva de duas formas:

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

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

• Modo popup (botão reservar agora): Este modo exibe o aplicativo do Motor de Reservas como uma janela com posição fixa e sobreposição. Para adicionar um botão Reservar Agora que abre a Experiência Imersiva em uma janela:

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

Consentimento de cookies e configuração do CMP

Se o seu site usa uma Plataforma de Gerenciamento de Consentimento (CMP), configure a Experiência Imersiva para que os recursos necessários da Cloudbeds sejam tratados como essenciais e não sejam bloqueados antes que o fluxo de reservas possa carregar. Siga a configuração específica do provedor abaixo antes de publicar as alterações no site.

Use a configuração específica do provedor que se aplica ao seu CMP:

• Cookiebot: data-cookieconsent="ignore"
• OneTrust: data-ignore-consent="true"
• Quantcast: data-quantcast-ignore="true"
• Termly: Adicione o mapa de bloqueio personalizado abaixo antes do script do Termly, preferencialmente próximo ao início do HTML.

<script data-termly-config>
 window.TERMLY_CUSTOM_BLOCKING_MAP = {
  "cloudbeds.com": "essential",
  "clientstream.launchdarkly.com": "essential",
  "clientsdk.launchdarkly.com": "essential",
  "tile.openstreetmap.org": "essential",
  "tokenex.com": "essential",
  "stripe.com": "essential",
  "stripe.network": "essential",
  "braintreegateway.com": "essential",
  "dlocal.com": "essential",
  "authorize.net": "essential",
  "pagosonline.net": "essential",
  "paypal.com": "essential",
  "adyen.com": "essential"
 };
</script>

Classifique o carregador da Experiência Imersiva como necessário ou essencial na configuração do seu CMP. Use o ponto de entrada atual do carregador abaixo. O uso direto do cb-immersive-experience.js está obsoleto.

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

Considerações sobre a configuração e solução de problemas

As seções abaixo destacam comportamentos e detalhes da implementação que são úteis saber antes de entrar no ar.

<style>
/* Abrangência para a raiz do Motor de Reservas ao sobrescrever */
.cb-bookingengine-root {
  --booking-engine-zIndices-sticky: 1100;
  --booking-engine-zIndices-modal: 1400;
  --booking-engine-zIndices-popover: 1500;
  --booking-engine-zIndices-tooltip: 1800;
}
</style>

Parâmetros de busca e rastreamento

A Experiência Imersiva pode ler os parâmetros de busca suportados quando o aplicativo é carregado pela primeira vez e pode funcionar com ferramentas de análise e publicidade baseadas no site. Use as seções de referência abaixo quando precisar passar valores de busca, configurar o rastreamento ou entender os parâmetros do Google Hotel Ads.

Personalizando o Immersive Experience 2.0

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

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

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

Próximo passo

Após instalar e testar o Immersive Experience 2.0 no seu domínio autorizado, avalie o guia da guia Incorporações do Motor de Reservas da Cloudbeds quando precisar comparar ou configurar outras opções de incorporação.