Embedding your booking page in Webflow

If you want to integrate meetergo's appointment booking feature directly on your Webflow website, you're in the right place. This guide will walk you through the simple process of embedding your meetergo booking page into your Webflow site, allowing visitors to schedule appointments without leaving your website.

Step 1: Getting Your Embed Code

Copy the snippet for your meeting type as described in Get your embed code. Inline Embed is the easiest option for Webflow. Keep the code on your clipboard for the next step.

Step 2: Adding the Embed Code to Webflow

1. Log in to your Webflow account and open your site's designer
2. Navigate to the page where you want to add the booking form
3. Click the "+" button in the left panel to open the Elements panel
4. Search for "Embed" in the Elements panel
5. Drag the "Embed" element to your desired location on the page
6. With the Embed element selected, paste your meetergo embed code into the "Embed Code" field in the settings panel
7. Click "Save" to apply the changes

Your booking form will now appear in the designer preview. You may need to adjust the size of the embed element to ensure the entire booking form is visible.

Step 3: Adjusting the Embed Size and Style

For optimal display of your booking form, you'll need to adjust the size of the embed element:

1. With the embed element selected, look for the "Element Settings" in the right panel
2. Set an appropriate height for the element (we recommend starting with at least 700px)
3. For width, you can either use a fixed width or a percentage (such as 100% to fill the container)
4. If needed, add padding around the element to ensure proper spacing

The embed will inherit the styling of your Webflow site, but you can adjust the container's appearance using Webflow's style panel to match your brand.

Styling

The booking form itself is responsive and adapts to any screen size. Its colors, fonts, and logo come from your meetergo account rather than from Webflow. See Customize branding.

Publishing Your Changes

Once you're satisfied with how the booking form looks and functions:

1. Click the "Publish" button in the top right corner of the designer
2. Review your changes in the preview
3. Confirm and publish your updated website

After publishing, your website visitors will be able to schedule appointments directly through the embedded meetergo form without ever leaving your website.

FAQ

Why isn't my booking form displaying correctly?

If your booking form doesn't display properly, check the height of your embed element. meetergo booking forms typically need at least 700px of height to display all elements correctly. Also, ensure your embed code was pasted without any modifications.