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.
Go to your Meeting Types
Click the "Share" button next to the meeting type you want to embed
Select the "Embed/Website" tab in the sharing window
Choose your preferred integration option. The easiest is "Inline Embed".
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.
Log in to your Webflow account and open your site's designer
Navigate to the page where you want to add the booking form
Click the "+" button in the left panel to open the Elements panel
Search for "Embed" in the Elements panel
Drag the "Embed" element to your desired location on the page
With the Embed element selected, paste your meetergo embed code into the "Embed Code" field in the settings panel
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.
For optimal display of your booking form, you'll need to adjust the size of the embed element:
With the embed element selected, look for the "Element Settings" in the right panel
Set an appropriate height for the element (we recommend starting with at least 700px)
For width, you can either use a fixed width or a percentage (such as 100% to fill the container)
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.
Once you're satisfied with how the booking form looks and functions:
Click the "Publish" button in the top right corner of the designer
Review your changes in the preview
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.
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.
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.
Yes, the meetergo booking form is fully responsive and will adapt to any devices.
Step 1: Getting Your Embed Code
Go to your Meeting Types
Click the "Share" button next to the meeting type you want to embed
Select the "Embed/Website" tab in the sharing window
Choose your preferred integration option. The easiest is "Inline Embed".
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
Log in to your Webflow account and open your site's designer
Navigate to the page where you want to add the booking form
Click the "+" button in the left panel to open the Elements panel
Search for "Embed" in the Elements panel
Drag the "Embed" element to your desired location on the page
With the Embed element selected, paste your meetergo embed code into the "Embed Code" field in the settings panel
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:
With the embed element selected, look for the "Element Settings" in the right panel
Set an appropriate height for the element (we recommend starting with at least 700px)
For width, you can either use a fixed width or a percentage (such as 100% to fill the container)
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:
Click the "Publish" button in the top right corner of the designer
Review your changes in the preview
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
Thank you!