Exemplos de meta tags customizadas para mygroup

Seguir

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:

  1. Clique no seu nome de usuário no canto superior direito
  2. Selecione "Settings" (configurações)
  3. 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
DEMO - Mygroups - 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>
DEMO - Mygroups - Google Chrome
DEMO - Mygroups - Google Chrome
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>
Mygroup Custom Meta Tag, CSS, and HTML Examples – myfrontdesk - Google Chrome
DEMO - Mygroups - Google Chrome
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>
DEMO - Mygroups - Google Chrome
DEMO - Mygroups - Google Chrome

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>
Mygroup Custom Meta Tag, CSS, and HTML Examples – myfrontdesk - Google Chrome
DEMO - Mygroups - Google Chrome
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>
DEMO - Mygroups - Google Chrome
DEMO - Mygroups - Google Chrome
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>
DEMO - Mygroups - Google Chrome
DEMO - Mygroups - Google Chrome

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

  1. Clique em "Properties" (propriedades)
  2. Substitua a URL externa
  3. 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>
Slack | Saurabh Satralkar | Cloudbeds | 38 new items
Powered by Zendesk