Dental booking website with Framer

In this tutorial, you will learn how to create a dental booking website using Bookla and Framer.

You will learn how to:

• Set up resources, services, and plugins in Bookla
• Configure working hours and booking rules
• Create email notifications and booking policies
• Connect Bookla with Framer
• Add the required API information
• Test the booking component

This tutorial is ideal for anyone who wants to create a professional booking website for a dental clinic or any service-based business.

First, we need to set up everything in Bookla: resources, services, and plugins.

Resource setup

1. Go to your Bookla account.
2. Go to the "Resources" section.
3. Click the "+ New Resource" button.
4. Write the title for the resource. In this case, it will be all available employees, for example, dentists.
5. If you want, you can also change the resource colour.

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. Write the service name. If you want, you can also change the service colour.

4. Click "Next".

5. Select the service type. For this tutorial, it will be "Fixed".

6. Click "Next".

7. Change the service duration.

8. Choose the booking policy:

   • Instant booking: The client can instantly book the service without payment.
   • Needs confirmation: The booking requires your confirmation.
   • Needs prepayment: The client must prepay to confirm the booking.

9. Click "Create".

Linking service with resource

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

Adding the currency

1. Go to the "Pricing" section.
2. Click "Click to set" under currency.
3. Select your desired currency.
4. Click "Save".

Setting up the tax rate

1. Click "Click to set" under Tax rate.
2. Enter your country's or state's required tax rate.
3. Choose whether it is included in the price or not.
4. Click "Save".

Setting up price rules

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

Setting up plugins

Additionally, you can set up plugins such as Email Notifications, Booking Rules, and more.

In the Plugins section, you can also set up a payment provider to receive online payments. If you need this, you can follow this tutorial: Stripe payments integration

Booking Rules plugin setup

1. Go to the "Plugins" section and click "+ Add plugin".
2. Find the "Booking Rules" plugin and click "Add".
3. After adding the plugin, it will appear in the sidebar.

How to set up cancellation rules

1. Go to "Booking Rules".
2. Click "+ New cancellation rule".
3. Fill in the parameters:

• Name: For example, "Cancellation Policy"
• Priority: A higher number means a higher priority.
• Services: You can apply these rules to all services by not selecting any, or choose specific services.
• Periods: Define time periods and the refund amount the client will receive. Keep in mind that setting 100% may result in a loss due to payment provider commission.

4. Click "Create".

How to set up rescheduling rules

1. Go to "Booking Rules".
2. Click "+ New rescheduling rule".
3. Fill in the parameters:

• Name: For example, "Rescheduling Policy"
• Priority: A higher number means a higher priority.
• Services: You can apply these rules to all services by not selecting any, or choose specific services.
• Hours Before Booking: The minimum number of hours before the booking required to allow rescheduling.

4. Click "Create".

How to add contact details

After creating cancellation or rescheduling rules, you can also add contact details so clients can reach you.

1. Go to the "Contact details" section.
2. Fill in the form:

• Email
• Phone
• Additional information

3. Click "Save changes".

How to add the Email Notifications plugin

1. Go to your Bookla account.
2. Go to the "Plugins" section and click the "Add plugin" button.
3. Find the "Email Notifications" plugin and click the "Add" button.
4. After adding the plugin, it will appear in the sidebar.

Merchant templates

1. Go to the "Email Notifications" section.
2. Click the "+ Create Merchant Template" button.
3. Add the required information:

• Event Type:

  • Booking confirmed
  • Booking cancelled
  • Booking edited
  • Booking pending
  • Subscription purchased
  • Gift card purchased

• Resource (optional): You can select specific resources. This is useful if, for example, you run a gym and have added coaches as resources. You can assign each dentist their email so they receive notifications for their specific resource.

• Recipients: Email recipients.

• Subject: Email subject.

• Body: The text that recipients will receive. You can learn about template variables and types here

Client templates

1. Go to the "Clients" section.
2. Click the "+ Create Client Template" button.
3. Add the required information:

• Event Type:

  • Booking confirmed
  • Booking cancelled
  • Booking edited
  • Booking pending
  • Subscription purchased
  • Gift card purchased

• Subject: Email subject.

• Body: The text that recipients will receive. You can learn about template variables and types here

• Attach QR Code (optional): You can enable this option to include a QR code for the reservation in the email. This can later be scanned, for example, by administration to find the booking.

Reminders

1. Go to the "Notifications" section.
2. Click "+ Create Reminder".
3. Add the required information:

• Hours Before Booking: The reminder will be sent this many hours before the booking starts.
• Subject.
• Body: Here you can write the message the client will receive. You can learn about template variables and types here

4. Click "Create Reminder".

Connecting Bookla to Framer

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

Setting the API region and Generating API key

1. Open your Bookla account.
2. Check whether your URL region is EU or US.
3. Select the same region in Framer.
4. Go to the Developers section in Bookla.
5. Click "Create API key".
6. Enter a name.
7. Select permissions:
   • Client Service
   • Client Resource
   • Guest Client
8. Copy the API key. It is shown 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 available dates and times.
3. Click "Continue".
4. Enter guest details.
5. Click "Book Now".

Conclusion

Congratulations! You have successfully set up a dental booking website using Bookla and Framer.

You have learned how to configure resources, services, booking rules, notifications, and connect the booking system to your Framer website.

With this setup, your clients can easily view availability and book appointments online. You can also customize the system further by adding additional plugins, payment providers, and booking settings based on your 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.