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
Observe que a Cloudbeds não oferece suporte para design de sites, mas oferecemos alguns códigos para você 'copiar e colar' além de serem muito fáceis de usar. Nossa equipe de suporte terá o prazer de ajudá-lo a usar os códigos fornecidos neste tutorial. Entre em contato conosco pelo e-mail sac@cloudbeds.com caso precise de ajuda para personalizar seu motor de reservas usando as soluções de personalização fornecidas abaixo.
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;
}
'color' - modifica a cor da fonte da palavra 'Buscar'
'background' - modifica a cor do botão
/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
background: #da1176!important;
border-color: #2d7e7b;
} 
'color' - modifica a cor da fonte da palavra 'RESERVAR AGORA' e 'SELECIONAR ACOMODAÇÃO'
'background' - modifica a cor do botão
.green.btn,
.green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active {
background:#da1176!important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
}
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;
} 
Para adicionar uma imagem de fundo na página principal do motor de reservas, use o código abaixo:
Por favor, note que você precisa ter a URL da imagem de fundo, que deve terminar com .jpg.
Caso você tenha uma imagem no seu computador, será necessário enviá-la para qualquer site de hospedagem de imagens ou para o Google Drive e, em seguida, obter a URL da imagem. Veja alungs exemplos: https://www.codecademy.com/articles/host-images-on-dropbox
-adicionar plano de fundo + manter a linha do cabeçalho
.add_white {background: transparent;}
.container1{background-color: transparent;}
/* Change URL here */
.container2 {background: url("http://addbackgroundurlhere.com/file.jpg"); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color:#ffffff; }
.chooser, .property center {opacity: 1}
-adicionar plano de fundo+ remover a linha do cabeçalho
Para mostrar a imagem de fundo na página inteira, use este código:
/* Background to the full page */
.page-boxed {
background: url("http://addbackgroundurlhere.com/file.jpg") !important;
background-position: center center;
background-attachment: fixed !important;
background-repeat: no-repeat;
background-size: cover !important;
background-color:#ffffff;
}
.chooser, .property center {opacity: 1}
/* Add Transparency */
.page-footer, .page-header.navbar {background: transparent; } /* Transparent Header & Footer */
.container1, .container2 {background-color: transparent;} /* Transparent Main Background */
.container1, .container2 {
background-color: #fda2b4;
}
.page-header.navbar {
background-color: #6bbeb6;
}
'color' - modifica a cor da fonte do botão 'Buscar';
'background' - modifica a cor do botão
/* Change Search Button */
.btn.btn-warning.btn-block {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #b7f9fd;
background: #da1176!important;
border-color: #2d7e7b;
} 
.rooms_book {
background: #091b48;}
Se você deseja alterar o estilo de botão "RESERVAR AGORA" e permitir que os hóspedes reservem tipos de quarto individuais (há um botão ao lado do tipo de acomodações "SELECIONAR ACOMODAÇÃO") - o código abaixo mudará ambos os botões
Color - modifica a cor da fonte
Background - modifica a cor do botão
.green.btn, .green.btn:hover, .green.btn:focus, .green.btn:active, .green.btn.active, .green.btn.disabled, .green.btn.disabled:hover {
color: #fff;
background: #ac59b1;}
.rooms_select .btn, .rooms_select.open .btn, .rooms_select .btn:hover, .rooms_select .btn:focus, .rooms_select .btn:active {
background-color: #0479af;
}
/*Change active section color*/
.page-breadcrumb li.active>span {
background: #f13e64;
}
/*Change inactive section color*/
.page-breadcrumb li.active>span:after {
border-left: 30px solid #f13e64;
}
/*Change small arrow in the middle color on CHOOSE A ROOM step*/
.page-breadcrumb li>span {
background: #fbe3e3;
}
/*Change small arrow in the middle color on CHECKOUT step*/
.page-breadcrumb li>span:after {
border-left: 30px solid #fbe3e3;
background - modifica a cor do botão
color - modifica 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;
}
/* Remove Children Column */
.choose_room .room_types .custom-children, .choose_room .room_types .custom-adults,
/* Remove Adult Column */
.choose_room .roomtype .custom-adults, .choose_room .roomtype .custom-children
{ visibility: hidden !important; }
/* Remove Children Column */
.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;
}
/* Remove "Price From" column */
.only_left
{display:none;}
.starting_at{visibility:hidden;}
.mobile .starting_at{display: none;}
/* Remove Availability Calendar */
.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}
.only_left
{display:none;}
/* Remove Address */
.map_info {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;
}
/* Remove Map */
#map_canvas {display:none;} 
.checkin-checkout-terms-block{
display: none;
}
.checkin-checkout-terms-block, .property_info h5 {
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;
}
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 este código na seção "Customize o rodapé de sua página de reservas" e repita o mesmo procedimento para todos os idiomas:
<script type="text/javascript">
document.querySelector('.show_avail_calendar a').innerHTML = 'View Availability Calendar';
</script>
Adicione este código na seção "Customize o rodapé de sua página de reservas" e repita o mesmo procedimento para todos os idiomas:
<script type="text/javascript">
document.querySelector('.green.btn.disabled').innerHTML = 'Insert Text Here';
</script>
- 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 texto na seção de Meta Tags Personalizadas (ficará disponível para todos os idiomas)
.alert.alert-warning.booking_helper {font-size: 0;}
.alert.alert-warning.booking_helper:after {font-size: 14px; content: 'YOUR TEXT HERE';}
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 o código na seção 'Meta Tags Personalizadas'
- Você pode alterar a cor do texto substituindo o código #ff000
#rooms-search-form .check_availability_group:after {
content: "SEU TEXTO AQUI";
color: #ff0000;
display: block;
}
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 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>
- Adicione esse código na seção 'Customize o rodapé ou cabeçalho da sua página de reservas'
- Substitua o link www.cloudbeds.com pelo link do seu website
- Modifique a frase 'Retornar ao Website' por qualquer texto que desejar
- Modifique h4 para h1,h2,h3 para deixar a fonte do tamanho que desejar
- Modifique 'esquerda' por centro/direita para modificar a posição do texto
<h4 style="text-align:left"><a href="https://www.cloudbeds.com/" target="_blank"><h4><b>Retornar ao Website</b></h4></a>
/*Version 1*/ <a href='http://www.acantohotels.com/'><H4>Retornar ao Website</H4></a> /*Version 2: Alinhe o link à esquerda do logotipo e adicione uma seta na frente do texto*/ <div class="container"> <h4><a href='http://www.yourhotelwebsitehere.com/'>← Retornar ao Website</a></h4></div> /*Version 3: Alinhar o link ao centro*/ <div class="container"> <h4 style="text-align:center"><a href='http://www.yourhotelwebsitehere.com/'>← Retornar ao Website</a></h4> </div>
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'
.payment_method>.md-radio-inline::after {
content: "";
display: block;
width: 174px;
height: 58px;
background-image: url(https://www.cloudbeds.com/wp-content/uploads/2018/07/vs_mc.png);
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 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;}
Você pode controlar a largura alterando o número de pixels do 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 (with borders):
.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;
}
.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;}
Adicione esse código na seção 'Customize o cabeçalho de sua página de reservas
<script type="text/javascript">
window.addEventListener("load", function(event) {document.querySelector('.show_avail_calendar a').click(); }, false); </script>
<style>
.rate-check-title, .rate-check-arrow {
background-color: #ff5722 !important;
}
</style>Por favor, verifique os exemplos abaixo:
Please, check the examples on the screenshot below:
1 - antes de adicionar o código
2 - após adicionar o código. A cor do botão do comparador de tarifas é a mesma do botão 'buscar'
<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;}
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>