How to Add a Long-Term Booking Component for Villa & Apartment Rentals

Introduction

In this tutorial, you will learn how to set up a long-term (weekly or multi-day) booking system for villa or apartment rentals using Bookla and integrate it into your Framer website.

By the end of this guide, you will have a fully working booking component that allows users to select dates, enter their details, and make reservations directly from your site.

What you will need:

• A Bookla account
• A Framer project
• Access to the Bookla open-source components repository

Bookla Setup: Creating Resource and Weekly Service

1. To create a resource, go to your Bookla account and open the "Resources" section.
2. Click "+ New Resource".
3. Enter the resource name, for example, "Villa". You can also choose a resource color.
4. Click "Create".

5. To create a service, go to the "Services" section.
6. Click "+ New Service".
7. Enter the service name, for example, "Villa rental", and choose a color.
8. Select "Days" as the service type since the rental is for multiple days.
9. Click "Next".
10. Choose the booking policy:

• Instant Booking: The client receives confirmation immediately after booking
• Needs Confirmation: The booking is confirmed only after manual approval
• Needs Prepayment: The booking is confirmed after payment is made

11. Set the check-in and check-out times.
12. Click "Create".

13. To connect the service to a resource, click "Link with resource".
14. Select the resource.
15. Click "Link resource".

Pricing Configuration

1. Go to the "Pricing" section.
2. To set the currency, click "Click to set".
3. Choose the correct currency.
4. Click "Save".

5. To add a price rule, click "+ Add price rule".

6. Set the price per day.

7. You can also add limits, for example:

   • Different pricing for weekdays (Monday–Thursday) and weekends (Friday–Sunday)

8. Click "Create".

GitHub Components: Getting the Villa Rental Component Code

1. Go to Open-source Components.
2. Find and click on "Villa Rental".
3. Here you can see the component details, parameters, and preview.
4. Open "component.tsx".
5. Click "Copy".

Component Integration: Adding Booking Component to Framer

1. In your Framer project, go to the "Assets" section.
2. In the code section, click "+" → "New code file".
3. Enter a file name and click "Create".
4. Replace the existing code with the copied component code.
5. Save the file.
6. Go back to your page.
7. Drag and drop the component onto the page.

Note
By default, an error message will appear indicating that Bookla configuration is required. Once you add the necessary data, the component will display correctly.

Bookla Connection: API Setup and Configuration

1. Go to the Bookla section in your component settings.

2. To add the API region:

   • Open your Bookla account.
   • Check the URL to see whether your region is EU or US.
   • Select the same region in Framer.

3. To generate and add the API key:
   • Go to the Developers section in Bookla.
   • Click "Create API key".
   • Enter a name, for example, "Villa rental key".
   • Select permissions: Client Service, Client Resource, and Guest Client.
   • Copy the API key (it is shown only once).
   • Paste it into Framer under "API key".

4. To add the Company ID:
   • Go to the Company section in Bookla.
   • Copy the ID from the top.
   • Paste it into Framer under "Company ID".

5. To add the Service ID:
   • Go to the Services section.
   • Select your service.
   • Copy the Service ID.
   • Paste it into Framer under "Service ID".

6. To add the Resource ID:
   • Go to the Resources section.
   • Select your resource.
   • Copy the Resource ID.
   • Paste it into Framer under "Resource ID".

After completing these steps, the component will reload and display correctly.

Testing

1. Click the Play button.
2. Select the desired weeks.
3. Click "Continue".
4. Enter guest details.
5. Click "Book Now".

Conclusion

You have now successfully set up a long-term villa or apartment rental booking system using Bookla and integrated it into your Framer project.

This setup allows your customers to easily select dates, complete bookings, and manage reservations online.

If needed, you can further customize pricing, availability rules, and component styling to better match your business needs.

Get Involved

We want these tutorials to address your real-world needs. If you have specific use cases or scenarios you'd like to see covered, please:

1. Open an issue in our GitHub repository with the label "use case request".
2. Provide a brief description of your business type and the specific challenge you're trying to solve with Bookla.

Your input will help us prioritize and develop the most relevant content for our developer community.

We appreciate your patience as we work on creating valuable, practical content to support your Bookla implementation journey. In the meantime, don't hesitate to explore our API documentation and reach out to our support team if you have any questions.