Skip to main content

How to Add the Days Component in Framer

This guide explains how to create a service with day-based availability in Bookla, connect it to Framer, and add the Days component to your Framer website so customers can select an available dates and make a booking.

Before You Begin​

The service needs to be set up in your Bookla account before you can add the Days component to your Framer project.

Set Up Your Bookla Company​

If you are new to Bookla, start by creating a company account.

  1. Open the Bookla Platform and select "Create Account".
  2. Register your account using your login details.
  3. Create a new company, or enter an invitation code if you have been invited to an existing company.

Configure Resources​

Note
Resources represent the people, equipment, or other entities that provide a service. For example, they could be personal trainers at a fitness studio, rooms at a wellness center, or courts at a sports facility.

  1. Log in to your Bookla account.
  2. Navigate to the "Resources" section.
  3. Select "+ New Resource".
  4. Provide a name for the resource. You can also choose a different color if needed.
  5. Click "Create" to finish setting up the resource.

Service Setup​

  1. Open the "Services" section in your Bookla account.
  2. Click "+ New Service" to start creating a service.
  3. Enter a name for the service and, if you want, choose a different color.
  4. Click "Next".
  5. Under the service type options, select "Days".
  6. Click "Next" to continue.
  7. Choose the appropriate Booking policy:
    • Instant booking: The customer can book the service immediately without requiring payment.
    • Needs confirmation: The booking must be manually confirmed before it is accepted.
    • Needs prepayment: The customer must make a payment before the booking is confirmed.
  8. Enter the Check-in time and Check-out time for the service.
  9. Click "Create" to finish setting up the service.

Connect the Service to a Resource​

  1. Select "Link with Resource".
  2. Choose the resources that will be available for this service.
  3. Click "Link Resources" to confirm your selection.

Configure Currency and Tax​

  1. Open the "Pricing" section.
  2. Under Currency, click "Click to set".
  3. Select the currency you want to use for the service.
  4. Click "Save".
  5. Under Tax rate, click "Click to set".
  6. Enter the applicable tax rate for your country or state.
  7. Specify whether the tax should be included in the displayed price.
  8. Click "Save" to apply the changes.

Configure Price Rules​

  1. Click "+ Add price rule".
  2. Set the pricing details:
    • Price
    • Compared price (optional)
  3. If necessary, add limits based on specific days, times, or resources.
  4. Click "Create" to save the price rule.

Configure Service Settings​

  1. Navigate to the "Settings" section.
  2. Adjust the available service settings according to your requirements:
    • Availability Period: Determines how far ahead customers can book the service.
    • Check-in time: Default check-in time for day bookings.
    • Check-out time: Default check-out time for day bookings.

You can also extend your company's functionality by adding plugins. To explore the available options, see the Bookla Plugins documentation.

Connect Bookla to Framer​

  1. Open the Framer project where you want to add the booking flow.
  2. Select the "Plugins" option from the Framer toolbar.
  3. Find the "Bookla" plugin and click on it.
  4. Drag the Days component onto your page and place it where you want the booking flow to appear.
  5. Adjust the component to fit your page layout.

Configure the API Region and API Key​

  1. Log in to your Bookla account.
  2. Check your Bookla account URL to determine whether you are using the EU or US region.
  3. Select the corresponding region in Framer.
  4. In Bookla, navigate to the "Developers" section.
  5. Click "Create API key".
  6. Enter a name for the API key.
  7. Enable the following permissions:
    • Client Service
    • Client Resource
    • Guest Client
  8. Copy the generated API key and keep it somewhere secure. The key is only displayed once.
  9. Paste the API key into the "API Key" field in Framer.

Add the Company ID and Service ID​

  1. Open the "Company" section in Bookla.
  2. Copy your Company ID.
  3. Paste it into the "Company ID" field in Framer.
  4. Navigate to the "Services" section.
  5. Open the service you created for the Days component.
  6. Copy the Service ID.
  7. Enter it into the "Service ID" field in Framer.

Test the Days Component​

  1. Click the "Play" button in Framer to preview your page.
  2. Select the check-in date and check-out date.
  3. Click "Continue".
  4. Enter the required guest information.
  5. Click "Book Now" to complete the booking.

Conclusion​

The Days component is now connected to your Bookla account and ready to accept bookings through your Framer website.

You can further customize your booking experience using Bookla plugins, service settings, and notification options.