Widget installation

The booking widget lets your customers make bookings directly from your website.

Get the code

Go to Widget → Code in the sidebar menu
Choose the integration tab (Standalone is the recommended one)
Click Copy code — your unique clientId is already included

Option 1: Standalone (recommended)

This is the fastest and most lightweight integration. Paste this code into your site wherever you want the widget to appear:

<!-- Reserva de Hamacas Widget (Standalone) -->
<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',
      locale: 'es',
      theme: {
        primaryColor: '#3B82F6'
      },
      onReservationComplete: function (data) {
        console.log('Reservation complete:', data);
        // Your code here (analytics, redirect, etc.)
      },
      onError: function (error) {
        console.error('Error:', error);
      }
    });
  });
</script>
Selecciona para copiar

You don't need to place it in the <head>: the <script> goes next to the <div> and the widget starts on its own when the page loads.

The main color and the widget texts are configured from Widget → Customization in the panel. The primaryColor in the code is optional and acts as a fallback.

Option 2: Iframe (simple)

If your platform doesn't let you run scripts, use an iframe. It's the most compatible option:

<!-- Reserva de Hamacas Widget (Iframe) -->
<iframe
  src="https://reservadehamacas.com/embed/YOUR_CLIENT_ID"
  width="100%"
  height="900px"
  style="border: none; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
  title="Book your sunbed"
  allow="payment"
></iframe>
Selecciona para copiar

The allow="payment" attribute is essential for payments to work inside the iframe.

Option 3: Direct link

Send your customers straight to your booking page, without installing anything:

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

If you haven't set up your company's friendly URL yet, use the link with your identifier:

https://reservadehamacas.com/embed/YOUR_CLIENT_ID
Selecciona para copiar

Use it in:

Emails
Social media
Printed QR codes

Community widget

If your plan includes the community widget (internal bookings, without prices or payments), the script and the global object are different:

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

Specific integrations

WordPress

Install the "Insert Headers and Footers" plugin (or similar)
Paste the widget code in the footer section
Create a new page for bookings
Add the container <div>

You can also use a custom HTML block in the block editor.

Wix

Go to your site editor
Add an "Embed" > "Custom HTML" element
Paste the complete widget code
Adjust the container size

Squarespace

Go to the page where you want the widget
Add a "Code" block
Paste the widget code
Save and publish

Shopify

Go to Online Store > Pages
Create a new page
Switch to the HTML editor
Paste the widget code

Verify installation

Visit the page where you installed the widget
You should see the booking calendar
Try making a test booking

Troubleshooting

The widget doesn't appear

Verify the clientId is correct
Check that the <div id="reserva-hamacas"> exists in the HTML
Review the browser console (F12) for errors

The widget appears but doesn't load data

Verify your account is active
Check that you have at least one published zone
Verify you have available sun loungers

CORS error

The widget must be loaded from a public domain
It doesn't work by opening the HTML file directly (file://)

Technical requirements

Requirement	Minimum
Website width	400px (800px height recommended)
JavaScript	Enabled
HTTPS	Recommended
Browsers	Chrome, Firefox, Safari, Edge (latest 2 versions)

Next step

Learn how to customize the widget with its configuration options.