Car Rental Booking System in Framer

In this tutorial, you’ll learn how to build a complete car rental booking system in Framer.
We’ll go step by step through creating resources and services, setting flexible pricing rules, and integrating an open-source rental component.
You’ll also see how to connect everything with Bookla using API keys, company IDs, and service IDs, and finally test the booking flow directly in Framer.

By the end, you’ll have a fully working rental system where clients can choose dates, set pickup and drop-off times, and instantly see the correct price before completing their booking.

Creating Resources

1. Go to the section "Resources".
2. Click "+ New Resource".
3. Enter resource names (for example, car model).
4. Click "Create".
5. Create as many resources as you need.

Note
You need to create as many resources as you have cars in your rental service.
For example, if you have 4 Audi A4 cars, then you should create 4 separate resources for them.

Creating Services

1. Go to the section "Services".
2. Click "+ New Service".
3. Enter a service name (for example, "Volvo XC60 rental").
4. Select the service type.

Note
For car rentals, choose "Flexible" because the duration of bookings can vary.

5. Select a booking interval.
6. Choose a booking policy:
   • Instant booking: The client instantly books the service without payment.
   • Needs confirmation: The booking requires your confirmation.
   • Needs prepayment: The client must prepay to confirm the booking.
7. Click "Create".

Connecting a Service to a Resource

1. Click "+ Link with Resource".
2. Select the resource(s).
3. Click "Link".

Creating Pricing Rules

To understand pricing rules, look at the image above, which shows 3 pricing steps:

• One week
• One day
• One hour

For example, if the booking duration is 8 days and 4 hours, the system will apply:

• One week rule
• One day rule
• 4 × one hour rule

In total, this results in $270.

Adding the Currency

1. Go to the section "Pricing".
2. Set the currency by clicking "Click to set".
3. Choose your desired currency.
4. Click "Save.

Adding price rule for 1 hour rate

1. Click "+ Add price rule".
2. Set duration to 1 hour.
3. Set the price for a 1-hour rental.
4. Set priority.

Note
The higher the number, the higher the priority for the price rule.

5. Click "Create".

Adding price rule for 24 hour rate

1. Click "+ Add price rule".
2. Set duration to 24 hours.
3. Set the price for a 24-hour rental.
4. Set priority.

Note
The priority should be set slightly higher, as it ranks above the 1-hour rule in the hierarchy shown in the image.

5. Click "Create".

Adding price rule for 1 week rate

1. Click "+ Add price rule".
2. Set duration to 168 hours.
3. Set the price for a 1-week rental.
4. Set priority.

Note
The priority should be set higher than the previous two price rules, because of the hierarchy shown in the image.

5. Click "Create".

Note
You need to create as many services as you have different types of cars. For each car type, create separate price rules using the same steps as above.

Open-source rental component integration

We recently released open-source booking components that you can use on your website.
For example, we have a dedicated category of Framer components that can be added as code components in your Framer projects.
You can edit and modify them, or even use them as prompts for ChatGPT or another AI tool to generate variations or add new features.

In this tutorial, we’ll also use the Rental component.

Open-source Components

The component looks like this:

Here, the client can select a date range, start time, and end time.
This allows the client to choose both pickup and drop-off times for the car rental.

How to use rental component

1. Go to Open-source Components.
2. Find the Rental component.
3. Scroll down to "Component.tsx".
4. Click on "Component.tsx".
5. Copy the code.

6. Go to Framer.
7. Open the section "Assets".
8. In the code section, click "+".
9. Click "New Code File".
10. Write the title, for example "BookingComponent".
11. Click "Create".

Note
By default, it is an animated square.

12. To change it, replace the default code with the copied code for the rental component.

13. Go back to the page.
14. Select the container where you want to place the component.
15. Go to the section "Assets".
16. Drag and drop the component.

17. Adjust the component’s width and height.
18. Make some changes: for example, remove padding, or change the selected color and button color.

How to connect component to Bookla

1. Go to the Bookla section.
2. Check the API region in Bookla (US or EU).
3. Paste it into the API Region field.

4. To copy and paste the API key:
   • Go to the Bookla Platform.
   • Go to the Developers section.
   • Click "Create API key".
   • Write a name, for example "Car rental key".
   • Select only the following client permissions: Client Service, Client Resource, and Guest Client.
   • Copy the API key (you will have access to it only once).
   • Paste it into Framer at "API key".

5. To copy and paste the Company ID:
   • Go to the Bookla Platform.
   • Click on "Company".
   • Copy the ID at the top.
   • Paste it into Framer at "Company ID".

6. To copy and paste the Service ID:
   • Go to the Bookla Platform.
   • Go to the "Services" section.
   • Select the relevant service.
   • Copy the Service ID.
   • Paste it into Framer at "Service ID".

Testing the component

1. Go to the page.
2. Select a time period.

Note
You can see that the price changes based on the selected period.

3. Click "Continue".
4. Enter the required data.
5. Click "Make booking".
6. The reservation is created, and you can also see it in the Bookla Platform.

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.