Motor de Reservas Plus - Códigos de Personalização Mais Comuns

• A fonte deve estar disponível gratuitamente no Google Fonts.
• Exemplo aplicando a Fonte Karla > Aplique este código CSSno campo Meta Tags Personalizadas: 

<!-- **START** CSS only Replace Font-Family - KB content **START** -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700;800&display=swap');

/* Apply to all elements starting with cb- class */
[class^="cb-"],
/* Apply to body and common text elements */
body,
p,
span,
a,
li,
td,
th,
div,
/* Apply to all heading tags */
h1, h2, h3, h4, h5, h6,
/* Apply to form elements for consistency */
input,
textarea,
select,
button,
label {
font-family: 'Karla', sans-serif !important;
}

/* Optional: Specific font weights for headings or other elements */
h1, h2, h3 {
font-weight: 700 !important; /* Bold for main headings */
}

h4, h5, h6 {
font-weight: 600 !important; /* Semi-bold for sub-headings */
}
</style>
<!-- **END** CSS only Replace Font-Family - KB content **END** -->

• Esta personalização tem como alvo o texto "Adulto" no seletor de Hóspedes.
• Você pode substituir o texto "Hóspedes" pelo de sua preferência e usar os Wrappers de Idiomas para adicionar suas traduções.
• Observação: substitua apenas as letras por Hóspedes, não remova nenhum outro caractere.
• Aplique este código CSS no campo Meta Tags Personalizadas:

<!-- **START** Replace 'Adults' text with 'Guests' within Guest Selectors - KB content **START** -->
<style>

.cb-guestselector-adults-text {
visibility: hidden;
font-size: 0;
}
.cb-guestselector-adults-text::after {
content: "Guests";
font-size: 14px;
visibility: visible;
}
</style>
<!-- **END** Replace 'Adults' text within Guest Selectors - KB content **END** -->

• Você pode substituir o texto "Crianças (0 a 3 anos)" pelo de sua preferência e usar os Wrappers de Idiomas para adicionar suas traduções.
• Observação: substitua apenas as letras por Crianças (0 a 3 anos), não remova nenhum outro caractere.
• Aplique este código CSS no campo Meta Tags Personalizadas:

<!-- **START** Replace 'Children' text with 'Children (0 to 3 years old)' within Guest Selectors - KB content **START** -->
<style>
.cb-guestselector-popover .cb-guestselector-children-text {
visibility: hidden;
font-size: 0;
}

.cb-guestselector-popover .cb-guestselector-children-text::after {
/* write the desired text between the quotation marks after content: */
content: 'Children (0 to 3 years old)';
font-size: 14px;
visibility: visible;
}
</style>
<!-- **END** Replace 'Children' text with "Children (0 to 3 years old)" within Guest Selectors - KB content **END** -->

• Aplique este código CSS no campo Meta Tags Personalizadas:

<!-- **START** 'Hide Property Information section ' - KB content **START** -->
<style>
.cb-property-info {
visibility: hidden;
opacity: 0;
color: transparent;
width: 0;
height: 270px;
}

</style>
<!-- **END** 'Hide Property Information section ' - KB content **END** -->

• Lembre-se de substituir o texto pela sua mensagem preferida. Você pode usar os Wrappers de Idiomas para adicionar suas traduções.
• Mantenha a mensagem entre aspas". Cada caractere \A representa uma quebra de linha.
• Aplique este código CSS no campo Meta Tags Personalizadas :

<!-- **START** CSS only Adds Banner after Search Card - KB content **START** -->
<style>

/* This ensures the parent container stacks its children vertically */
.cb-landing-page div:has(>.cb-search-card) {
display: flex;
flex-direction: column;
}

.cb-landing-page div:has(>.cb-search-card)::after {
content: "Look for dates in June and for special offers use code: Summer deals. \A More options when selecting two nights minimun.";
white-space: pre-wrap;
text-align: center;
font-family: Poppins;
background-color: #ECF0F1;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
color: #000000;
padding: 20px;
border-radius: 40px;
border-width: .5px;
/* Adds some space between this new element and the search card below it */
margin-bottom: 15px;
}

</style>
<!-- **END** CSS only Adds Banner after Search Card - KB content **END** -->

• Lembre-se de substituir o texto pela sua mensagem preferida. Você pode usar os Wrappers de Idiomas para adicionar suas traduções.
• Mantenha a mensagem entre aspas". Cada \A representa uma quebra de linha.
• Aplique este código CSS no campo Meta Tags Personalizadas:

<!-- **START** CSS only Adds Banner before Accommodations List - KB content **START** -->
<style>
.cb-accommodations-page::before {
content: "Click on the desired check-in date, to view availability for that date. \A Best price guarantee! We match prices. \A Call us to 555-555 or emails us to contact@emailtest.com";
visibility: visible;
text-align: center;
font-family: Poppins;
font-size: 14px;
font-weight: 600;
color: #465560;
background-color: #ECF0F1;
padding: 15px;
border-radius: 15px;
margin-bottom: 25px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5;
white-space: pre-wrap; /* Allows the \A to create a line break */
}
</style>
<!-- **END** CSS only Adds Banner before Accommodations List - KB content **END** -->

Para esta personalização, oferecemos o seguinte guia passo a passo: Adicionar texto personalizado abaixo do nome do Plano Tarifário no Motor de Reservas

• Esta personalização tem como alvo o texto "Reservar Agora" dentro do botão do carrinho de compras
• Você pode substituir o texto Solicitar Reserva pelo seu texto preferido e usar os Wrappers de Idiomas para adicionar suas traduções.
• Observação: substitua apenas as letras de Solicitar Reserva, não remova nenhum outro caractere.
• Aplique este código CSS no campo Meta Tags Personalizadas:

<!-- **START** Replace the text 'Book Now' in the shopping cart to 'Request to Book' in all steps of the booking process - KB content **START* -->

<style>
.cb-shopping-cart-confirm-button {
font-size: 0 !important;
}

.cb-shopping-cart-confirm-button:after {
font-size: 1rem;
content: 'Request to Book';
/* Ensure the content is centered and takes full width of the button */
display: block;
text-align: center;
margin: auto;
}
</style>

<!-- **END** Replace the text 'Book Now' in the shopping cart to 'Request to Book' in all steps of the booking process - KB content **END* -->

O Sistema de Eventos é um recurso do nosso Motor de Reservas que permite a comunicação com outros aplicativos e programas externos. Você pode escutar eventos enviados pelo Motor de Reservas.

Revise o guia completo para construir sobre nosso Sistema de Emissão de Eventos para suas soluções personalizadas: Sistema de Emissão de Eventos do Motor de Reservas Plus.

Reutilize a opção de pagamento Transferência Bancária e substitua o texto pela sua solução preferida. Consulte nosso guia completo: Motor de Reservas Plus - suporte a processadores de pagamento personalizado e cartão-presente

Um favicon (abreviação de “ícone favorito”) é um pequeno ícone quadrado associado ao seu site. É uma parte importante da identidade visual da sua propriedade, apesar de ser minúsculo.

Como preparar e hospedar seu favicon personalizado

• Crie um arquivo .ico ou .png de  32×32 px (ou 16×16 px).
• Faça o upload para um host de imagem que forneça uma URL de arquivo direto (terminando em .ico ou .png). Uma opção gratuita recomendada é imgbb.
• No imgbb: clique em Começar Upload → selecione seu ícone → escolha Não exclua automaticamente → Fazer upload.
• Na seção Códigos de incorporação, selecione Links do visualizador e copie o link que termina em .ico ou .png.
• (Opcional) Cole esse link em uma janela anônima, clique com o botão direito na imagem e selecione Copiar endereço da imagem para confirmar que é um caminho de arquivo direto.

Código em JavaScript para atualizar o favicon

• Copie e insira o seguinte código no campo JavaScript da seção de Personalização do Motor de Reservas.
• Substitua a URL https://www.google.com/favicon.ico por sua própria URL direta de favicon .ico ou .png.

<!-- **START** Update Favicon - KB content **START** -->
<script>
// Updates favicon dynamically
(() => {
const url = "https://www.google.com/favicon.ico"; // Replace with your desired favicon URL
const ext = url.split(".").pop()?.toLowerCase() || "";
const typeMap = {
svg: "image/svg+xml",
png: "image/png",
jpg: "image/jpeg",
jpeg: "image/jpeg",
ico: "image/x-icon",
};
const type = typeMap[ext] || "image/x-icon";
document
.querySelectorAll(
"link[rel='icon'], link[rel='apple-touch-icon'], link[rel='shortcut icon']"
)
.forEach((el) => el.remove());
document.head.insertAdjacentHTML(
"beforeend",
`<link rel="icon" href="${url}" type="${type}">
${
ext === 'png'
? `<link rel="apple-touch-icon" href="${url}" type="${type}">`
: ""
}`
);
})();
</script>
<!-- **END** Update Favicon - KB content **END** -->

• Explore estes guias para integrar seu Motor de Reservas Plus com sua(s) plataforma(s) preferida(s):
  • Adicione o link do seu Motor de Reservas Cloudbeds ao seu perfil do X (anteriormente Twitter)
  • Adicione o link do seu Motor de Reservas ao seu perfil do Instagram
  • Adicione o Facebook Messenger ao seu Motor de Reservas
  • Adicione o WhatsApp Messenger ao seu Motor de Reservas

• Você pode adicionar qualquer script ao campo JavaScript para conectar códigos de terceiros, como sua Plataforma de Consentimento de Gerenciamento de Cookies, Sojern, Triptease, The Hotel Networks, Carstack, AskSuite, Xendit, etc.
• Se você está procurando construir uma solução de rastreamento personalizada para o Motor de Reservas Plus, consulte nosso guia do Sistema de Emissão de Eventos.
• Análise & Pixels de Rastreamento: Conecte seu Motor de Reservas Plus com Google Analytics GA4, Google Ads, Google Tag Manager e Facebook Pixel diretamente na aba de Análise. Revise nosso conteúdo relacionado a essas integrações disponíveis:
  • Conecte o Google Analytics com o Motor de Reservas Cloudbeds
  • Integração do Google Ads com o Motor de Reservas Cloudbeds
  • Adicione um Facebook Pixel ao seu Motor de Reservas

Não há necessidade de personalizações, se você definir a Ocupação da Acomodação para o Máximo de Crianças como zero, o Motor de Reservas não exibirá a opção de crianças para esse tipo de acomodação.