O mybookings oferece várias opções de personalização para quem está familiarizado ou não com HTML / CSS.
Você pode facilmente combinar com o estilo do seu website ou criar seu estilo exclusivo personalizando:
- cabeçalho e rodapé
- imagem de fundo
- esquema de cores,
- fontes,
- adicionar texto e hiperlinks,
- ocultar informações
Se você estiver planejando adicionar fundos/imagens, leia mais informações na seção de perguntas frequentes do tutorial: Motor de reservas mybookings - Visão Geral e Perguntas Frequentes
Essa funcionalidade está disponível para o plano Plus da Cloudbeds ou superior/equivalente.
Importante:
- Este tutorial é fornecido como uma fonte de informações extra para as pessoas que já conhecem HTML e CSS. O código pode se tornar desatualizado e exigir alguma alteração. A nossa Equipe de Suporte pode auxiliá-lo APENAS no uso dos códigos que constam neste tutorial.
- Os exemplos fornecidos abaixo são para referência e podem exigir alguma modificação para funcionarem corretamente.
- A Cloudbeds não oferece assistência para o webdesign/desenvolvimento do site do seu hotel e nem para outra customização não contida neste tutorial.
- Os códigos abaixo funcionam na versão para desktop do mybookings. É POSSÍVEL QUE NÃO FUNCIONEM NA VERSÃO MÓVEL.
Por onde começar
1. Na sua página do myfrontdesk, clique no ícone de Configurações > Customização do Mybookings
2. Insira o código do tipo de visualização do mybookings que você gostaria de usar: visualização expandida ou minimizada.
3. Insira os códigos de customização em seus respectivos lugares (Customização de Meta tags, Customização do cabeçalho da sua página de reservas, etc)
Os códigos CSS devem sempre ficar entre <style> e </style> como mostra o exemplo abaixo:
<style>
.show_promo_code a {color:#999;}
</style>

Códigos de customização para Visualização Expandida
Insira o código no campo "Customize aqui os meta tags de sua página de reservas”:
th.children.custom-children {
visibility: hidden !important;
display: none;
}
td.children {
visibility: hidden !important;
display: none;
}
.av-children {
visibility: hidden !important;
display: none;
}

Para exibir a opção de "crianças" para apenas algumas acomodações e esconder para outros, certifique-se de que o código para remover a opção de todas as acomodações foi apagado ou removido. Adicione o seguinte código junto com o id da acomodação específica.
[data-room-type-id="ID da acomodação"] .av-children {
visibility: hidden !important;
display: none;
}
Isso funciona quando você não permite que os seus hóspedes reservem um determinado quarto nas configurações do mybookings:

Isso funciona quando você permite que os seus hóspedes reservem um quarto específico nas configurações do mybookings. O código abaixo removerá a opção "crianças" de todos os tipos de acomodações.

/* Remover a opção de crianças de todas as acomodações */
th.children.custom-children {
visibility: hidden;
display: none !important;
}
.btn-group.bootstrap-select.children_select.accommodation-select {
visibility: hidden !important;
display: none !important;
}

Isso funciona quando você permite que seus hóspedes reservem uma acomodação específica nas configurações do mybookings:

/* Remover a opção de crianças quando for possível reservar o quarto para um tipo de acomodação específico. Substituir "00000" pelo ID da acomodação*/
[data-room-type-id="00000"] th.children.custom-children {
visibility: hidden;
display: none !important;
}
[data-room-type-id="00000"] .btn-group.bootstrap-select.children_select.accommodation-select {
visibility: hidden;
display: none !important;
}
Por exemplo, retiramos a opção de criança apenas para a acomodação "Courtyard with Patio":

Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
th.adults.custom-adults {
visibility: hidden !important;
display: none;
}td.adults {
visibility: hidden !important;
display: none;
}.av-adults {
visibility: hidden !important;
display: none;
}
Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
.av-rates .price-from {
visibility: hidden !important;
display: none;
}

/* Remover o preço por pessoa adicional */
.av-per-person-price {
visibility: hidden !important;
display: none;
}

/* Remover o preço por pessoa adicional de um único tipo de acomodação */
[data-room-type-id="INSERIR ID DA ACOMODAÇÃO"] .av-per-person-price {
visibility: hidden !important;
display: none;
}

/* Remover a coluna de núm. máximo de hóspedes */
.av-occupancy {
display: none !important;
}

/* Remover a tarifa tachada após a aplicação do código promocional */
.av-roomrate .av-rate-price .old-price {
display: none;
}

/* Remover "Apenas x restantes" de todos os tipos de acomodações */
.av-left-rooms {
visibility: hidden !important;
display: none;
}

/* Remover "Tem um código de grupo?" */
.show_group_code {
display: none;
}

/* Code below will remove the "Minimum Stay" text from all of the room types */
.av-max-stay {
display: none !important;
}

.show_group_code
{
font-size: 0;
} .show_group_code a:after {
content:"VOCÊ TEM UM CÓDIGO DE DESCONTO PARA GRUPO?";
font-size: 13px;
color: red;
}

Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
.price-from {
font-size: 0 !important;
}
.price-from:after {
content: "Preço por noite";
font-size: 12px;
}

Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
<style>
[data-package-id="0"] ~ label > em { display: none; }
[data-package-id="0"] ~ label:before { content: "Insira aqui seu texto"; }
</style>

Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
/* Mudar o texto de "Adultos" para "Hóspedes" */
.av-room-options .av-adults .type_of_room {
font-size: 0 !important;
}
.av-room-options .av-adults .type_of_room:after {
content: "Insira aqui o seu texto";
text-align: center;
font-size: 10px;
}
/* Mudar o texto de "Adultos" para "Hóspedes" quando a opção de reservar um quarto específico estiver ativa */
th.adults.custom-adults {
font-size: 0 !important;
}
th.adults.custom-adults:after {
content: "Insira aqui o seu texto";
font-size: 14px;
text-align: center;
}
/* --------------------------------------------------- */

Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
/* Mudar o texto "Crianças para "Crianças acima de 3 anos" */
.av-room-options .av-children .type_of_room {
font-size: 0 !important;
}
.av-room-options .av-children .type_of_room:after {
content: "Crianças acima de 3 anos";
text-align: center;
font-size: 10px;
}
/* Mudar o texto "Crianças para "Crianças acima de 3 anos" quando a opção de reservar quartos específicos estiver ativa */
th.children.custom-children {
font-size: 0 !important;
}
th.children.custom-children:after {
content: "Crianças acima de 3 anos";
text-align: center;
font-size: 14px;
}

Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
/* Mudar o texto "Acomodações" para "Selecione" */
.av-room-options .no-rooms .type_of_room {
font-size: 0 !important;
}
.av-room-options .no-rooms .type_of_room:after {
content: "Insira aqui seu texto";
text-align: center;
font-size: 10px;
}

1. Adicione o código a seguir no campo Customize o rodapé de sua página de reservas para ver "Área de Camping" na linha de cima:
<script type="text/javascript">
document.querySelector("#wizard > ul > li:nth-child(1) > span > b").innerHTML = 'ESCOLHA UMA ÁREA DE CAMPING';
</script>
2. Adicione o código a seguir no campo Customize aqui os meta tags de sua página de reservas para mudar o texto de "Acomodação" para "Área de camping" no menu à direita
/* The following code will change the text "Room Selection" to "Pitch Selection:" */
div.checkout div div.col-md-3.reserve_info p:nth-child(3) {
font-size: 0;
}
div.checkout div div.col-md-3.reserve_info p:nth-child(3):after {
content: "Seleção da área de camping:";
font-size: 13px;
}
/* The following code will change the text "Room Nights" to "Pitch Nights:" */
div.checkout div div.col-md-3.reserve_info p:nth-child(14) {
font-size: 0;
}
div.checkout div div.col-md-3.reserve_info p:nth-child(14):after {
content: "Diárias da área de camping:";
font-size: 13px;
}
/* The following code will change the text "Room Total" to "Pitch Total" */
div.reserve_total div:nth-child(1) div:nth-child(1) p {
font-size: 0;
}
div.reserve_total div:nth-child(1) div:nth-child(1) p:after {
content: "Total da área de camping:";
font-size: 13px;
}
![Checkout - [Demo] Mountain Resort & SPA - Google Chrome](https://media.screensteps.com/image_assets/assets/003/533/663/original/9d73272f-f176-4219-996f-9b96d47207b4.png)
3. Adicione o código abaixo no campo Customize o rodapé de sua página de reservas para alterar "Acomodações" para "Área(s) de camping"
<script type="text/javascript">
document.querySelector("div.reserve_success div div.col-md-9 div div.table-responsive.visible-lg-block.visible-md-block h4").innerHTML = 'Área(s) de camping';
</script>
4. Para alterar o texto "Tipo de acomodação" para "Tipo da área de camping" na página de confirmação (depois que a reserva for concluída), adicione o seguinte código no campo Meta Tags Personalizadas (apenas página de confirmação)
/* The following code will change the text "Room Type" to "Pitch Type" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(1):after {
content: "Tipo da área de camping";
font-size: 14px;
}
5. Para alterar o texto "Nome da acomodação" para "Nome da área de camping" na página de confirmação (depois que a reserva for concluída), adicione o seguinte código no campo Meta Tags Personalizadas (apenas página de confirmação)
/* The following code will change the text "Room Name" to "Pitch Name" */div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2) {
font-size: 0;
}div.table-responsive.visible-lg-block.visible-md-block table thead tr th:nth-child(2):after {
content: "Nome da área de camping";
font-size: 14px;
}

/* Mudar o texto "Selecionar acomodação" por outro */
.btn.green.btn-block.select-accommodation-btn {
font-size: 0;
}
.btn.green.btn-block.select-accommodation-btn:after {
content: "Selecione / Insira seu texto aqui";
font-size: 12px;
}

- Adicione o código abaixo no formato: <style> código aqui </style>.
- Substitua "00000" pelo ID do tipo da acomodação the room type ID.
- O seguinte código pode ser aplicado apenas a um tipo de acomodação. Para adicionar isso aos outros tipos de acomodações, ele precisa ser copiado novamente com o outro ID da acomodação.
/* Mudar "Camas" do dormitório para outro texto */
[data-room-type-id="00000"] .type_of_room {
font-size: 0 !important;
}
[data-room-type-id="00000"] .type_of_room:after {
content: "Insira aqui o texto";
text-align: center;
font-size: 10px;
}

"Chegada":
Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
- Substitua "Data de chegada" por seu texto de preferência
#rooms-search-form > div:nth-child(3) > label {
font-size: 0;
}
#rooms-search-form > div:nth-child(3) > label::after {
content: 'Data de Chegada';
font-size: 16px;
}
"Partida"
Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
- Substitua "Data de partida" por seu texto de preferência
#rooms-search-form > div.form-group.checkout-date > label {
font-size: 0;
}
#rooms-search-form > div.form-group.checkout-date > label:after {
content: 'Data de partida';
font-size: 16px;
}

Insira essa tag no campo "Customize o rodapé de sua página de reservas":
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('p');
NewEl.innerHTML = '<br> Insira aqui a sua mensagem......... Do tamanho que preferir.... </br>';
NewEl.className += "text-center";
NewEl.style.fontSize = '15px';
NewEl.appendAfter( document.querySelector('div.col-md-3.reserve_info'));
</script>
Insira o código no campo "Customize aqui os meta tags de sua página de reservas":
img.logo{
cursor: pointer;
}
Insira o código no campo "Customize o rodapé de sua página de reservas":
<script>
document.getElementsByClassName('logo')[0].addEventListener('click', function() {window.location.href = 'http://www.website-name.com';});
</script>
/* Changing the background color and text color */
.av-left-rooms {
background-color: #3267B8;
text-color: white;
}

Para aplicar os códigos desta seção, primeiramente você precisa salvar os seguintes scripts no campo "Customize o cabeçalho de sua página de reservas"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Se você quer aplicar mais de um código de uma só vez (por exemplo: selecionar 2 adultos automaticamente e selecionar um plano tarifário automaticamente), você precisará usar intervalos diferentes para cada um dos códigos (um código com 1000 ms* e o outro com 2000 ms, etc). Veja onde está o intervalo abaixo.
*ms =milissegundo (essa é a velocidade de execução do código)

Ao carregar o motor de reservas, 2 adultos/hóspedes ficarão selecionados automaticamente
O seguinte código não funcionará se você permite que os seus hóspedes reservem acomodações específicas no mybookings.

Cole o seguinte código no campo "Customize o rodapé de sua página de reservas"
<script>
/* ----------------------- Select 2 Adults on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() {
$('div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
});
</script>
Ao carregar o motor de reservas, 2 adultos/hóspedes ficarão selecionados automaticamente para um tipo de acomodação específica
O seguinte código não funcionará se você permite que os seus hóspedes reservem acomodações específicas no mybookings.

Cole o seguinte código no campo "Customize o rodapé de sua página de reservas" e substitua XXXX pelo ID do tipo de acomodação que desejar
Leia esse tutorial para saber Como encontrar o ID do tipo de acomodação no myfrontdesk?
<script>
/* ----------------------- Select 2 Adults on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() {
$('[data-room-type-id=”XXXX”] div.av_roomtype>div.av-info>div.av-details>div>div.av-adults>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
});
</script>
Cole o seguinte código no campo "Customize o rodapé de sua página de reservas" e substitua o número 2 pelo número da sequência dos outros planos tarifários que desejar
Por exemplo: Se o plano tarifário que você deseja é o terceiro a partir da tarifa padrão, substitua o número 2 pelo 3.
A sequência significa o número do pacote no seu motor de reservas, conforme mostramos abaixo.
<script>
/* ----------------------- Select the rate plan on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() { $('div.av_roomtype>div.av-info>div.av-rates>div.av-roomrate-wrapper>div:nth-child(2)>div.md-radio>input[type=radio]').trigger('click');
},2000);
});
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>

Cole o seguinte código no campo "Customize o rodapé de sua página de reservas"
- Substitua XXXX com o ID do tipo de acomodação do myfrontdesk
- Substitua o número 2 com o número da sequência desejada
Leia esse tutorial para saber Como encontrar o ID do tipo de acomodação no myfrontdesk?
Por exemplo: Se o plano tarifário que você deseja é o terceiro a partir da tarifa padrão, substitua o número 2 pelo 3.
A sequência significa o número do pacote no seu motor de reservas, conforme mostramos abaixo.
<script>
/* ----------------------- Select the rate plan on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() {
packagerate = $('[name="check_roomrate-XXXX"]');
$(packagerate).trigger('click');
},2000);
});
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>

Cole o seguinte código no campo "Customize o rodapé de sua página de reservas" e substitua XXXX pelo ID do tipo de acomodação que desejar
Leia esse tutorial para saber Como encontrar o ID do tipo de acomodação no myfrontdesk?
Se o horário na sua conta do myfrontdesk estiver configurado no formato Gregoriano (DD/MM/AAAA), insira o seguinte código
<script>
/* ----------------------- Select the rooms when date is changed ----------------------- */
$(window).on('hashchange', function(e) {
//Get Check-in date
var CheckInDate = $('#start_date_not_mobile').val();
CheckInDate = CheckInDate.split("/"); // Adding for change
CheckInDate = CheckInDate[1] + "/" + CheckInDate[0] + "/" + CheckInDate[2]; //Adding for change
var DateIn = new Date(CheckInDate);
//Get Check-out date
var CheckOutDate = $('#end_date_not_mobile').val();
CheckOutDate = CheckOutDate.split("/"); // Adding for change
CheckOutDate = CheckOutDate[1] + "/" + CheckOutDate[0] + "/" + CheckOutDate[2]; //Adding for change
var DateOut = new Date(CheckOutDate);
//Get difference between the time of those dates
var GetTime = DateOut.getTime() - DateIn.getTime();
//Math formula to find the difference between two dates
var GetDaysAfterTimeCalculation = GetTime/(1000 * 3600 * 24);
//Condition on the what do to if the result is equal or more than 1
if (GetDaysAfterTimeCalculation >= 1)
{
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
}
}).trigger('hashchange'); // End of window hash.
</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>
Se o horário na sua conta do myfrontdesk estiver configurado no formato dos EUA (MM/DD/AAAA), insira o seguinte código
<script>
/* ----------------------- Select the rooms when date is changed ----------------------- */
$(window).on('hashchange', function(e) {
//Get Check-in date
var CheckInDate = $('#start_date_not_mobile').val();
var DateIn = new Date(CheckInDate);
//Get Check-out date
var CheckOutDate = $('#end_date_not_mobile').val();
var DateOut = new Date(CheckOutDate);
//Get difference between the time of those dates
var GetTime = DateOut.getTime() - DateIn.getTime();
//Math formula to find the difference between two dates
var GetDaysAfterTimeCalculation = GetTime/(1000 * 3600 * 24);
//Condition on the what do to if the result is equal or more than 1
if (GetDaysAfterTimeCalculation >= 1)
{
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
}
}).trigger('hashchange'); // End of window hash.
</script>
<script>
/* ----------------------- Select the rooms on load ----------------------- */
$(document).ready(function () {
$(window).load(function() {
setTimeout(function() {
$('[data-room-type-id="XXXX"] div.av_roomtype>div.av-info>div.av-details>div>div.no-rooms.av-quantity>div>div>div>ul>li:nth-child(2)>a').trigger('click');
},2000);
});
});
/* ----------------------- Select the rooms on load ends here ----------------------- */
</script>
Códigos de customização para a Visualização Minimizada
Se você estava usando a Visualização Expandida, certifique-se de desativá-la para usar a Visualização Minimizada.
1. Clique em "Configurações" (ícone de engrenagem)
2. Acesse "Configuração do mybookings"
3. Remova a seleção do "Usar visualização expandida"
4. Salve as alterações

.available_rooms .roomtype .custom-max-guests, .choose_room .roomtype .custom-max-guests {
display: none;
visibility: hidden !important;
}

.price_for_nights {
display: none !important;
}div.mobile.visible-xs-block.visible-sm-block > table > tbody > tr:nth-child(2) {
display: none !important;
}
![[Demo] White Elephant - Manchester, United Kingdom - Best Price Guarantee - Google Chrome](https://media.screensteps.com/image_assets/assets/003/533/669/original/7bdcab2a-1b9d-4976-8980-676d674136d0.png)
/* Remover a coluna "Crianças" */
.choose_room .room_types .custom-children, .choose_room .room_types .custom-adults,
/* Remover a coluna "Adultos */
.choose_room .roomtype .custom-adults, .choose_room .roomtype .custom-children
{ visibility: hidden !important; }

/* Remover a opção "Crianças" */
.room_types .children, .kids_block, .roomtype .col_kids, .total_child, .nb_kids, .book_child {
visibility: hidden !important;
}
.choose_room .room_types .custom-children {
visibility: hidden !important;
}
.tarife.kids_tarife {
display: none !important;
}

/* Remover a coluna "A partir de" */
.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}

.only_left
{display:none;}

#wizard-container > div.choose_room > div.available_rooms > div.col-md-9.padding-left-0.col-sm-12.col-xs-12 > div.room_types > div > div.detailed > div.room_more > div > div {visibility: hidden !important;}

.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike {
display: none;
}

Esse código póde ser útil para propriedades que possuem muitos intervalos de promoções e hóspedes que utilizam o Código Promocional
.promo_info
{
display: none !important;
}.package_warning .alert-danger {
font-size: 0;
}
.package_warning .alert-danger:after{
content: "insert the needed text here";
font-size: 12px;
line-height: 1;
}


"00000" deve ser substituído pelo ID da acomodação, você pode encontrar esse número no seu navegador ou entre em contato com a equipe de suporte.
[data-room-type-id="00000"] .roomtype.vertical-align.visible-md-block.visible-lg-block .children.custom-children{
visibility: hidden !important;
}
.room_types .stay tr:nth-child(2) {
display: none;
}

.room_more {
display: none;
}


Nessa seção, você encontrará códigos que substituem o texto padrão do mybookings por um texto personalizado. Você não precisa necessariamente colocar o texto fornecido nos modelos do código - você pode inserir qualquer outro texto.
Por favor, note que o texto digitado será exibido:
- para todos os idiomas do mybookings (aqueles que estão disponíveis) - se o código for inserido na seção 'Meta Tags Personalizadas'
- para o idioma selecionado - se o código for inserido nas seções "Cabeçalho / rodapé de sua página de reservas'

- Adicione o código no campo de "Customize aqui os meta tags de sua página de reservas";
- A frase/palavra que substituirá o original - aparecerá para todos os idiomas
.custom-adults.text-center,.col-sm-3.col-xs-3.custom-adults {
font-size: 0!important;
}.custom-adults.text-center:after,.col-sm-3.col-xs-3.custom-adults:before{
content: "Hóspedes";
font-size: 12px;
}

- Adicione o código no campo "Customize aqui os meta tags de sua página de reservas";
- A frase/palavra que substituir a original será exibida para todos os idiomas
- Esse código pode ser aplicado se você personalizou quartos individuais
<style>
.adults.custom-adults {
font-size: 0!important;
}
.adults.custom-adults:after {
content: "QUALQUER TEXTO";
font-size: 12px;
}
</style>

Alguns hotéis vendem acomodações para crianças a partir de uma determinada idade pelo preço de um adulto. Nesse caso, o hóspede deverá realizar a reserva com o número correto de adultos, incluindo as crianças. O código abaixo altera o nome da coluna "Adultos" para "Adultos e crianças +5 anos". Você pode alterar o texto ou a idade para qualquer número.
Texto em inglês
Adicione o código no campo de "Customize aqui os meta tags de sua página de reservas":
<style>
.custom-adults.text-center:after{
content: " and children + 5 years old";
}
.custom-children.text-center:after{
content: " - 5 years";
}
.col-sm-3.col-xs-3.custom-adults p:after{
content: " and children + 5 years old";
}
.col-sm-3.col-xs-3.kids_block.custom-children p:after{
content: " - 5 years";
}
</style>
Adicione esse código no campo "Meta Tags Personalizadas (apenas página de confirmação)":
<style>
.book_child:after{
content: " - 5 years old";
}
.book_child.kids_column:after {
content: "";
}
</style>
Texto em português
Adicione esse código no campo "Customize aqui os meta tags de sua página de reservas":
<style>
.custom-adults.text-center:after{
content: " e crianças + 5 anos";
}
.custom-children.text-center:after{
content: " - 5 anos";
}
.col-sm-3.col-xs-3.custom-adults p:after{
content: " e crianças + 5 anos";
}
.col-sm-3.col-xs-3.kids_block.custom-children p:after{
content: " - 5 anos";
}
</style>
Adicione esse código no campo "Meta Tags Personalizadas (apenas página de confirmação)":
<style>
.book_child:after{
content: " - 5 anos";
}
.book_child.kids_column:after {
content: "";
}
</style>
Adicione esse código no campo "Customize aqui os meta tags de sua página de reservas".
A frase/palavra que substitui a original será exibida para todos os idiomas.
Para o cabeçalho da tabela
.choose_room .roomtype .custom-select-rooms.text-center {
font-size: 0;
}
.choose_room .roomtype .custom-select-rooms.text-center:after{
content: "Apartamentos";
font-size: 12px;
line-height: 1;
}

Dentro da tabela (acima da parte para selecionar o número de acomodações/camas)
Essa palavra aparecerá ao invés de camas (para dormitórios) / acomodações (quartos privativos)
.type_of_room {
visibility:hidden;
}
.type_of_room:after{
content: "Apartamentos";
visibility:visible;
}
.custom-select-rooms .type_of_room {
margin-left: -25px;
}

A palavra/frase que substituirá a original aparecerá para todos os idiomas.
.col-md-12.room_image {
visibility:hidden;
}
.col-md-12.room_image:after{
content: "Tipo de apartamento";
visibility:visible;
margin-left: -35px;
}

Cole o código no campo "Customize aqui os meta tags de sua página de reservas"
div.price_for_nights.text-center > span {
font-size: 0;
}
div.price_for_nights.text-center > span::after {
content: "Preço por X dias";
font-size: 12px;
}
div.mobile.visible-xs-block.visible-sm-block.rm-type-dorm > table > tbody > tr:nth-child(2) > td:nth-child(1) {
font-size: 0;
}
div.mobile.visible-xs-block.visible-sm-block.rm-type-dorm > table > tbody > tr:nth-child(2) > td:nth-child(1):after {
content: "Preço por X dias";
font-size: 12px;
}


"Chegada" por outro texto
#rooms-search-form > div:nth-child(3) > div > label {
font-size: 0;
}
#rooms-search-form > div:nth-child(3) > div > label:after {
content: "Check-in";
font-size: 14px;
}
"Partida" por outro texto
#rooms-search-form > div:nth-child(4) > div > label {
font-size: 0;
}
#rooms-search-form > div:nth-child(4) > div > label:after {
content: "Check-out";
font-size: 14px;
}


Insira esse código no campo "Customize aqui os meta tags de sua página de reservas" da página de customização do mybookings e copie o código para todos os idiomas:
.available_rooms .roomtype .first_container {padding-left: 0;}
.available_rooms .roomtype .room_image { top: 0; padding: 0;}
.available_rooms .roomtype div.image_container { width: 100%; height: auto; margin: 0; padding-bottom: 70%; position: relative;}
.roomtype .image_container a{ position: absolute;}
.room_image img.bigger { margin: 0; position: absolute; right: 0; bottom: 0;}

É possível controlar a largura do botão mudando o número de px no elemento [.choose_room .roomtype .adults.custom-adults button.btn { max-width: 80px; ]
.choose_room .room_types .custom-children {
display: none;
}
.choose_room .roomtype .adults.custom-adults {
width: 20%;
}
.available_rooms .roomtype .adults .adults_select {
width: 100% !important;
}
.choose_room .roomtype .adults.custom-adults button.btn {
max-width: 80px;
}

Código alternativo (com margem):
.room {
padding-bottom: 25px;
padding-top: 25px;
}
.image_container>a {
height: 150%;
width: 150%;
margin-top: -40px;
}
.padding-right-0 {
padding-left: 40px;
}
.room_image img.bigger {
margin: 82px 0 0 122px;
}

Códigos que podem ser usados para a Visualização Expandida e a Minimizada
Caso você queira tornar o nome do seu hotel "clicável" para os hóspedes serem redirecionados de volta para o site, use os seguintes códigos:
Passo 1: Adicione esse código no campo "Customize o rodapé de sua página de reservas" substituindo a url do google com a sua:
<script type="text/javascript">
document.getElementsByClassName('hotel_name margin-left-160')[0].addEventListener('click', function(){ window.open('https://www.google.com', '_blank') });
</script>
Passo 2: adicione na seção "Customize aqui os meta tags de sua página de reservas":
body > div.page-header.page-header-wrap.navbar > div > h1{
cursor: pointer
}
1. Adicione o seguinte código no campo Customize aqui os meta tags de sua página de reservas. Isso mudará o cursor do mouse para uma mão quando você passar o mouse por cima do logotipo.
.logo {
cursor: pointer;
}
2. Adicione o seguinte código no campo Customize o rodapé de sua página de reservas:
Substitua https://www.google.com por qualquer outra URL para a qual deseja redirecionar seus hóspedes. Esse código abrirá o site em uma NOVA janela do navegador
<script type="text/javascript">
document.getElementsByClassName('logo')
[0].addEventListener('click', function(){
window.open('https://www.google.com',
'_blank') });
</script>
![[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome](https://media.screensteps.com/image_assets/assets/003/533/672/original/3264d7f6-bed9-4eba-a896-8a5d577f4170.png)
Se você quiser redirecionar os hóspedes ao site principal da sua propriedade, use o código a seguir.
Adicione o código no campo Customize o rodapé de sua página de reservas:
Substitua https://www.google.com por qualquer outra URL para a qual deseja redirecionar seus hóspedes. Esse código abrirá o site na MESMA janela do navegador.
<script>
document.getElementsByClassName('logo')
[0].addEventListener('click', function()
{window.location.href =
'https://www.google.com';});
</script>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
font-family:'Open Sans', "Arial", sans-serif !important;
}
/* Calendar Icon - Don't Change or Remove */
i.fa
{
font: normal normal normal 14px/1 FontAwesome !important;
}
/* Fonte do nome do hotel */
.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}
Importante!
Se, depois de inserir esse código e aplicar outra fonte, o ícone de seta desaparecer do seu calendário (como mostramos abaixo), remova a tag <span> do código e salve as mudanças.

/* Fonte do nome do hotel */
.page-header-inner .hotel_name {
color: #fff;
font-family: 'Verdana',sans-serif;
}

Adicione o código abaixo na seção "Customize o rodapé de sua página de reservas" e copie ele para todos os idiomas necessários:
.message_container
{font-size: 16px;
color: #ff5722;
font-weight: normal; /*font weight - normal, bold, light, etc...*/
font-style: normal; /*font style - normal, italic*/}

/*Título*/
.caption {
font-family: "Georgia";
}
/*Informações dentro da seção*/
.map_info {
font-family: "Courier New";
}

<style>
div.portlet-body h6:nth-child(n) {
font-size: 18px;
color: #0B468C;
}
</style>


/*mudar a fonte (Título do calendário)*/
/*mudar a fonte (Dias/datas do calendário)*/
#ui-datepicker-div {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}

.selected_rooms_price {
font-family: 'Roboto',sans-serif;
font-style: italic;
font-size: 30px;
color: #da26b2;
margin-top: 5px;
text-align: center;
}

Você pode utilizar o seguinte código para remover a opção de trocar a moeda
.last.dropdown {display:
none!important;
}

Você pode utilizar o seguinte código para remover a opção de trocar o idioma e a moeda:
#lang_currency_switchers { display:
none;

/* Remove Availability Calendar */
.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}

/* Remove Address */
.map_info {display:none;}

Para mais instruções, leia esse tutorial: Como Substituir o mapa do mybookings pelo Google Maps.
/* Remove Map */
#map_canvas {display:none;}

.checkin-checkout-terms-block{
display: none;
}

.checkin-checkout-terms-block, .property_info h5 {
display: none;
}

Para esconder a seção "Descrição", insira o seguinte código na seção "Customização de Meta Tags":
.portlet.property_info>.portlet-title {
display: none;
}.portlet.property_info>.portlet-body {
display: none;
}

Para esconder a seção "Você tem um código promocional?", insira o seguinte código na seção "Customização de Meta Tags":
.show_promo_code{
display: none;
}

Acesse a página do mybookings e role para baixo até a seção Descrição; os campos com detalhes de contato são basicamente uma lista numérica
No exemplo abaixo, 'Endereço' é o campo número 1, 'Cidade' é o campo número 2 e assim por diante

Para ocultar um determinado campo, adicione o seguinte código, especificando o número do campo que você deseja ocultar após a parte 'p: nth-child' entre parênteses.
No exemplo abaixo o campo 4 (Nome do contato) está oculto:
<style>
div.page-container.property_info > div > div > div.portlet-body > div.map_info > p:nth-child(4) {display:none; }
</style>
Insira o código na seção 'Código Javascript apenas página de confirmação'
Essa opção é recomendada para propriedade que possuem apenas dormitórios e não possuem quartos privados.
.reserve_total .row.total_adults, .reserve_total .row.total_child {
display: none;
}

<style>
.legend_booking>div>div:nth-child(4) {
display: none;
}
</style>


Nessa seção, você encontrará códigos que substituem o texto padrão do mybookings por um texto personalizado. Você não precisa necessariamente colocar o texto fornecido nos modelos do código - você pode inserir qualquer outro texto.
Por favor, note que o texto digitado será exibido:
- para todos os idiomas do mybookings (aqueles que estão disponíveis) - se o código for inserido na seção 'Meta Tags Personalizadas'
- para o idioma selecionado - se o código for inserido nas seções "Cabeçalho / rodapé de sua página de reservas'

- Adicione o código ao campo "Customize aqui os meta tags de sua página de reservas";
- A frase/palavra que substituirá o original será exibida para todos os idiomas
<style>
div.col-md-3.reserve_info > h2 {
font-size: 0;
}
div.col-md-3.reserve_info > h2:after {
content: "Insira o texto aqui";
font-size: 27px;
}
</style>
Adicione o código ao campo "Customize o rodapé de sua página de reservas"
<script type="text/javascript">
// Change the Checkout text to any other text
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.second > span > b").innerHTML = 'Insira o texto aqui';
</script>
<script type="text/javascript">
// Change the Checkout text to any other text on Confirmation Page
document.querySelector("#wizard > ul > li:nth-child(2) > span > b").innerHTML = 'Insira o texto aqui';
</script>
Adicione o código ao campo "Customize o rodapé de sua página de reservas"
<script type="text/javascript">
function ChangeDefaultTextReservationSummary() {
if (window.jQuery) {
setInterval(function() {
// Checkout page
$(".col-md-3.reserve_info").each(function() {
$(this).html($(this).html().replace("Adults", "Guests"));
$(this).html($(this).html().replace("Children", "Kids"));
$(this).html($(this).html().replace("Extra Adults", "Extra Guests"));
$(this).html($(this).html().replace("Extra Child(ren)", "Extra Kids"));
});
}, 500);
} else {
setTimeout(function() { ChangeDefaultTextReservationSummary() }, 50);
}
}
ChangeDefaultTextReservationSummary();
</script>


If you do not want to change one of the text or leave it as it is, just comment out the code. For example, to leave the "Children" text as it is and not changing it to other text, you must comment out by putting // (two forward slashes) in front of the code line:
// $(this).html($(this).html().replace("Children", "Kids"));
Add the code to Custom Meta Tags (Confirmation Page Only)
<style>
div.table-responsive.visible-lg-block.visible-md-block > table > thead > tr > th:nth-child(4) {
font-size: 0;
}
div.table-responsive.visible-lg-block.visible-md-block > table > thead > tr > th:nth-child(4):after {
content: "Guest(s)";
font-size: 14px;
}
</style>
Adicione o texto na seção de Meta Tags Personalizadas (ficará disponível para todos os idiomas)
.show_promo_code {font-size: 0;}
.show_promo_code a:after {content:"VOCÊ TEM UM CÓDIGO DE DESCONTO?";
font-size: 13px;
color: red;
}

Adicione o código abaixo para na seção 'Customize o rodapé de sua página de reservas'.
A frase/palavra que substituirá o original ficará disponível para todos os idiomas.
<script type="text/javascript">
document.querySelector("#wizard > ul > li.col-md-6.col-sm-6.active.first > span > b").innerHTML = 'INSIRA SEU TEXTO AQUI';
</script>

Mudar "Transferência Bancária" para outro texto:
Adicione o código a seguir no campo "Customize aqui os meta tags de sua página de reservas"
label[for=ebanking] > a {
font-size: 0;
}
label[for=ebanking] > a::after {
content: 'Pagamento em dinheiro no check-in';
font-size: 14px;
}


Mudar "Cartão de crédito" para outro texto
label[for=card] > a {
font-size: 0;
}
label[for=card] > a::after {
content: 'Cartão de crédito/débito';
font-size: 14px;
}


Mudar “PayPal” para outro texto
label[for=rPayPal] > a {
font-size: 0;
}
label[for=rPayPal] > a::after {
content: 'Pagar com cartão de crédito/débito via PayPal';
font-size: 14px;
}
Adicione o seguinte código no campo "Customize aqui os meta tags de sua página de reservas".
Sugerimos esse site para encontrar os códigos de ícones. Os números do código podem substituir o XXXX no conteúdo da linha do código: " \XXXX" (please keep the slash /)
<style>
.amenities_tab li::before, ul.amenities li::before{
content: " \XXXX ";
color: #3267B8;
}
</style>


Adicione esse código na seção "Customize o rodapé de sua página de reservas" e faça o mesmo procedimento para todos os idiomas:
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('p');
NewEl.innerHTML = '<br/> SEU TEXTO AQUI';
NewEl.className += "text-right";
NewEl.style.fontSize = '12px';
NewEl.appendAfter( document.querySelector('.book_now'));
</script>

- Adicione esse código na seção "Customize aqui os meta tags de sua página de reservas"
- Tenha em mente que esse texto será aplicado para todos os idiomas do mybookings
<style>
label[for="ebanking"]>a:after {
content: "seu texto aqui";
display: block;
}
/*add below code so options won't align bottom*/
.md-radio-inline .md-radio {
vertical-align: top;
}
</style>

- Adicione esse código na seção "Customize aqui os meta tags de sua página de reservas"
- Tenha em mente que esse texto será aplicado para todos os idiomas do mybookings
<style>
label[for="card"]>a:after {
content: "seu texto aqui";
display: block;
}
/*add below code so options won't align bottom*/
.md-radio-inline .md-radio {
vertical-align: top;
}
</style>

Adicione esse código no campo de "Customize o rodapé de sua página de reservas" para adicionar a opção de cartão débito ao lado da opção de cartão de crédito:
<script type="text/javascript">
document.querySelector('#reservationDetailsForm > div.payment_method > div.md-radio-inline > div:nth-child(2) > label > a').innerHTML = 'Debit/Credit Card';
</script>
Adicione o código na seção 'Customize o rodapé de sua página de reservas' e realize o mesmo processo para todos os idiomas
- você pode modificar o texto 'Obtenha seu código promocional aqui' sugerido no título
- insira o link correto do local onde o hóspede poderá obter um código promocional http://www.codigodolinkaqui.
<script type="text/javascript">Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); },
false;var NewEl = document.createElement('p');NewEl.innerHTML = '<a href="http://www.linktoyourcodehere." style="text-decoration:underline;">Obtenha seu código promocional aqui</a>';
NewEl.className += "text-center";NewEl.style.fontSize = '12px';NewEl.appendAfter
( document.querySelector('.promo-code'));
</script>

Por favor, coloque o código abaixo na seção "Customize o rodapé de sua página de reservas" (altere o texto destacado em vermelho):
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement("h1");
NewEl.innerHTML = "</br> Por favor note que o mínimo de diárias são de 2 noites";
NewEl.className += "text-center";
NewEl.style.fontSize = "19px";
NewEl.appendAfter( document.querySelector(".message_container"));
</script>
- Você pode controlar o tamanho da fonte alterando o número da linha abaixo
NewEl.style.fontSize = '19px';
- você pode alterar a posição do texto alterando a linha 'NewEl.className += "text-left";' para 'center' ou 'right'


Copie e Cole esse código na seção de 'Meta Tags Personalizadas'
Substitua "ADICIONE AQUI A URL" com o link de uma imagem válida, por exemplo, do google imagens.
.payment_method>.md-radio-inline::after {
content: "";
display: block;
width: 174px;
height: 58px;
background-image: url(ADICIONE AQUI A URL);
background-size: cover;

Copie e Cole o código na seção 'Meta Tags Personalizadas'
.payment_method>.md-radio-inline::after {
content: "";
display: block;
width: 216px;
height: 29px;
background-image: url(https://www.cloudbeds.com/wp-content/uploads/2018/05/ccs.png);
background-size: cover;
}

@media screen and (min-width: 992px) {
.about .col-md-4 {
min-width: auto;
width: 40%;
}
.about .col-md-8 {
width: 60%;
}
.about .img {
width: 100%;
height: auto;
padding-top: 50%;
}
.room_services .img div {
top: 0;
position: absolute;
}


.ui-widget-header, .ui-datepicker-title, .one_month .ui-datepicker-header, .half_year .ui-datepicker-header, .half_year_popup .ui-datepicker-header, .one_month .ui-datepicker-header{
color: #fff;
background: #cfeef8;
border: 1px solid #e0a240;}

background - altera a cor do plano de fundo
color - altera a cor da fonte
/*Altera as datas selecionadas - check-in e check-out*/
.ui-datepicker .ui-state-checkin, .ui-datepicker .ui-state-checkin .ui-state-default, .ui-datepicker .ui-state-checkout,
.ui-datepicker .ui-state-checkout .ui-state-default {
background: #f48224;
color: #ecfd02;
}
/*Altera o estilo das datas entre o check-in e check-out*/
.ui-state-default {
background: #f2f7cc;
color: #4b694c;
}


Utilizamos a cor preta no exemplo - modifique o código #000000 para a cor que desejar
.pink {position: relative; }
.pink:after {content: ""; position: absolute; border: 4px solid #000000; top: 0; right: 0; border-left: 4px solid transparent; border-bottom: 4px solid transparent;}

.pink { background: none !important; }


Os códigos abaixo do Comparador de Tarifas funcionam tanto para a Visualização Expandida quanto para a Minimizada
<style>
.rate-check-arrow.arrow-left {
background-image: url(path to your image left) !important;
}
.rate-check-arrow.arrow-left {
background-image: url(path to your image right) !important;
}
</style>

<style>
.rate-check {display:none !important;}
</style>
.acessa_float_left.acessa_float_description {
display: none;
}
.rate-check-arrow-text {font-size: 0; padding-right: 0;}
.rate-check-arrow-text::after {content: "Comparador de Preços"; font-size: 11px; line-height: 1.25;}


.rate-check-prices .room-details .room-channel-details:first-child .room-channel-name {
font-size: 0;
}
.rate-check-prices .room-details .room-channel-details:first-child .room-channel-name:before {
content:"Insira aqui o seu texto";
font-size: 14px;
}


Quando uma palavra precisa ficar oculta
#channel-Airbnb {display: none;}
Quando duas palavras precisam ficam ocultas
#channel-Hotel\ Bonanza {display: none;}
Quando a Booking.com precisa ficar oculta
#channel-Booking\2e com {display: none;}
Quando o Airbnb (API) precisa ficar oculto
#channel-Airbnb\20 \28 API\29{display: none;}
button.rate-check-button.rate-check-learn-more {font-size: 0;}
/*mudar o conteúdo abaixo*/
button.rate-check-button.rate-check-learn-more::after {content: "Adicione o Texto Aqui"; font-size: 15px;}


- Inserir o código no campo "Customize o rodapé de sua página de reservas"
- Esse código não precisa das tags <style></style>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
document.querySelector(".rate-check-why .rate-check-content").innerText = "test";
}, false);
</script>


.prices-without-taxes {font-size: 0;}
.prices-without-taxes:after {font-size: 14px; content: 'INSERIR O TEXTO AQUI';}

Ao compartilhar os links mybookings no Facebook, ele escaneia automaticamente o HTML e tenta gerar um snippet atrativo que geralmente adiciona o texto "Cloudbeds usa segurança compatível com PCI ...".
Isso pode ser substituído adicionando tags de marcação específicas que são buscadas pelo Facebook. O código a seguir deve ser adicionado à seção do mybookings "Meta Tags Personalizadas" no myfrontdesk:
<meta property="og:title" content="PUT TITLE HERE" />
<meta property="og:description" content="PUT DESCRIPTION HERE" />
<meta property="og:image" content="https://PUT_PREFERABLE_IMAGE_URL_HERE?format=2500w" />
Você pode impedir que os resultados de busca do Google mostrem o link direto ao mybookings para exibir apenas o seu site.
Veja aqui a explicação do Google.
Você pode copiar e colar esse código na página do seu website! Não adicione isso na "Customização do Mybookings"
/*alterar texto*/
.acessa_float_left.acessa_float_description {font-size:0;}
.acessa_float_left.acessa_float_description:after {content: "text here"; font-size:14px;}
/*Cor de fundo e cor de texto*/
.CloudBedsWidget .float_bg2 {background-color:#7dc3ac; color:#000;}
Leia esse tutorial para saber mais sobre como usar um iframe com o mybookings.
É importante que a parte do código que contém o link para a sua página do mybookings seja atualizada todas as vezes em que você copiar um código deste tutorial.
Adicione esse código no seu website entre o elemento <div> </div>:
<iframe src="SUA_URL_DO_MYBOOKINGS" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>
Esse código deve ser adicionado na parte inferior/rodapé da página do seu website
<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>