Getting Started

Publish the widget

Integrate the booking widget on your website

3 min min read

The booking widget is a component you can embed on your website so your customers can book directly. It adapts to any design.

Get the integration code

  1. In the sidebar menu, go to "Widget" → "Code"
  2. Choose the Standalone tab (recommended)
  3. Click "Copy code" — your clientId is already included

Example code

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

Integration options

Full integration (recommended)

Insert the complete widget on your page with the Standalone code above. The widget adapts to the container's width.

Iframe

If your platform doesn't allow running scripts, use the iframe (remember allow="payment" for payments to work):

<iframe
  src="https://reservadehamacas.com/embed/your-client-id"
  width="100%"
  height="900px"
  style="border: none; border-radius: 12px;"
  title="Book your sunbed"
  allow="payment"
></iframe>
Selecciona para copiar

Direct link

You can also link directly to your booking page:

https://reservadehamacas.com/your-company
Selecciona para copiar

If you haven't set up your company's friendly URL yet, use https://reservadehamacas.com/embed/your-client-id.

Customization

Colors

The brand color is configured from Widget → Customization. You can also set it in the code with theme:

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

Language

The widget detects the browser language, but you can force one:

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

Default zone

If you have multiple zones, you can preselect one with zoneId:

ReservaHamacas.init({
  clientId: 'your-client-id',
  container: '#reserva-hamacas',
  zoneId: 'beach-zone-id'
});
Selecciona para copiar

WordPress integration

  1. Go to Appearance → Widgets (or edit the page)
  2. Add a "Custom HTML" block
  3. Paste the integration code
  4. Save the changes

Wix integration

  1. In the Wix editor, add an "HTML embed" element
  2. Paste the integration code
  3. Adjust the container size
  4. Publish the changes

Verify the integration

After installing the widget:

  1. Visit your website
  2. Check that the widget loads correctly
  3. Make a test booking
  4. Confirm the booking appears in your panel

Troubleshooting

The widget doesn't load

  • Verify that the code is copied correctly
  • Check that there are no errors in the browser console
  • Make sure your subscription is active

Incorrect styles

  • Check that no CSS from your site is affecting the container
  • Adjust the size of the <div id="reserva-hamacas"> if you need to

Congratulations!

You've completed the initial setup of Reserva de Hamacas. Your booking system is ready to receive customers.

Recommended next steps

Previous
Activate payments
Publish the widget