Elementor is the most popular WordPress page builder. Over a million websites are built with Elementor.

You can also use the MeetFox plugin for WordPress to generate a convenient shortcode that you can place on any page or blog post.


Embed MeetFox with Elementor

To get started on embedding MeetFox through Elementor log into your MeetFox account.

Select Integrations from the left-side panel of your MeetFox dashboard.

Select Website under the add to website section of the integration options listed.

There are currently three options you can choose from when embedding MeetFox into your website.

You can use any combination of the above embed options on any page of your WordPress website.


Pop-up button

This option embeds a pop-up button on your website. When triggered, your booking page will pop up.

Select the Pop-up button tab from the website integration options.

You can customize the text and background color of your button and choose whether you want to hide or display your name and photo.

Once you've configured your button settings select Copy Code to copy the code block that will be embedded on your website.

Log in to the admin dashboard of your WordPress site.

Navigate to the Pages tab and hover over the name of the page you would like to customize. Then select Edit with Elementor.

Toggle the ELEMENTS tab within the Elementor sidebar and search for the HTML element.

Drag the HTML element into the section or column where you would like to place your pop-up button.

Paste your pop-up button code in the HTML Code field.

Select Update to apply your changes once you've customized the look and feel of your pop-up button.

Test out your button to make sure it works. And, If you want to have more than one button you can repeat this process and alter the text and colors according to your needs.

NB: You should see a live preview of your button on your page. However, certain browser extensions or addons as well as certain WordPress plugins might prevent the preview from properly displaying the changes of your button. Logging out of the admin dashboard after saving your changes will usually fix this display issue.


Inline Embed

This option embeds your booking page seamlessly on any page of your website.

Select the Inline embed tab from the website integration options.

You can choose whether you want to hide or display your name and photo.

Once you've configured your button settings select Copy Code to copy the code block that will be embedded on your website.

Log in to the admin dashboard of your WordPress site.

Navigate to the Pages tab and hover over the name of the page you would like to customize. Then select Edit with Elementor.

Toggle the ELEMENTS tab within the Elementor sidebar and search for the HTML element.

Drag the HTML element into the section or column where you would like to place your booking page inline.

Paste your pop-up button code in the HTML Code field.

Select Update to apply your changes once you've customized the look and feel of your pop-up button.

NB: You should see a live preview of the iframe you've embedded inline. However, certain browser extensions or addons as well as certain WordPress plugins might prevent the preview from properly displaying the changes of your button. Logging out of the admin dashboard after saving your changes will usually fix this display issue.


Pop-up Widget

This option embeds a floating widget at the bottom right corner of any page of your website. When clicked, your booking page will pop up.

Select the Pop-up Widget tab from the website integration options.

You can change the color of the widget background and icon and choose whether you want to hide or display your name and photo.

Once you've configured your widget settings select Copy Code to copy the code block that will be embedded on your website.

Log in to the admin dashboard of your WordPress site.

Navigate to the Pages tab and hover over the name of the page you would like to customize. Then select Edit with Elementor.

Toggle the ELEMENTS tab within the Elementor sidebar and search for the HTML element.

Drag the HTML element into the section or column where you would like to place your pop-up button.

It doesn't really matter where you place the HTML element for your pop-up widget, as it will appear on the bottom right corner the moment the page is loaded.

You can customize the background and icon colors within your code block. When you're satisfied with your changes, select the preview icon at the bottom of the Elementor sidebar to open up a page preview in a new browser tab.

You should see the pop-up widget at the bottom of your screen.

Test out the widget by selecting it to trigger the pop-up.


If you run into any issues integrating MeetFox with Elementor, contact us on our live chat service or email us at support@meetfox.com.

Did this answer your question?