Publish the widget

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

Get the integration code

1. In the side menu, go to "Widget" → "Code"
2. In the "Integration code" section you'll find the code
3. Click on "Copy code"

Example code

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

Integration options

Full integration (recommended)

Insert the complete widget on your page:

<div id="reserva-hamacas-widget" style="width: 100%; min-height: 600px;"></div>
Selecciona para copiar

Booking button

If you prefer a button that opens the widget in a modal:

<button onclick="ReservaHamacas.open()">
  Book sun lounger
</button>
Selecciona para copiar

Direct link

You can also link directly to your booking page:

https://reservadehamacas.com/book/your-client-id
Selecciona para copiar

Customization

Colors

You can customize the widget colors:

ReservaHamacas.init({
  clientId: 'your-client-id',
  theme: {
    primaryColor: '#2563eb',
    secondaryColor: '#f3f4f6'
  }
});
Selecciona para copiar

Language

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

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

Default zone

If you have multiple zones, you can preselect one:

ReservaHamacas.init({
  clientId: 'your-client-id',
  defaultZone: 'beach-zone-id'
});
Selecciona para copiar

WordPress integration

If you use WordPress:

1. Go to Appearance → Widgets
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. Verify that the widget loads correctly
3. Make a test booking
4. Check that the booking appears in your dashboard

Troubleshooting

Widget doesn't load

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

Incorrect styles

• Verify that there's no CSS from your website interfering
• Use !important in container styles if necessary

Congratulations!

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

Recommended next steps

• Manage bookings - Learn to manage incoming bookings
• Analytics dashboard - Analyze your business performance
• Technical documentation - For advanced integrations