Como personalizar seu Motor de Reservas para Grupos

O Motor de Reservas para Grupos oferece várias personalizações detalhadas para aqueles que estão familiarizados com HTML/CSS ou empregam um web designer.

Este artigo oferece algumas opções para personalizar o Motor de Reservas de Grupos

  A Cloudbeds não oferece serviços de programação na web ou consultoria, mas se você gostaria de saber mais sobre HTML e CSS, aqui estão alguns ótimos lugares para começar:

Principais ações do motor de reservas para grupos

Como acessar o Motor de Reservas de Grupos

  1. Acesse sua organização (conta do grupo) usando a URL do portal do grupo: SUAURL.cloudbeds.com/login;
  2. Clique no nome da organização;

  1. Os Grupos serão abertos em uma nova página e, na guia do navegador, você pode ver a URL:

Como personalizar o Motor de Reservas de Grupos

  1. Clique em seu nome de usuário no canto superior direito;
  2. Selecione Configurações;
  3. Clique em Personalizar Motor de Reservas.

Use a caixa de meta tags personalizadas na seção Personalizar o Motor de Reservas para adicionar JavaScript, CSS e outros códigos ao cabeçalho ou rodapé do HTML do site de Grupos. Consulte a seção: Exemplos de Meta Tags Personalizadas.

 Todos os campos são destinados a códigos, não a texto simples. Por favor, não insira texto simples aqui, pois pode quebrar a página. Saiba mais sobre cada campo aqui: Onde posso personalizar o Motor de Reservas de Grupos.

Como alterar a página de destino (Código Promocional/URL Externa)

Por padrão, ao clicar no botão SEGUIR irá levá-lo para a página do Motor de Reservas do estabelecimento selecionado.

  1. Clique em Propriedades;
  2. Substitua o hiperlink da URL externa;
  3. Clique em Salvar.

Alterar a página de destino com uma URL externa.gif

Você também pode inserir o seu código promocional do plano tarifário para redirecionar hóspedes para a página do Motor de Reservas, onde o plano tarifário correspondente será exibido.

Inserir o código promocional do plano de tarifas na página de destino.gif

Exemplos de Meta Tags Personalizadas para o Motor de Reservas de Grupos

Abaixo estão alguns exemplos de CSS personalizado. Você precisa alterar os valores no código de acordo com suas necessidades. Você pode alterar a cor usando o código hexadecimal HTML — há um link para uma ferramenta de cores HTML nesta página.

Anotações: Os códigos inseridos devem estar entre <style> e </style> conforme mostrado abaixo:

<style>
.price_box a {background:#aaa}
</style>

Começando a partir de códigos de tag

Cor da tag começando a partir de ao passar o mouse

Substitua o código de cor #008000 por qualquer cor desejada e adicione este código à seção Cabeçalho personalizado para a página de reserva do seu hotel:

<style>
.starting_from i.fa-tag:hover {
color: #008000;
cursor: pointer;
}
</style>

Códigos de tag indisponíveis

Altere a cor da tag quando o mouse passar sobre ela. Substitua o código de cor #008000 por qualquer outra cor e adicione o código na seção Cabeçalho personalizado para a página de reserva do seu hotel:

<style>
.not_available i.fa-tag:hover {
color: #008000;
cursor: pointer;
}
</style>

Altere #aaa para qualquer código de cor desejado. Adicione o seguinte código na seção Cabeçalho personalizado para a página de reserva do seu hotel:

<style>
.not_available {background: #aaa}
</style>

Substitua as palavras 'ADICIONE O TEXTO AQUI' pela palavra desejada no código a seguir e aplique-o na seção Meta Tags personalizadas:

<style>
.price_box .not_available {
font-size: 0;
}
.price_box .not_available:after {
content: "ADICIONE O TEXTO AQUI";
font-size: 10px;
}
</style>

Códigos do botão de pesquisa

Adicione o seguinte código na seção Cabeçalho personalizado para a página de reserva do seu hotel e altere #fff para o código de cor desejado:

<style>
.sidebar_white_box button {
background: #fff none repeat scroll 0 0;
}
</style>

Altere a cor do botão quando o mouse passar sobre ele. Use qualquer código no lugar de #000. Adicione o seguinte código na seção Cabeçalho personalizado para a página de reserva do seu hotel:

<style>
div.sidebar_white_box.form-group button:hover 
{
background: #000;
} </style>

Altere a cor da fonte para qualquer outra cor. Altere #fff para o código de cor desejado:

<style>
div.sidebar_white_box.form-group button
{
color: #fff
}
</style>

Substituição do mapa padrão pelo Google Maps

Passo 1 - Copie o código de localização do Google Maps

  O que você deve saber:

  • Instruções são retiradas da Ajuda do Google Maps.
  • O tráfego e outras informações de mapas podem não estar disponíveis no mapa incorporado.
  1. Abra o Google Maps;
  2. Encontre a localização da sua propriedade;
  3. Clique em Compartilhar;

Botão Compartilhar no Google Maps

Menu de compartilhamento do Google Maps

  1. Clique em Incorporar um mapa;
  2. Clique em Copiar HTML (isso copiará o código inteiro). O código deve começar com <iframe> e terminar com </iframe>.

 O código será gerado no idioma do seu navegador e o mapa será exibido nesse idioma.

Exemplo: O código destacado em vermelho abaixo é o idioma do mapa, Inglês (en). Se necessário, você pode alterá-lo para outros idiomas (p. ex., Espanhol (es), Português (pt), etc.).

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7886.465207518082!2d115.1726561!3d-8.764173!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd244f35b8a5d05%3A0xd42d4da6a44aa938!2sJimbaran%20Beach!5e0!3m2!1sen!2sid!4v1596624024065!5m2!1sen!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Exemplo de código iframe

Passo 2 - Adicione o Código de Personalização no PMS da Cloudbeds

Adicione o seguinte código na seção de Meta Tags Personalizadas. Substitua "Coloque sua URL do Google Maps aqui" pela sua URL do Google Maps do Passo 1.

<style>
#map_canvas, #map_canvas_big
display: none;
}
</style>
<scripttype="text/javascript">
window.addEventListener("load", function(event) {  
//append google maps iframe  
var d1 = document.getElementById('map_canvas');  d1.insertAdjacentHTML('afterend', 'Coloque aqui a sua URL do Google Map
'); }, false);
</script>
<scripttype="text/javascript">
window.addEventListener("load", function(event) {  
//append google maps iframe  
var d1 = document.getElementById('map_canvas_big');  d1.insertAdjacentHTML('afterend', '<iframe src="Coloque aqui a sua URL do Google Map
" width="100%" height="274">'); }, false);
</script>

 

Perguntas Frequentes

De onde vêm as fotos no Motor de Reservas para Grupos?

O Motor de Reservas para Grupos obtém automaticamente as fotos das propriedades a partir da conta da Cloudbeds de cada propriedade.
Estas são as mesmas imagens carregadas em Conta Account menu icon.png > Configurações Settings icon.png > Propriedade Property icon.png > Perfil da propriedade > Fotos da propriedade.

 Dica: Para atualizar ou alterar a foto principal exibida para uma propriedade no Motor de Reservas de Grupos, você deve reordenar ou substituir as fotos na página de Perfil da Propriedade dessa propriedade específica. Consulte, Perfil da propriedade - Tudo o que você precisa saber.

Posso alterar a ordem das propriedades exibidas no Motor de Reservas em Grupo?

No momento, o Motor de Reservas para Grupos não permite alterar a ordem de exibição das propriedades. As propriedades são listadas automaticamente e não há nenhuma configuração disponível para reorganizá-las. Essa limitação foi registrada internamente para melhorias futuras, mas atualmente a ordem não pode ser personalizada.

O motor de reservas para grupos sugere outras propriedades se uma delas não tiver disponibilidade?

Não. O Motor de Reservas para Grupos não recomenda automaticamente propriedades alternativas. Em vez disso, mostra todas as propriedades na conta do grupo para que os hóspedes possam verificar manualmente a disponibilidade noutra propriedade, caso a sua primeira escolha esteja sem vagas.

Esse artigo foi útil?
Usuários que acharam isso útil: 1 de 4

Comentários

0 comentário

Por favor, entre para comentar.