Skip to main content

How to Add a Fixed Component in Framer

In this tutorial, you will learn how to set up a Fixed booking component in Framer using the Bookla plugin. You will create and configure your company, resources, services, pricing, and API connection in Bookla, then connect everything to Framer and test your booking flow.

Prerequisites​

Before setting up Framer, make sure everything is configured correctly in the Bookla Platform.

Create a Company in Bookla​

This step is essential because it links your Company ID to the Framer widget.

  • Open Bookla Platform and click "Create Account".
  • Create an account using your credentials, or log in if you already have one.
  • Create a new company or use an invitation code to access an existing one.

Set Up Resources​

  1. Go to your Bookla account.
  2. Open the "Resources" section.
  3. Click the "+ New Resource" button.
  4. Enter a title for the resource. If needed, you can also change the resource color.
  5. Click the "Create" button.

Adding Working Hours for a Resource​

  1. Click the "Add working hours" button.
  2. Select all working days.
  3. Enter the working hours.
  4. Click "Create".

Service Setup​

  1. Go to the "Services" section.
  2. Click the "+ New Service" button.
  3. Enter the service name. If needed, you can also change the service color.
  4. Click the "Next" button.
  5. Select the service type. For this tutorial, choose "Fixed".
  6. Click the "Next" button.
  7. Set the service duration.
  8. Choose the booking policy.
  9. Click "Create".

Linking a Service with a Resource​

  1. Click the "Link with Resource" button.
  2. Select all resources that provide this service.
  3. Click the "Link Resources" button.

Adding the Currency and Setting Up the Tax Rate​

  1. Go to the "Pricing" section.
  2. Click "Click to set" under Currency.
  3. Select your desired currency.
  4. Click the "Save" button.
  5. Click "Click to set" under Tax rate.
  6. Enter your country's or state's required tax rate.
  7. Choose whether the tax is included in the price.
  8. Click the "Save" button.

Setting Up Price Rules​

  1. Click the "+ Add price rule" button.
  2. Configure the following parameters:
    • Price
    • Compared price (optional)
  3. Optionally, set restrictions for specific days, times, or resources.
  4. Click the "Create" button.

Service Settings​

  1. Go to the "Settings" section.
  2. Here you can configure settings such as:
    • Availability Period: How far in advance the service can be booked.
    • Time Interval: The interval at which the service can be booked.
    • Buffer Before: The minimum time required before a booking can be made.
    • Buffer After: Additional time added after each booking.

Additionally, you can add plugins to your company. Learn more about the available plugins here.

Connecting Bookla to Framer​

  1. Go to your Framer project.
  2. Click the "Plugins" button.
  3. Search for the "Bookla" plugin and click "Integrate".
  4. Choose the Fixed component and drag and drop it onto your page.
  5. Adjust the width of the component as needed.

Setting the API Region and Generating an API Key​

  1. Open your Bookla account.
  2. Check whether your account URL uses the EU or US region.
  3. Select the same region in Framer.
  4. Go to the "Developers" section in Bookla.
  5. Click the "Create API key" button.
  6. Enter a name for your API key.
  7. Select the required permissions:
    • Client Service
    • Client Resource
    • Guest Client
  8. Copy the API key. It is displayed only once.
  9. Paste it into Framer under "API Key".

Adding the Company ID and Service ID​

  1. Go to the "Company" section in Bookla.
  2. Copy the Company ID.
  3. Paste it into Framer under "Company ID".
  4. Go to the "Services" section.
  5. Select your service.
  6. Copy the Service ID.
  7. Paste it into Framer under "Service ID".

Testing the Component​

  1. Click the "Play" button.
  2. Select an available date and time.
  3. Click the "Continue" button.
  4. Enter the guest details.
  5. Click the "Book Now" button.

Conclusion​

You have successfully connected the Bookla Fixed component to your Framer project. Your booking flow is now ready for testing and publishing. If you want to further customize the booking experience, you can explore additional Bookla plugins, booking settings, and notification options in the Bookla Platform.