Widget de Reservas

Visão geral

O Widget de Reservas gera um código HTML que você cola no seu site para que clientes façam reservas sem sair da sua página. Acesse em Configurações → Integrações → Widgets.

Configurações

Experiência

Escolha qual experiência será exibida no widget:

• Reserva geral — exibe todas as experiências disponíveis para reserva
• Experiência específica — filtra o widget para mostrar apenas uma experiência selecionada

Dimensões

• Largura — largura do iframe. Use 100% para se adaptar ao container ou um valor fixo como 600px
• Altura mínima (px) — altura inicial do iframe. O valor padrão é 600. O widget redimensiona automaticamente conforme o conteúdo

Cor do tema

Escolha como o widget se apresenta visualmente:

Texto do botão (opcional)

Personalize o texto do botão de confirmação. Deixe vazio para usar o texto padrão "Confirmar Reserva".

Código de incorporação

Após configurar, o campo Código de incorporação exibe o HTML gerado automaticamente:

<iframe
  src="https://seu-estabelecimento.desio.com.br/embed/reserve"
  width="100%"
  height="600px"
  style="border:none; max-width:100%;"
  loading="lazy"
  title="Reservas"
></iframe>
<script>
  window.addEventListener("message", function(e) {
    if (e.data && e.data.type === "desio-embed-resize") {
      var iframes = document.querySelectorAll('iframe[src*="seu-estabelecimento"]');
      iframes.forEach(function(iframe) {
        iframe.style.height = e.data.height + "px";
      });
    }
  });
</script>

O script de redimensionamento ajusta a altura do iframe automaticamente conforme o usuário navega pelo fluxo de reserva.

Clique em Copiar para copiar o código e Preview para visualizar o widget antes de publicar. Após ajustar as configurações, clique em Salvar.

Instalar no seu site

Cole o código HTML na página onde deseja exibir o formulário de reservas. O widget funciona em qualquer plataforma que aceite HTML personalizado:

• WordPress — bloco "HTML Personalizado" ou editor de tema
• Wix — elemento "Embed HTML"
• Squarespace — bloco "Code"
• Site próprio — cole diretamente no HTML da página

Próximos passos