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 personalizar o Motor de Reservas de Grupos
- Clique em seu nome de usuário no canto superior direito;
- Selecione Configurações;
- 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.
- Clique em Propriedades;
- Substitua o hiperlink da URL externa;
- Clique em Salvar.
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.
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.
- Abra o Google Maps;
- Encontre a localização da sua propriedade;
- Clique em Compartilhar;
- Clique em Incorporar um mapa;
- 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>
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 > Configurações
> Propriedade
> 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.
Comentários
Por favor, entre para comentar.