Instalação do widget

O widget de reservas permite que os seus clientes reservem diretamente a partir do seu site.

Obter o código

Vá a Widget → Código no menu lateral
Escolha o separador de integração (Standalone é o recomendado)
Clique em Copiar código — o seu clientId único já vem incluído

Opção 1: Standalone (recomendada)

É a integração mais rápida e leve. Cole este código no seu site, no sítio onde quer que o widget apareça:

<!-- Widget da Reserva de Hamacas (Standalone) -->
<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',
      locale: 'pt',
      theme: {
        primaryColor: '#3B82F6'
      },
      onReservationComplete: function (data) {
        console.log('Reserva concluída:', data);
        // O seu código aqui (analítica, redirecionamento, etc.)
      },
      onError: function (error) {
        console.error('Erro:', error);
      }
    });
  });
</script>
Selecione para copiar

Não precisa de o colocar no <head>: o <script> fica junto ao <div> e o widget arranca sozinho ao carregar a página.

A cor principal e os textos do widget configuram-se em Widget → Personalização, no painel. O primaryColor do código é opcional e serve de reforço.

Opção 2: iframe (simples)

Se a sua plataforma não permitir executar scripts, use um iframe. É a opção mais compatível:

<!-- Widget da Reserva de Hamacas (iframe) -->
<iframe
  src="https://reservadehamacas.com/embed/O_SEU_CLIENT_ID"
  width="100%"
  height="900px"
  style="border: none; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
  title="Reserve a sua espreguiçadeira"
  allow="payment"
></iframe>
Selecione para copiar

O atributo allow="payment" é imprescindível para que os pagamentos funcionem dentro do iframe.

Opção 3: ligação direta

Envie os seus clientes diretamente para a sua página de reservas, sem instalar nada:

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

Se ainda não configurou o endereço amigável da sua empresa, use a ligação com o seu identificador:

https://reservadehamacas.com/embed/O_SEU_CLIENT_ID
Selecione para copiar

Use-a em:

Emails
Redes sociais
Códigos QR impressos

Widget de condomínios

Se o seu plano incluir o widget de condomínios (reservas internas, sem preços nem pagamentos), o script e o objeto global são diferentes:

<div id="reserva-hamacas"></div>
<script src="https://cdn.reservadehamacas.com/widget/embed-community.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    ReservaHamacasCommunity.init({
      clientId: 'O_SEU_CLIENT_ID',
      container: '#reserva-hamacas',
      locale: 'pt'
    });
  });
</script>
Selecione para copiar

Integrações específicas

WordPress

Instale o plugin «Insert Headers and Footers» (ou semelhante)
Cole o código do widget na secção do rodapé
Crie uma página nova para as reservas
Acrescente o <div> do contentor

Também pode usar um bloco HTML personalizado no editor de blocos.

Wix

Vá ao editor do seu site
Acrescente um elemento «Embed» > «HTML personalizado»
Cole o código completo do widget
Ajuste o tamanho do contentor

Squarespace

Vá à página onde quer o widget
Acrescente um bloco de «Código»
Cole o código do widget
Guarde e publique

Shopify

Vá a Loja online > Páginas
Crie uma página nova
Mude para o editor HTML
Cole o código do widget

Verificar a instalação

Visite a página onde instalou o widget
Deve ver o calendário de reservas
Experimente fazer uma reserva de teste

Resolução de problemas

O widget não aparece

Verifique se o clientId está correto
Confirme que o <div id="reserva-hamacas"> existe no HTML
Veja a consola do navegador (F12) à procura de erros

O widget aparece mas não carrega dados

Confirme que a sua conta está ativa
Verifique se tem pelo menos uma zona publicada
Confirme que tem espreguiçadeiras disponíveis

Erro de CORS

O widget tem de ser carregado a partir de um domínio público
Não funciona abrindo o ficheiro HTML diretamente (file://)

Requisitos técnicos

Requisito	Mínimo
Largura do site	400 px (recomendado 800 px de altura)
JavaScript	Ativado
HTTPS	Recomendado
Navegadores	Chrome, Firefox, Safari, Edge (últimas 2 versões)

Passo seguinte

Aprenda a personalizar o widget com as suas opções de configuração.