Como adicionar o Motor de Reservas da Cloudbeds ao seu site usando iframe

Seguir

Um iframe é um elemento HTML usado para incorporar uma página da Web a outra. Por exemplo, se você quiser colocar o seu Motor de Reservas da Cloudbeds no seu site como origem principal, mas não quiser redirecionar seus hóspedes a um site externo.

Este tutorial mostrará como incorporar o seu Motor de Reservas da Cloudbeds ao seu site usando um iframe.

Para usar o widget do Motor de Reservas no seu site, leia esse tutorial. Você também pode ver como Como adicionar o motor de reservas mygroup ao seu site.

Como o iframe do motor de reservas aparece no site:

A aparência do iframe pode ser personalizada pelo seu web designer para combinar com o estilo do seu site. Entre em contato conosco para saber mais sobre Cloudbeds Websites.

Como incorporar o iframe do motor de reservas da Cloudbeds no seu site

  1. Clique no ícone de engrenagem Configurações
  2. No menu Motor de Reservas clique em Informações sobre mybookings
  3. Copie o código URL do seu mybookings
    Exemplo: https://hotels.cloudbeds.com/reservation/zsWUhE
  4. Adicione ?widget=1 no final da URL para a versão reduzida do iframe (ou pule esta etapa e prossiga para a etapa 4 para incorporar a página do motor de reservas completa)
    Exemplo: https://hotels.cloudbeds.com/reservation/zsWUhE?widget=1

A página normal do motor de reservas mostra muitas informações, o que pode ser um pouco exagerado quando exibido em um iframe ou integrado a uma página da web. Para simplificar isso, criamos uma versão reduzida do motor de reservas, que pode ser acessada adicionando ?widget=1

Este iframe retira os seguintes elementos:

  • cabeçalho (logotipo, nome da propriedade, fotos da propriedade)
  • políticas
  • mapa
  • amenities
  • termos e condições
  • menu de idioma e moeda
  • as seções de cabeçalho e rodapé customizados não serão exibidas. Portanto, os códigos dessas seções não funcionarão na versão simplificada do motor de reservas. Nesse caso, salve o código na seção de Meta Tags Customizadas.

Para mostrar o motor de reservas completo dentro do iframe, simplesmente não adicione  ?widget=1 na URL

5. Insira a URL no código do iframe fornecido abaixo.

Para um iframe reduzido:

<iframe src="YOUR_MYBOOKINGS_URL?widget=1" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>

<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>

Para iframe completo:

<iframe src="YOUR_MYBOOKINGS_URL" width="100%" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds"></iframe>
<!-- Add script to auto-resize the iFrame -->
<script type="text/javascript" src="https://hotels.cloudbeds.com/widget/iFrameResizer"></script><script>window.iFrameResize({}, '#cloudbeds')</script>

6. Copie todo o código do iframe e cole-o no seu website

Essa etapa deve ser feita apenas pela propriedade ou pelo web designer. Não pode ser feito pelo time da Cloudbeds.

Perguntas Frequentes

Segurança e Certificação PCI

O Motor de Reservas da Cloudbeds utiliza segurança SSL para garantir que todos os dados transmitidos entre nossos servidores da web e o navegador de um hóspede permaneçam de forma privada e integrais. Para obter dicas sobre como garantir que o SSL seja implementado corretamente em uma solução de iframe, consulte nosso tutorial sobre os Recursos de Segurança - Cloudbeds

Como usar iframes com o Wordpress

Os sites do Wordpress exigem um método diferente para adicionar um iframe e precisam ser adicionados usando um shortcode. Para mais informações sobre como adicionar iframes a um site Wordpress, leia este tutorial do Wordpress

Como usar iframes com Squarespace?

Adicione o bloco de código </> das opções e salve o código iframe nesse bloco. Pode ser que o iframe não se expanda corretamente na primeira vez que a página for carregada. Isso acontece devido à funcionalidade de carregamento Ajax que está ativada no Squarespace. Certifique-se de que ela está desativada. Para obter mais informações, clique aqui (em inglês).

Como modificar o tamanho do iframe

Você pode alterar o tamanho do iframe:

  1. Alterando os parâmetros width e height no código do iframe
<iframe src="https://YOUR-MYBOOKINGS-URL?widget=1" width="100" height="500" scrolling="no" class="iframe-class" frameborder="0" id="cloudbeds">
  1. Alterando o tamanho do container em que você insere o iframe

Valores de altura adicionados manualmente podem impactar a exibição do iframe, pois o código padrão (Passo 5) já ajusta o tamanho, com base no seu total de acomodações disponíveis.

Como o idioma do motor de reservas no iframe é definido?

Por padrão, o idioma do motor de reservas é definido pelas configurações do navegador do hóspede (se você acessar o motor de reservas dos Estados Unidos - ele será definido para inglês> se você alternar manualmente para alemão, na próxima vez que acessar o motor de reservas ele será definido como alemão ).

É possível alterar o idioma padrão exibido no iframe do motor de reservas?

Sim, você pode adicionar qualquer um dos códigos de 2 dígitos dos idiomas suportados na URL para alterar o idioma padrão do iframe:

Exemplo:

Padrão <iframe src="https://hotels.cloudbeds.com/reservation/rRmoV78?widget=1" width="976" height="976"></iframe>

Versão em Espanhol <iframe src="https://hotels.cloudbeds.com/es/reservation/rRmoV5?widget=1" width="976" height="976"></iframe>

As opções dos menu (adultos, crianças, acomodações) estão escondidas no iframe

Adicione esse código na seção "Customize aqui os meta tags de sua página de reservas". Você pode trocar os valores de pixel do #wizard-container dependendo dos seus menus para torná-los mais visíveis.

<style>
#wizard-container{ margin-bottom: 130px !important; }
.search-panel-wrap { margin-top: 40px !important; }
</style>
Powered by Zendesk