Customização do Motor de Reservas - Como adicionar uma notificação ou banner na página de disponibilidade

Seguir

Adicione uma notificação em um banner ou janela pop-up no seu Motor de Reservas para informar seus hóspedes sobre todas as informações importantes da sua propriedade, como, por exemplo, com relação a medidas de saúde e segurança (COVID-19, procedimentos especiais, etc) ou a situações externas atuais (alertas metereológicos, requisitos de viagens, etc).

Este tutorial explica o processo para adicionar essa funcionalidade no Motor de Reservas do PMS da Cloudbeds.

Para visualizar as configurações abaixo, certifique-se de que o usuário possui os papéis de usuários e permissões correspondentes.

Passo 1 - Acesse a página de Customização do Mybookings

  1. Clique em Configurações (ícone de engrenagem)
  2. Clique em Customização do mybookings
  3. Insira o código de customização no campo correto. Encontre o código para cada tipo de notificação nas próximas seções.
DEMO - Beach Life Testing - Customização do mybookings - Google Chrome

Passo 2 - Adicione o código de customização

Os códigos podem ser usados tanto na visualização Expandida quanto na Minimizada. Para saber mais sobre a customização do seu Motor de Reservas, leia Customização do Motor de Reservas - Códigos para visualização expandida e minimizada.

Opção A: Banner em negrito na janela de disponibilidade

Você pode exibir um banner em negrito na janela de disponibilidade na página do seu motor de reservas. Os hóspedes verão esse banner ao pesquisarem datas:

Jing
  1. Copie o código abaixo e cole-o na seção de Customize aqui os meta tags de sua página de reservas, de acordo com o tipo de design do mybookings, insira-o no campo Visualização Expandida ou Visualização Minimizada.

Você pode mudar a cor e o tamanho da fonte e a cor do fundo substituindo o texto em vermelho.

<style>
/* Styling of the message added in the Booking Engine */
div.choose_room div.available_rooms div.col-md-9.padding-left-0.col-sm-12.col-xs-12 h5 {
color: white;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
background-color: red;
font-size: 19px;
}
</style>
  1. Copie o código abaixo e cole-o na seção Customize o rodapé de sua página de reservas
/* Javascript code to add a message in Booking Engine */
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('h5');
NewEl.innerHTML = "Devido a circunstâncias imprevisíveis do Covid-19, estamos fechados pelo período de maio de 2020 até junho de 2020. Pedimos desculpas pela inconvenicência. Entretanto, gostaríamos de lhe informar que estamos tomando todas as precauções para manter os nossos quartos, camas e áreas comuns limpos e desinfetados duas vezes por semana. Caso tenha alguma dúvida, entre em contato conosco por e-mail ou telefone";
NewEl.appendAfter( document.querySelector('.message_container'));
</script>
  1. Clique em Salvar
DEMO - Beach Life Testing - Customização do mybookings - Google Chrome

Adicionar o banner em mais de um idioma

Para adicionar um texto traduzido para outros idiomas, você precisa apenas copiar o código que você já inseriu no campo Customize o rodapé de sua página de reservas para o idioma que deseja:

  1. No campo Customize o rodapé de sua página de reservas, clique o menu de idioma
  2. Selecione o idioma que deseja, por exemplo, inglês
  3. Copie e cole o código abaixo e substitua o texto em vermelho pela mensagem desejada em inglês
  4. Repita o mesmo processo para os idiomas necessários e clique em Salvar
/* Javascript code to add a message in Booking Engine */
<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('h5');
NewEl.innerHTML = "Due to unforeseen circumstances of Covid-19, we will remain closed for the period of May 2020 - June 2020. Apologies for any inconvenience. However, we would like to inform you that we take every precaution to keep our accommodations, beds, common areas cleaned and sanitized twice a week. For any questions, please feel free to reach out to us via email or phone call";
NewEl.appendAfter( document.querySelector('.message_container'));
</script>

A mensagem aparecerá assim quando o hóspede selecionar o idioma inglês no motor de reservas:

Opção B: Notificação pop-up

Você também pode exibir uma notificação em uma janela pop-up que aparecerá na sua página quando os hóspedes acessarem o seu Motor de Reservas. Os hóspedes poderão fechar essa janela clicando no (x) ou em qualquer lugar fora dela.

Jing
  1. Copie o código abaixo e cole-o na seção de Customize aqui os meta tags de sua página de reservas, de acordo com o tipo de design do mybookings, insira-o no campo Visualização Expandida ou Visualização Minimizada.
<style>
/* Styling of the pop-up window */
.modal-open .modal {
z-index: 99999; /* Bring the pop-up in front of all of content*/
margin-top: 10%; /* Move the pop-up box to the center */
}
</style>
<div id="popupmodal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2 class="modal-title">Important message</h2>
      </div>
      <div class="modal-body">
        <h4> Devido a circunstâncias imprevisíveis do Covid-19, estamos fechados pelo período de maio de 2020 até junho de 2020. Pedimos desculpas pela inconvenicência. Entretanto, gostaríamos de lhe informar que estamos tomando todas as precauções para manter os nossos quartos, camas e áreas comuns limpos e desinfetados duas vezes por semana. Caso tenha alguma dúvida, entre em contato conosco por e-mail ou telefone. </h4>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div> 
  1. Copie o código abaixo e cole-o 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="js/jquery.reveal.js"></script>
  1. Copie o código abaixo e cole no campo Customize o rodapé de sua página de reservas
<script>
	 $(window).load(function(){
       $('#popupmodal').modal('show');
    });
</script>
  1. Clique em Salvar
Powered by Zendesk