Incorporar a página de reservas no site

Na Univents, a página de reservas funciona como uma página pública independente. Mas também pode ser incorporada diretamente no site existente, por exemplo numa subpágina dedicada a catering, eventos ou provas. O código iFrame necessário é gerado pela Univents já pronto a usar, sem ser preciso escrever nada.

O que é preciso antes

Antes de incorporar, é necessária uma página de reservas concluída. Se ainda não existir nenhuma, deve criar-se primeiro. Para isso, abrir a vista geral das páginas de reservas e clicar em Nova página de reservas, no canto superior direito. Aí define-se um nome, escolhe-se um design (Webshop, Pedido ou Stepper), os produtos e espaços reserváveis e as perguntas a que os clientes devem responder.

Para a página incorporada ficar visível para os clientes, tem de estar ativa. Na vista geral, isto vê-se no selo de estado junto ao nome: Em direto significa publicada, Rascunho significa ainda não visível. Clicar no selo para alternar entre os dois estados. Uma página em rascunho não é apresentada no iFrame.

Obter o código de incorporação

O código de incorporação encontra-se diretamente na vista geral das páginas de reservas. Cada página tem aí, na margem direita, uma série de ícones de ação.

1. Abrir a vista geral das páginas de reservas.
2. Localizar a linha da página de reservas pretendida.
3. Clicar à direita no ícone de código com a dica Copiar código de incorporação.
4. A Univents copia o código iFrame pronto para a área de transferência e confirma com a mensagem Código de incorporação copiado.

O código copiado é aproximadamente assim:

<iframe
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

Se for necessário apenas o link direto em vez do código iFrame, utilizar o ícone com a dica Copiar link de reserva.

Inserir o código no site

Agora cola-se o código copiado no local do site onde a página de reservas deve aparecer.

1. No construtor do site, abrir a página onde a reserva deve aparecer.
2. Inserir um elemento para código HTML personalizado. No WordPress, este bloco chama-se muitas vezes «HTML personalizado»; noutros sistemas, «Código», «Incorporar» ou «HTML».
3. Colar o código iFrame copiado neste elemento.
4. Guardar e publicar a página.

A largura está definida no código como width="100%", pelo que a página de reservas se ajusta automaticamente à área de conteúdo. O min-height:700px define a altura mínima. Se a página de reservas for longa e parecer cortada em baixo, aumentar este valor.

Para programadores: ajustar a altura automaticamente em vez de fixa

O valor fixo min-height:700px no código de incorporação é apenas uma altura mínima — se o espaço não chegar, a página de reservas fica cortada em baixo. Quem tiver acesso ao código do site (ou o respetivo criador do site) pode, em alternativa, fazer a altura crescer automaticamente: a página incorporada envia por si própria uma mensagem à janela principal sempre que o tamanho muda.

Um pequeno script no site intercepta essa mensagem e ajusta a altura do iFrame em tempo real:

<iframe
  id="univents-booking-iframe"
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'univents-embed-resize') {
      var iframe = document.getElementById('univents-booking-iframe');
      if (iframe) iframe.style.height = event.data.height + 'px';
    }
  });
</script>

Sem este script, tudo continua a funcionar como habitual — apenas será necessário aumentar manualmente o valor fixo de min-height quando preciso (ver as perguntas frequentes abaixo).

Cookies na área incorporada

A página de reservas incorporada não mostra um banner de cookies próprio e não define cookies. É intencional: dois banners sobrepostos — o do site e outro dentro do iFrame — apenas confundiriam os visitantes. O consentimento fica assim inteiramente a cargo do próprio site; para a página de reservas incorporada não é necessário recolher nada adicional.

Se alguém abrir a página de reservas no seu próprio endereço, ou seja, sem estar incorporada, passa-se o contrário: aí a Univents mostra o seu próprio banner de cookies.

Testar e verificar

Antes de disponibilizar a página incorporada aos clientes, convém verificar o resultado.

1. Abrir a página do site onde o código foi inserido.
2. Verificar se a página de reservas é apresentada por completo e sem cortes.
3. Para verificar o comportamento previamente na Univents, clicar na vista geral no ícone com a dica Abrir pré-visualização em direto, para ver a página num novo separador.
4. Fazer um pedido de teste, para ter a certeza de que a reserva chega corretamente.

Se depois for necessário alterar algo no conteúdo, no design ou nas perguntas, clicar em Configurar na linha da página de reservas. As alterações aparecem automaticamente também na versão já incorporada, não sendo necessário copiar de novo o código iFrame.

Perguntas frequentes

É preciso copiar o código de novo após cada alteração? Não. O iFrame mostra sempre o estado atual da página de reservas. As alterações de conteúdo feitas através de Configurar ficam logo visíveis também na versão incorporada.

A página fica cortada em baixo, o que fazer? Aumentar, no código inserido, o valor de min-height:700px, por exemplo para 1000px. Assim, a página de reservas ganha mais espaço. Quem tiver acesso ao código do site pode, em alternativa, fazer a altura crescer automaticamente — ver a secção «Para programadores» acima.

Os meus clientes não veem nada no iFrame. Verificar se a página de reservas tem o estado Em direto. Se estiver em Rascunho, não é apresentada publicamente. Clicar no selo de estado para a ativar.

Onde encontro novamente o guia? Na vista geral, cada página tem um ícone de livro com a dica Abrir guia de incorporação, que conduz diretamente a este artigo.