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
- Clique no ícone de engrenagem Configurações
- No menu Motor de Reservas clique em Informações sobre mybookings
- Copie o código URL do seu mybookings
Exemplo: https://hotels.cloudbeds.com/reservation/zsWUhE - Adicione
?widget=1no 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
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
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
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).
Você pode alterar o tamanho do iframe:
- Alterando os parâmetros
widtheheightno 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">- 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.
Sim, você pode verificar esse tutorial para aprender mais: Customização Mybookings - HTML e CSS Meta tags
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 ).
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>
Isso não pode ser feito através da interface do myfrontdesk e não pode ser feito pela equipe de suporte da Cloudbeds. Isso é possível adicionando um script ao seu site. Consulte o seu web designer para verificar as possíveis soluções.
