Subscriptions in Framer

Introduction

The Bookla Subscriptions widget allows you to offer subscription-based services directly through your Framer website. Clients can purchase subscriptions, access included services, and make bookings through a simple booking flow.

This guide will explain how to configure subscriptions in Bookla, connect the required components in Framer, and test the complete subscription purchase process.

Benefits

Using Bookla Subscriptions with Framer allows you to:

• Sell subscription plans directly from your website.
• Automate recurring payments and subscription renewals.
• Create flexible subscription rules based on visits, days, hours, and resources.
• Allow clients to easily purchase and use their subscriptions.
• Customize subscription confirmation designs.
• Integrate booking functionality into your existing Framer website without additional development.

Prerequisites

Before using the Subscriptions widget from the Bookla Plugin, ensure you have the following:

Create a Company in Bookla

This step is essential as it links your company ID to the Framer widget.

• Open Bookla Platform and click "Create Account".
• Use your credentials to create an account or log in.
• Create your company or use an invitation code to open it.

Set Up Resources

1. Go to your Bookla account.
2. Go to the "Resources" section.
3. Click the "+ New Resource" button.
4. Enter the title for the resource. (Resources are entities that provide the service.)
5. If needed, you can also change the resource colour.
6. 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 colour.
4. Click "Next".
5. Select the service type.
6. Click "Next".
7. Set the service duration.
8. Choose the booking policy.
9. Click "Create".

Linking Service With Resource

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

Configuring Stripe Settings

To allow clients to purchase subscriptions, you need to set up Stripe payments.

1. Go to "Plugins" in the Bookla Platform.
2. Connect your payment provider (Stripe, Mercado Pago, etc.).
3. Test the payment flow with a test transaction.

See Payment Setup Tutorial

Set Up the Subscriptions

1. Go to the "Subscriptions" section in the sidebar.
2. Click the "New subscription" button.
3. Enter the subscription information:
   • Name: Subscription title.
   • Duration: How long the subscription will be active.
   • Services: Select the services this subscription applies to.
   • Resources: Select the resources this subscription applies to.
   • Limits: Set limitations for the subscription, such as:
     • Days: The days the subscription will be active.
     • Hours: The working hours for the subscription.
     • Visits: The number of visits included in the subscription.
     • Max duration: The maximum duration for flexible services that clients can book.
   • Recurring bookings: Automatically creates bookings for the entire subscription period when purchased.
   • Renew period: How long clients can renew their subscription after it expires.
   • Active from and Active until: The time frame when the subscription can be purchased and used.
   • Rollover settings: Enable if you want unused visits to carry over to the next billing period.
   • Recurring settings: Enable to create a recurring subscription and fill in the fields.
     • Interval: How often the subscription renews (Day, Week, Month, Year).
     • Count: Interval multiplier (for example, 2 months).
     • Stripe Product ID: Product ID from Stripe (starts with prod_).
     • Stripe Price ID: Price ID from Stripe (starts with price_).
4. Click "Create".

How to Add a Design for a Subscription

You can add a custom design that will be sent to the client as a PDF with the confirmation email.

1. Find the subscription you want to edit.
2. Click the "Add design" button.
3. Upload a PDF file.
4. Add Bookla elements such as the expiration date and code.
5. Customize the design if needed.
6. Click "Save template" when finished.

How to set up pricing for a subscription

1. Go to the "Pricing" section
2. Select the currency and click "Save"
3. Add a tax rate if needed and choose "inclusive" if tax is included, then click "Save"
4. Click "Create price"
5. Enter the price
6. Optionally add a compared price and priority
7. Select the subscription this price applies to
8. Click "Create"

How to add capacity for subscriptions

In this section, you will learn how to control how many clients can use a subscription.

1. Go to the "Capacity" section
2. Click "Create Capacity"
3. Fill in the details:
   • Capacity: Maximum number of clients
   • Subscription(s): Select applicable subscriptions
   • Active from and Active till: Define when this rule applies
4. Click "Create"

Setting Up Framer

1. Go to the Framer page.
2. Click "Plugins".
3. Search for the "Bookla" plugin and click "Integrate".
4. Choose the Subscription component and drag and drop it.
5. Change the width of the component.

Setting the API Region, Generating API Key, and Adding the Company ID

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".
10. Go to the "Company" section in Bookla.
11. Copy the Company ID.
12. Paste it into Framer under "Company ID".

Adding the Booking Component

1. Go to the page where you want to add the booking component.
2. Click "Plugins".
3. Search for the "Bookla" plugin and click "Integrate".
4. Choose the component with the same type as your service and drag and drop it.
5. Change the width of the component.

Setting the API Region, API Key, Company ID, and Service ID

1. Open your Bookla account.
2. Check whether your URL region is EU or US.
3. Select the same region in Framer.
4. Paste the API key under "API key".
5. Paste the Company ID under "Company ID".

Add Code Field

To allow clients to use the subscription, you need to enable the code field.

1. Click "Code field".
2. Click "Yes".
3. Edit the texts if needed.

Testing the Component

1. Click the "Play" button.
2. Select the subscription.
3. Click the "Continue" button.
4. Enter guest details.
5. Click the "Purchase subscription" button.

6. Go to the page where you have the booking component.
7. Select the date and time.
8. Enter your subscription code and click "Continue".
9. Enter your first name, last name, and email, then click "Make booking".

Conclusion

Your Bookla Subscription widget is now connected to your Framer website. Clients can purchase subscriptions, use included benefits, and make bookings directly through your website.