How to Add Restaurant Reservations to Your Webflow Site with bookforXYZ

Effortlessly integrate a powerful table reservation system into your Webflow website. This guide will show you how to connect your bookforXYZ venue account to Webflow using our official app, allowing your customers to book tables directly from your site.

This integration is perfect for restaurants, cafes, bars, and any venue that needs to manage bookings on a Webflow website.

Before You Begin: Prerequisites

To successfully add the booking widget to your Webflow site, you will need two things:

    1. A bookforXYZ Venue Account: You must have an active account on our management portal  This is where you set up your business details, opening hours, table layouts, and manage all your incoming reservations. New to bookforXYZ? Sign up for a free account here. 
    2. A Webflow Website: You need an active Webflow site with a paid plan (as Webflow’s custom code and app features are typically required).

Step-by-Step Guide to Integration

Follow these simple steps to connect bookforXYZ to Webflow.

Step 1: Set Up Your Venue in bookforXYZ

Before you can take bookings, you must configure your venue.

    1. Log in to the bookforXYZ Management Portal.
    2. Complete your business profile, including your address and contact information.
    3. Set your Opening Hours so customers know when they can book.
    4. Create your Floor Plan to manage your tables and seating capacity.
    5. Once this is done, your venue is ready to accept bookings.

Step 2: Install the bookforXYZ App in Webflow

Next, you’ll add our app to your Webflow project.

    1. Log in to your Webflow dashboard.
    2. Go to the “Apps” tab inside Webflow designer or find in the Webflow App Marketplace.
    3. Search for “bookforXYZ” or “bookfor”.
    4. Click “Install App” and follow the prompts to authorize and add the app to your site.

Step 3: Connect Your Booking Button in the Webflow Designer

This is where you link a button on your site to the bookforXYZ booking widget.

    1. Open your website in the Webflow Designer.
    2. On your site, make sure you have a button you want to use for reservations (e.g., a button with the text “Book Now” or “Reserve a Table”). If you don’t have one, add a new Button element from the Add panel.
    3. Launch the bookforXYZ app from the Webflow designer.
    4. You will be prompted to login to your bookforXYZ account.
    5. Click continue on the next screen. App will install the necessary scripts to your site and will ask you to select your booking button.
    6. Confirm your selection.

Step 4: Publish Your Site and Test

The final step is to make your changes live and test the booking process.

    1. Click the “Publish” button in the top-right corner of the Webflow Designer.
    2. Once your site is live, open the published URL.
    3. Click the “Book Now” button you just configured.
    4. The booking widget should appear as a modal overlay on your page.
    5. Try making a test reservation to ensure everything works smoothly. Your test booking will appear in your management portal.

You’re All Set!

Congratulations! You are now ready to accept and manage table reservations directly from your Webflow website. All bookings will automatically appear in your management portal, where you can manage your floor plan, availability, and customer details.

 

 Frequently Asked Questions (FAQs)

  • Why do I see a spinner in the app panel saying “app is authenticating”?

    • This typically happens if your logged-in session to bookforXYZ Webflow app has expired. Let the spinner finish. If it persists, try in a separate browser tab.

  • Why is the app directing me to a Webflow authorization screen?

    • This happens if the app’s permission to access your Webflow site was revoked. Simply follow the on-screen prompts to re-authorize the bookforXYZ app, granting it the necessary permissions to function.

  • Why isn’t the booking modal launching on my live website?

    • There are a few common reasons for this. First, ensure you have published your site after making changes in the Designer. A common mistake is saving in the Designer but forgetting to publish.

    • If publishing didn’t fix it, check your booking button’s ID. Our app works by assigning the ID bookfor-xyz-button to your button. You can verify this by selecting the button in the Designer and checking the Settings Panel  > ID field.

    • Important: Do not add this ID manually. If the ID is missing or incorrect, the best solution is to re-select the button, open the Apps panel in Webflow, and use our app to “Change Booking Button” again. This ensures all settings are correct.

    • You can always uninstall the booking modal from the dashboard screen of our Webflow app and reinstall. 

    • Remember to republish your site after any of these changes.

Need help? Contact us