O <cb-multi-property-date-picker> é um componente web para propriedades que pertencem à mesma Organização na plataforma da Cloudbeds. Ele exibe um menu para seleção de propriedade, campos de seletor de datas e um botão de busca. Os hóspedes selecionam uma propriedade, escolhem as datas de check-in e check-out e clicam em buscar para continuar para o Motor de Reservas ou para uma URL personalizada dessa propriedade.
Este componente requer o atributo sub-domain. O valor deve ser o subdomínio da sua Organização na plataforma da Cloudbeds, não o domínio do site da sua propriedade nem a URL individual do Motor de Reservas da propriedade.
Visão geral
O modo multi-propriedades é para sites que precisam exibir um seletor de datas para várias propriedades dentro de uma mesma Organização na plataforma da Cloudbeds, como uma marca, grupo ou coleção de propriedades. 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 para o fluxo de reservas da propriedade escolhida.
- Qualquer página onde o hóspede deve primeiro selecionar uma propriedade e depois escolher as datas.
O componente carrega a lista de propriedades da organização, exibe um menu pesquisável e, após o hóspede selecionar uma propriedade e as datas, redireciona para o Motor de Reservas do Immersive Experience (ou uma URL personalizada) dessa propriedade.
Antes de começar
Antes de instalar o Seletor de Datas Multi-propriedade, confirme o seguinte:
- Suas propriedades pertencem à mesma Organização na plataforma da Cloudbeds.
- Você possui o subdomínio da Organização para a URL do Motor de Reservas do seu grupo.
- Seu papel de usuário inclui Permissões do Motor de Reservas para acessar e gerenciar as configurações do Motor de Reservas.
- Seu pacote inclui acesso às Incorporações Premium (Premium Embeds), ou sua propriedade já tem as Incorporações Premium ativadas.
Dica: Se você vir a opção de Falar com a equipe de vendas na seção de Incorporações Premium, seu pacote pode incluir apenas as Incorporações Básicas (Basic Embeds). Use a opção mostrada no sistema da Cloudbeds para entrar em contato com as Vendas sobre o acesso às Incorporações Premium.
Importante: Se suas propriedades possuem apenas links separados do Motor de Reservas, como hotels.cloudbeds.com/reservation/CÓDIGOPROPRIEDADE, elas ainda não estão usando um Motor de Reservas para Grupos.
Para usar o Seletor de Datas Multi-propriedade, as propriedades devem primeiro estar conectadas sob uma Organização na plataforma da Cloudbeds. Entre em contato com o Suporte da Cloudbeds para solicitar uma Organização.
Ao solicitar uma Organização, esteja preparado para fornecer:
- Nome desejado da Organização e subdomínio, por exemplo, mygroup.cloudbeds.com.
- Nome e sobrenome do Proprietário da Organização.
- Endereço de e-mail do Proprietário da Organização.
- Nomes das Propriedades e suas IDs no MFD.
Se você não for o Proprietário registrado de todas as propriedades, o Suporte da Cloudbeds pode solicitar comprovação adicional de titularidade ou autorização por escrito antes de criar a Organização.
Passo 1: Adicionando o script da Cloudbeds
Adicione o seguinte script dentro da tag <head> do seu site:
Observação: Todas as tags de script do passo 1 são as mesmas para o Immersive Experience 2.0 e todos os widgets. Se você já instalou isso para 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 seja executado antes da análise da tag do componente.
Importante: Não use tags de componente web do Immersive Experience 2.0 dentro de iframes.
Configurações com iframe podem causar problemas de exibição, rolagem e desempenho. Use a área de código personalizado ou instalação de script suportada pelo seu site.
Uma lista de práticas recomendadas quando um usuário utiliza uma CMP (Plataforma de Gerenciamento de Consentimento):
- Adicione o Immersive Experience no início do
<head>antes da tag da 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 da CMP; novamente, 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>Passo 2: Adicione o script do Seletor de Datas do calendário
Para o modo multi-propriedades, você deve passar o subdomínio da organização no elemento:
<cb-multi-property-date-picker sub-domain="YOUR_SUB_DOMAIN"></cb-multi-property-date-picker>Com apenas um subdomínio, o componente exibe o botão “Buscar” padrão e utiliza o idioma e a moeda padrão de cada propriedade assim que uma propriedade é selecionada.
Observação: Para o calendário Multi-propriedades, 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 uma 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 | "Pesquisar" | Texto no botão de pesquisa (p.ex., "Verificar Disponibilidade", "Pesquisar 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 estilização personalizada. |
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 propriedade (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. 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 uma nova 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., promoções, análise).
Encontrando o subdomínio da sua organização
O valor do sub-domain é o subdomínio da sua organização. Você pode encontrá-lo na URL do Motor de Reservas do Grupo. É o texto que aparece antes de .cloudbeds.com.
No exemplo abaixo, a URL do Motor de Reservas do Grupo é alona.cloudbeds.com/manage. O subdomínio da organização é alona.
Você deve adicioná-lo ao componente assim:
<cb-multi-property-date-picker sub-domain="alona"></cb-multi-property-date-picker>O subdomínio da organização não é o domínio público do seu site, como www.examplehotel.com, nem é o link do Motor de Reservas de uma propriedade individual, como hotels.cloudbeds.com/reservation/CÓDIGODAPROPRIEDADE.
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) para o Motor de Reservas (ou sua URL) da propriedade selecionada com as datas escolhidas, onde escolhe um quarto e finaliza a reserva.
Recursos para múltiplas propriedades
- Menu de propriedade pesquisável: Os hóspedes podem digitar para filtrar propriedades pelo nome.
-
Ordem personalizada: Use
property-orderpara controlar a ordem das propriedades no menu. -
Nomes personalizados: Use
data-property-name-{code}para exibir nomes amigáveis para cada propriedade. -
URLs personalizadas: Use
data-property-url-{code}para direcionar os hóspedes a URLs diferentes por propriedade. -
Layout:
horizontal(padrão) ouverticalpara combinar com o layout da sua página. - Quando nenhuma propriedade carregar: O componente ainda é exibido; o menu de propriedades fica desabilitado e mostra 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 de propriedades da sua Organização para facilitar o acesso. Até lá, por favor, entre em contato com o suporte, que poderá fornecer a ID da organização imediatamente.
<cb-multi-property-date-picker sub-domain="dcmcu2"></cb-multi-property-date-picker>Com atributos opcionais
<cb-multi-property-date-picker
sub-domain="dcmcu2"
button-label="Verificar Disponibilidade"
layout="vertical"
lang="es"
currency="eur"
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 para as 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 de exibição personalizado por 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="Hotel Centro"
data-property-name-2SI0CT="Resort Praia"
data-property-name-PROP003="Pousada Montanha"
></cb-multi-property-date-picker>URLs personalizadas de redirecionamento
URL de redirecionamento personalizada por propriedade. Use os atributos data-property-url-{code}, onde {code} é o código da propriedade. Quando uma propriedade é selecionada, se ela tiver um atributo correspondente, essa URL será usada para o redirecionamento. Caso contrário, a URL padrão do Motor de Reservas hospedado será usada.
<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>Solução de problemas
Por que o Seletor de Datas para Multi-propriedades não aparece no meu site?
Se o componente não aparecer, verifique o seguinte:
- O script da Cloudbeds está instalado na página ou no
<head>global do seu site. - O componente não está dentro de um iframe.
- O domínio do seu site está adicionado à Lista de permissões na guia Incorporações.
- Suas propriedades pertencem à mesma Organização na plataforma da Cloudbeds.
- O valor do
sub-domaincorresponde ao subdomínio da sua Organização.
Se o seu criador de sites limita scripts personalizados ou componentes web, entre em contato com o provedor ou desenvolvedor do seu site para obter ajuda na colocação do código em uma área de código personalizado suportada.
Comentários
Por favor, entre para comentar.