How to Add a Booking System to Mozello

In this tutorial, you will learn how to set up the Bookla Platform, configure your services and resources, create the booking component, and add it to your Mozello website.

Benefits

By adding Bookla to your Mozello website, you can:

• Allow customers to book your services online.
• Manage services, resources, working hours, and availability in one place.
• Accept bookings directly through your website.
• Customize the booking component to match your website.
• Add additional fields and plugins when needed.

Setting Up Bookla Platform

Before adding the booking system to Mozello, you need to set up your Bookla account.

Setting 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".

Setting Up a Service

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:
   • 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.
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.

Setting Up the Booking Component

1. Go here to open the Bookla component.

Setting the API Region and Generating an API Key

1. Go to your Bookla account.
2. Check whether your account URL uses the EU or US region.
3. Select the same region in the component.
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, but you can create as many API keys as you need.
9. Paste it into the component 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 the component under "Company ID".
4. Go to the "Services" section.
5. Select your service.
6. Copy the Service ID.
7. Paste it into the component under "Service ID".

The component also offers additional customization options. You can customize its appearance, add additional fields, and configure other settings. Learn more here.

Adding the Booking Component to Mozello

1. Open your Mozello website editor.
2. Go to the place where you want to add the booking component.
3. Click the "+" button and then select "Insert code".
4. Paste your component code into the code field.

Testing

After adding the booking component to your website, test it to make sure everything works correctly.

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

Your Bookla booking system is now set up on your Mozello website. Customers can select an available date and time and make bookings directly through your website.