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
Essa funcionalidade está disponível para o plano Plus da Cloudbeds ou superior/equivalente.
Por onde começar
1. Na sua página do myfrontdesk, clique no ícone de Configurações > Customização do Mybookings
2. 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>
Exemplos de Customização
Note: Os exemplos fornecidos abaixo são para sua referência e eles podem precisar de modificações adicionais para que funcionem corretamente.
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; } /* Hotel Name Font */ .page-header-inner .hotel_name { color: #fff; font-family: 'Verdana',sans-serif; }
Importante!
Se após adicionar o código para modificar todas as fontes você não conseguir visualizar mais as setas do calendário (como mostra a imagem abaixo) - remova onde está escrito <span> no código e salve as alterações.

/* Hotel Name Font */ .page-header-inner .hotel_name { color: #fff; font-family: 'Verdana',sans-serif; }

.rooms_book {
background: #091b48;}

Você pode usar esse código para modificar a cor da barra onde é inserido o código promocional no Mybookings (substitua o número da cor).
#promo_code_input { background-color: #efc0ff; }

Adicione o código abaixo na seção 'Customize o rodapé de sua página de reservas' e repita o mesmo procedimento para todos os idiomas.
.message_container {font-size: 16px; color: #ff5722; font-weight: normal; /*font weight - normal, bold, light, etc...*/ font-style: normal; /*font style - normal, italic*/}
/*Header*/ .caption { font-family: "Georgia"; } /*Info inside section*/ .map_info { font-family: "Courier New"; }

/*change font (Calendar title)*/
/*change font (Calendar days/dates)*/
#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;}

.rate_basic_not_derived.red.strike, .rate_min_not_derived.red.strike { 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; }

.cancellation_policy {
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>
body > div.container2 > div > div.container.main-content > div.page-container.property_info > div > div > div.portlet-body > div.map_info > p:nth-child(4) {display:none; }
</style>
00000 no código abaixo é o númeri (ID) da acomodação no myfrontdesk, você pode encontrá-lo usando o dev console no navegador ou entre em contato com nossa equipe de suporte para ajudar a encontrá-lo.
[data-room-type-id="00000"] .roomtype.vertical-align.visible-md-block.visible-lg-block .children.custom-children{
visibility: hidden !important;
}
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;
}

.room_more {
display: none;
}


.room_types .stay tr:nth-child(2) {
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 na seção 'Meta Tags Personalizadas';
- A frase / palavra que substituirá a original - aparecerá em todos os idiomas
.custom-adults.text-center {
font-size: 0!important;
}
.custom-adults.text-center:after {
content: "Guests";
font-size: 12px;
}

Algumas propriedades vendem acomodações para crianças a partir de uma idade específica pelo preço de um adulto. Neste caso, o hóspede deve reservar a quantidade correta de adultos, incluindo as crianças. O código abaixo ajudará a alterar o nome da coluna "Adultos" para "Adultos e crianças maiores de cinco anos". Você pode alterar o texto ou idade para qualquer número.
Texto em Inglês
Adicione esse código na seção 'Meta Tags Personalizadas'
<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 na seção 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 na seção 'Meta Tags Personalizadas'
<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 na seção ' Meta Tags Personalizadas (apenas página de confirmação)'
<style>
.book_child:after{
content: " - 5 anos";
}
.book_child.kids_column:after {
content: "";
}
</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:"HAVE A DISCOUNT CODE?";
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 = 'INSERT TEXT';
</script>

Adicione o texto na seção de Meta Tags Personalizadas
A palavra/frase que substituirá a original - ficará disponível em todos os idiomas.
Para o Cabeçalho
.custom-select-rooms.text-center {
visibility:hidden;
}
.custom-select-rooms.text-center:after{
content: "Apartments";
visibility:visible;
margin-left: -35px;
}
Dentro da Página (acima do numero de acomodações)
.type_of_room {
visibility:hidden;
}
.type_of_room:after{
content: "Apartments";
visibility:visible;
margin-left: -35px;
}

A frase/palavra que substituirá o original - ficará disponível em todos os idiomas
.col-md-12.room_image {
visibility:hidden;
}
.col-md-12.room_image:after{
content: "Apartment type";
visibility:visible;
margin-left: -35px;
}

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 de 'Meta Tags'
- 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 de 'Meta Tags'
- 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 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('p');
NewEl.innerHTML = '<br/> Por favor note que o mínimo de diárias são de 2 noites';
NewEl.className += "text-left";
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;
}

Adicione o seguinte código na seção 'Customize o rodapé de sua página de reservas' e copie para todos os idiomas
<script>
document.getElementsByClassName('logo')[0].addEventListener('click', function() { window.open('https://www.google.com', '_blank') });
</script>
Opcional - Este código é para alterar o cursor do mouse para ponteiro (deve ser adicionado na seção de Customização de Meta Tags):
img.logo{
cursor: pointer
}

@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;
}


Adicione esse código na seção 'Customize o cabeçalho de sua página de reservas' e faça o mesmo processo para todos os idiomas.
.available_rooms .roomtype .first_container {padding-left: 0;} .available_rooms .room_image { top: 0; padding: 0;} .available_rooms .col-md-9 div.image_container { width: 100%; height: auto; margin: 0; padding-bottom: 70%; position: relative;} .image_container div, .image_container a{ position: absolute;} .room_image img.bigger { margin: 0; position: absolute; right: 0; bottom: 0;}
.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
/*Changes highlighted dates - checkin and checkout*/ .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; } /*Changes dates style between checkin and checkout*/ .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;}

<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:"Desired text here";
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;} /*change text content below*/ button.rate-check-button.rate-check-learn-more::after {content: "Adicione o Texto Aqui"; font-size: 15px;}
<script>//wrap logo inside a hyperlinkdocument.addEventListener('DOMContentLoaded', function(event) { document.querySelector(".rate-check-why .rate-check-content").innerText = "Text go here";}, 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 ...".
This can be overridden by adding specific markup tags that Facebook is looking for. The following code should be added to the mybookings 'Custom Meta Tags' section in 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 copiar e colar esse código na página do seu website! Não adicione isso na "Customização do Mybookings"
This code should be copied and pasted to your website page! Do not add it to 'Mybookings Customization' section:
/*change text*/ .acessa_float_left.acessa_float_description {font-size:0;} .acessa_float_left.acessa_float_description:after {content: "text here"; font-size:14px;} /*Background color and text color*/ .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.
Adicone esse código no seu website
<iframe src="https://hotels.cloudbeds.com/reservation/HvaCsE?widget=1" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="yourFrame"></iframe>
Esse código deve ser dicionado na parte inferior da página do seu website
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"</script>