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
- Acesse sua organização (conta do grupo) usando a URL do portal do grupo: SUAURL.cloudbeds.com/login;
- Clique no nome da organização;
- 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
- 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>
<script type="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>
<script type="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>
Comentários
Por favor, entre para comentar.