Primeiros Passos

Publicar o widget

Integre o widget de reservas na sua página web

3 min de leitura

O widget de reservas é um componente que pode inserir na sua página web para que os seus clientes reservem diretamente. Adapta-se a qualquer design.

Obter o código de integração

  1. No menu lateral, vá a «Widget» → «Código»
  2. Escolha o separador Standalone (recomendado)
  3. Clique em «Copiar código» — o seu clientId já vem incluído

Código de exemplo

<!-- Widget do Reserva de Hamacas -->
<div id="reserva-hamacas"></div>
<script src="https://cdn.reservadehamacas.com/widget/embed.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    ReservaHamacas.init({
      clientId: 'o-seu-client-id',
      container: '#reserva-hamacas'
    });
  });
</script>
Selecione para copiar

Opções de integração

Integração completa (recomendada)

Insira o widget completo na sua página com o código Standalone acima. O widget adapta-se à largura do contentor.

Iframe

Se a sua plataforma não permitir executar scripts, use o iframe (não se esqueça de allow="payment" para que os pagamentos funcionem):

<iframe
  src="https://reservadehamacas.com/embed/o-seu-client-id"
  width="100%"
  height="900px"
  style="border: none; border-radius: 12px;"
  title="Reserve a sua espreguiçadeira"
  allow="payment"
></iframe>
Selecione para copiar

Ligação direta

Também pode ligar diretamente à sua página de reservas:

https://reservadehamacas.com/a-sua-empresa
Selecione para copiar

Se ainda não configurou o URL amigável da sua empresa, use https://reservadehamacas.com/embed/o-seu-client-id.

Personalização

Cores

A cor da marca configura-se em Widget → Personalização. Também a pode fixar no código com theme:

ReservaHamacas.init({
  clientId: 'o-seu-client-id',
  container: '#reserva-hamacas',
  theme: {
    primaryColor: '#2563eb',
    accentColor: '#f59e0b'
  }
});
Selecione para copiar

Idioma

O widget deteta o idioma do navegador, mas pode forçar um:

ReservaHamacas.init({
  clientId: 'o-seu-client-id',
  container: '#reserva-hamacas',
  locale: 'pt' // es, en, de, fr, it, pt
});
Selecione para copiar

Zona predefinida

Se tiver várias zonas, pode preselecionar uma com zoneId:

ReservaHamacas.init({
  clientId: 'o-seu-client-id',
  container: '#reserva-hamacas',
  zoneId: 'id-da-zona-praia'
});
Selecione para copiar

Integração com WordPress

  1. Vá a Aspeto → Widgets (ou edite a página)
  2. Adicione um bloco «HTML personalizado»
  3. Cole o código de integração
  4. Guarde as alterações

Integração com Wix

  1. No editor do Wix, adicione um elemento «HTML incorporado»
  2. Cole o código de integração
  3. Ajuste o tamanho do contentor
  4. Publique as alterações

Verificar a integração

Depois de instalar o widget:

  1. Visite a sua página web
  2. Confirme que o widget carrega corretamente
  3. Faça uma reserva de teste
  4. Verifique que a reserva aparece no seu painel

Resolução de problemas

O widget não carrega

  • Verifique se o código está corretamente copiado
  • Confirme que não há erros na consola do navegador
  • Certifique-se de que a sua subscrição está ativa

Estilos incorretos

  • Verifique se não há CSS do seu site a afetar o contentor
  • Ajuste o tamanho do <div id="reserva-hamacas"> se for necessário

Parabéns!

Concluiu a configuração inicial do Reserva de Hamacas. O seu sistema de reservas está pronto para receber clientes.

Passos seguintes recomendados

Anterior
Ativar pagamentos
Publicar o widget