Quick Start Guide

Announcement: We've launched v2 of FlowBookings which brings many new features including integrated payments, booking calendar, holidays, reports, and a new Webflow app to create booking forms. Check out the FlowBookings website to learn more about what's new.

FlowBookings now has a native Webflow app that lets you insert booking forms from the Webflow designer with just a click.

In this article, we'll quickly go through the fastest way to set up FlowBookings so you can start collecting bookings on your Webflow site.

Step 1. Install The FlowBookings Webflow App

To get started, go to the Webflow Apps page and search for the FlowBookings app on the page.

Click on the Install App button and choose the site where you want to install the app. Authorize the app and the FlowBookings app will be installed on your Webflow site.

Once installed, log in to the Webflow app with your FlowBookings account credentials.

Step 2. Create A Service & Category

To collect bookings from your form, you'll need to have atleast one active service that the customers can select while filling out the form.

Before creating a service, you'll need to create a category to which your service will be assigned.

Follow these instructions to create a Category in FlowBookings:

1. Go to the Services page and click on the Manage Categories button.

2. This opens a pop-up window where you can view/add/delete categories. Click on the (Add +) button to add a category.

3. Enter the name of your category and click on the Save button.

Once your Service Category is created, it'll be visible on the list in the Manage Categories menu. You can also edit or delete existing categories from this menu.

Now that you've created a category, let's go ahead and create your first service.

Follow these instructions to create a service in FlowBookings:

1. Go to the Services page and click on the New Service button.

2. Fill in the service information such as service name, category, duration, buffer time, image, and description.

3. Switch to the Working Hours tab and set the working hours and breaks for the service.

Note: The Working Hours by default are set from the Global Working Hours. Only change the working hours if you want to explicitly set them for a service.

1. Once you're done, click on the Save Changes button.

Once your service is created, it'll be visible on the Services page.

Step 2. Insert The Booking Form On Your Webflow Site

The second step is to add a booking form to your Webflow site.

Here are the steps to building a booking form in FlowBookings:

1. Open the FlowBookings app on your Webflow site.

2. If you're not logged in, use the FlowBookings account credentials to log in to the app.

3. Once logged in, you can access the form builder where you can select the type of booking form to insert to the page.

4. Then, click on the 'Copy Cloneable & Insert Script' button. This will automatically insert the FlowBookings form script to the page and the form cloneable will be copied to your clipboard. You'll see a success notification message once the clonable is copied and the script is inserted.

5. Lastly, insert the cloneable you just copied to your page by clicking Ctrl+V (Cmd+V). Your form will be added to the page and then you can customize its design according to your needs.

6. Go to the Form Builder page and select the template you want to use for your form. You can customize this template later on in Webflow.

Now, you can start collecting bookings on your Webflow site! That's all you need to do to set up FlowBookings.

You can go a step further and customize your booking form. You can also add more services, change global settings, or edit the notification emails as well.

Feel free to check out other articles to learn more about how FlowBookings works and how you can use it to its full potential.