Webflow is a popular website builder and CMS that you can use to build responsive landing pages or host your blog content.

You can embed MeetFox into your Webflow website in three different ways:

You can use all of the above embed options on any static page in Webflow. To speed up your design process, you can turn your Pop-up Button and Inline Embed into reusable components.


Pop Up Button

You can add a MeetFox Pop-up Button to your Webflow website by using the widget/HTML element when editing a webpage.

You'll need to first grab the custom code for your Pop-up Button from your MeetFox dashboard.

Click on 'Integrations' on the left-hand side of your MeetFox dashboard.

Under the 'Add to Website' section, click on 'Website'.

Select 'Pop-up button' from the list of website integration options.

Scroll down to the 'Copy Code' section and click on the 'Copy Code' button to copy your custom Pop-up Button code.

You can paste this code into your Webflow website to add a pop-up button that lets your website visitors book meetings directly from the page.

You'll need to access the Webflow website builder to add a MeetFox Pop-up Button to a page.

NB: Ensure that you have successfully logged into your Webflow account before you try to make changes to your website.

To access the Webflow website builder, click on 'Open Designer' on the project you want to edit in your Webflow dashboard.

Navigate to the page you want to edit and then scroll to the section where you'd like to add your Pop-up Button.

Click on 'Add Elements' on the left side bar of the Webflow website designer.

Scroll down the elements tab and select the 'Embed' element under the components category.

Drag the embed element to the area on the page where you'd like to place your booking button.

Select the 'HTML Embed Settings' and click on the settings icon.

Paste the custom code for your MeetFox Pop-up Button into the 'Custom Code' block.

Click on 'Save & Close'.

Publish the changes you made by clicking on the Publish button at the top of the Webflow designer, and selecting 'Publish to Selected Domains'.

And now you're Pop-up Button is ready!

To center the button on your page, change the display settings of the HTML Embed element to a 'Flex' layout. Then change the 'align' and 'justify' settings to 'center'.

You can further customize your Pop-up Button by editing the custom HTML code. Select the HTML Embed element and click on the settings icon.

Edit the CSS stylesheet embedded within the code block to customize the look and feel of your booking button.

To test out the pop-up functionality of your new Pop-up Button visit the live page outside of the Webflow website designer.


Inline Embed

You can add a MeetFox Inline Embed to your Webflow website by using the HTML Embed element when editing a webpage.

You'll need to first grab the custom code for your Inline Embed from your MeetFox dashboard.

Click on 'Integrations' on the left-hand side of your MeetFox dashboard.

Under the 'Add to Website' section, click on 'Website'.

Select 'Inline embed' from the list of website integration options.

Scroll down to the 'Copy Code' section and click on the 'Copy Code' button to copy your custom Pop-up Button code.

You can paste this code into your Webflow website to add a pop-up button that lets your website visitors book meetings directly from the page.

You'll need to access the Webflow website builder to add a MeetFox Pop-up Button to a page.

NB: Ensure that you have successfully logged into your Webflow account before you try to make changes to your website.

To access the Webflow website builder, click on 'Open Designer' on the project you want to edit in your Webflow dashboard.

Navigate to the page you want to edit and then scroll to the section where you'd like to add your Pop-up Button.

Click on 'Add Elements' on the left side bar of the Webflow designer.

Scroll down the elements tab and select the 'Embed' element under the components category.

Drag the embed element to the area on the page where you'd like to place your booking button.

Select the 'HTML Embed Settings' and click on the settings icon.

Paste the custom code for your MeetFox Inline Embed into the 'Custom Code' block.

Click on 'Save & Close'.

Publish the changes you made by clicking on the Publish button at the top of the Webflow designer, and selecting 'Publish to Selected Domains'.

And now you're Inline Embed is ready!

You should be able to preview your Inline Embed within the Webflow website designer. You can also open a live page to view your published changes.

Whenever you change your MeetFox meeting types, the content of the Inline Embed will update accordingly.


Pop-up Widget

You can embed a MeetFox Pop-up Widget by adding your custom code to the head of your Webflow website.

You'll need to first grab the custom code for your Pop-up Widget from your MeetFox dashboard.

Click on 'Integrations' on the left-hand side of your MeetFox dashboard.

Under the 'Add to Website' section, click on 'Website'.

Select 'Pop-up widget' from the list of website integration options.

Scroll down to the 'Copy Code' section and click on the 'Copy Code' button to copy your custom Pop-up Widget code.

You'll need to access the Webflow website builder to add your MeetFox Pop-up Widget to your site.

NB: Ensure that you have successfully logged into your Webflow account before you try to make changes to your website.

To access the Webflow website builder, click on 'Open Designer' on the project you want to edit in your Webflow dashboard.

Select 'Pages' from the left side of the Webflow designer.

Click on the 'Edit page settings' icon on the page you want to add your Pop-up Widget to.

Scroll down the page settings and paste your custom Pop-up Widget code into the 'Inside <head> tag' code block.

Click on 'Save' to save your changes.

Publish the changes you made by clicking on the Publish button at the top of the Webflow designer, and selecting 'Publish to Selected Domains'.

To test out the pop-up functionality of your new floating Pop-up Widget, visit the live page outside of the Webflow designer.

Whenever you change your MeetFox meeting types, the content of the Pop-up Widget will update accordingly.

Did this answer your question?