Exemplos de meta tags customizadas para mygroup

Juss Reyes

Atualizado 29 de dezembro de 2020 21:37

O motor de reservas mygroup oferece uma grande variedade de opções de customização para quem tem conhecimento de HTML/CSS ou trabalha com um web designer.

A Cloudbeds não oferece serviços de desenvolvimento web e nem consultoria, mas se você quiser aprender mais sobre o assunto, aqui vão algumas dicas para começar:

Começando

Faça o login na sua conta do mygroup:

Clique no seu nome de usuário no canto superior direito
Selecione "Settings" (configurações)
Clique em "Customize Booking Engine" (customizar o motor de reservas)

Você pode usar a caixa de meta tags personalizadas na seção "Customize booking engine/Customizar o motor de reservas" para adicionar códigos CSS, javascript e outros na seção de cabeçalho ou rodapé do HTML do seu site mygroup.

Não insira texto normal/simples aqui. Caso contrário, isso pode causar problemas no layout da página.

Exemplos de meta tags customizadas

Abaixo, mostramos alguns exemplos CSS customizados. Você precisará mudar os valores no código de acordo com as suas necessidades. As cores podem ser alteradas usando um código hex HTML. Link para uma ferramenta de cores HTML aqui.

Observação: Todos os códigos devem ser inseridos entre <style> código </style> conforme mostramos abaixo:

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

Códigos para o campo "a partir de"

Cor da etiqueta "a partir de" quando passar o mouse

Substitua o código da cor #008000 por qualquer outro e adicione o código na seção Custom header for your hotel booking page (Cabeçalho customizado para a página de reservas do seu hotel):

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

Mygroup Custom Meta Tag, CSS, and HTML Examples – myfrontdesk - Google Chrome

Códigos para o campo "Indisponível"

Cor da etiqueta de "Indisponível" quando você passa o mouse

Mude a cor da etiqueta desse campo quando você passa o mouse. Substitua o código da cor #008000 por qualquer outro e adicione o código na seção Custom header for your hotel booking page (Cabeçalho customizado para a página de reservas do seu hotel):

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

Cor do fundo

Substitua o código #aaa por qualquer outro e adicione o código na seção Custom header for your hotel booking page (Cabeçalho customizado para a página de reservas do seu hotel):

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

Mudar a palavra "Indisponível"

Substitua a frase "INSIRA AQUI SEU TEXTO" pelo que preferir e cole o código abaixo na seção "Custom Meta Tags" (Meta Tags customizadas):

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

Códigos para o botão "pesquisar"

Cor do fundo

Substitua o código #fff por qualquer outro e adicione o código na seção Custom header for your hotel booking page (Cabeçalho customizado para a página de reservas do seu hotel):

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

Cor do fundo - quando passar o mouse

Mude a cor do botão quando passar o mouse por cima dele. Substitua o código #000 por qual preferir.adicione o código na seção Custom header for your hotel booking page (Cabeçalho customizado para a página de reservas do seu hotel):

<style>

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

Cor do texto "pesquisar"

Mude a cor da fonte para qual preferir. Substitua o código #fff por qualquer outro:

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

Botão "Go"

Mudando a landing page

Por padrão, clicar no botão "Go" te levará à página mybookings da propriedade que você selecionou.

Mude a landing page para o seu próprio site ou qualquer outro inserindo a URL da página no campo "Promotion Code / External URL" (Código promocional/URL externa) dentro da aba "Properties" no mygroups

Clique em "Properties" (propriedades)
Substitua a URL externa
Clique para Salvar

Exemplo:

Também é possível inserir o código promocional do seu plano tarifário para redirecionar o seu hóspede para a página do mybookings com o plano tarifário correspondente já exibido.

Exemplo:

Substituir imagens pré-definidas

Substituir o mapa padrão pelo Mapa do Google

Insira o código abaixo na senão "Custom Meta Tags" e substitua a frase em vermelho pela URL do seu mapa do Google.

<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', '<iframe src="Insira aqui a URL do seu mapa do Google" width="300" height="200">');
}, 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="Insira aqui a URL do seu mapa do Google" width="100%" height="274">');
}, false);
</script>