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

1. Go to your Meeting Types
2. Click the "Share" button next to the meeting type you want to embed
3. Select the "Embed/Website" tab in the sharing window
4. Choose your preferred integration option. The easiest is "Inline Embed".
5. Click "Copy Code" to copy the embed code to your clipboard

The embed code contains everything needed to display your booking form on your website. Keep this code handy as we'll need it for the next steps.

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.

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.

Frequently Asked Questions (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.

Can I customize the colors of the booking form?

Yes! You can customize the appearance of your booking form directly in your meetergo account. Go to your account settings, then "Appearance," where you can adjust colors, fonts, and other styling options to match your brand. You can also use custom CSS.

Will the embedded form be mobile-responsive?

Yes, the meetergo booking form is fully responsive and will adapt to any devices.

Updated on: 28/04/2025