How to Embed a Booking System on WordPress

WordPress powers over 40% of all websites, and if yours is one of them, adding online booking is one of the highest-impact changes you can make. Instead of directing visitors to a separate booking site, you embed the scheduling interface right on your WordPress page — keeping visitors on your site and making the booking process seamless.

This guide shows you exactly how to embed a booking system on WordPress using three different methods.

What You'll Learn

• How to embed booking using the WordPress block editor (Gutenberg)
• How to add booking to Elementor and other page builders
• How to use the classic editor for booking embeds
• How to add a floating "Book Now" button site-wide

Method 1: WordPress Block Editor (Gutenberg)

The built-in block editor is the simplest approach and requires no plugins:

Step 1: Get your embed code from your scheduling platform. This is typically an HTML snippet containing an iframe or JavaScript tag.

Step 2: Open the WordPress page where you want the booking widget. Click the "+" button to add a new block.

Step 3: Search for "Custom HTML" and select it. Paste your embed code into the HTML block.

Step 4: Click "Preview" to verify the booking widget renders correctly. Then publish or update the page.

For JavaScript-based embeds that need to load in the page header, go to your theme's settings or use a plugin like "Insert Headers and Footers" to add the script tag to your site's head section.

Method 2: Elementor and Page Builders

If you use Elementor, Divi, Beaver Builder, or another page builder:

Elementor: Drag an "HTML" widget onto your page layout. Paste the booking embed code into the HTML content field. Adjust the widget's width and padding to match your design.

Divi: Add a "Code" module to your section. Paste the embed code in the content area. Use the module's design settings to control spacing.

Beaver Builder: Add an "HTML" module. Paste your code and adjust the container width as needed.

All major page builders handle HTML embeds well. The key is wrapping the embed in a container that constrains its width to your content area — typically 600–800 pixels for inline booking widgets.

Method 3: Classic Editor

If you're still using the classic WordPress editor:

Step 1: Open your page and switch to the "Text" tab (not "Visual"). The Visual tab strips out script tags and can break embed codes.

Step 2: Paste your embed code where you want the booking widget to appear.

Step 3: Switch back to "Visual" to verify placement, then publish. Avoid editing the embed in Visual mode as it may alter the code.

Add a Floating "Book Now" Button

Beyond embedding on a single page, add a persistent booking button across your entire site:

• Option 1: Most scheduling platforms provide a popup widget script. Add this to your theme's header (via Appearance → Theme Editor, or a header/footer plugin) to display a floating button on every page
• Option 2: Add a "Book Now" link to your WordPress navigation menu pointing to your booking page
• Option 3: Use a sticky call-to-action plugin and link it to your booking page URL

The floating button approach works well because it's always visible regardless of which page the visitor is browsing. For more embedding strategies, see our guide on adding scheduling to any website.

Troubleshooting Common Issues

If your embed isn't working correctly, check these common problems:

• Embed not displaying: Make sure you're pasting the code in the HTML/Text mode, not the Visual editor which strips scripts
• Widget too narrow or wide: Wrap the embed in a div with a max-width style to constrain its size
• Mixed content warnings: Ensure your embed URL uses HTTPS. All modern scheduling platforms support this
• Caching conflicts: If you use a caching plugin (WP Rocket, W3 Total Cache), clear your cache after adding the embed
• Security plugin blocking scripts: Some security plugins block external JavaScript. Whitelist your scheduling platform's domain

How SchedulingKit Helps

SchedulingKit's embed widget is designed for easy WordPress integration. Copy one line of code, paste it into any WordPress editor method, and you have a fully functional booking system on your site. It supports inline embeds, popup widgets, and floating buttons — all responsive and mobile-friendly. The widget loads asynchronously so it won't slow down your WordPress site.

Frequently Asked Questions

Do I need a WordPress booking plugin?

Not necessarily. If your scheduling platform provides an embed code, you can add booking to WordPress without any plugin. Plugins are useful if you want deeper WordPress integration like shortcodes or WooCommerce compatibility.

Will the booking embed slow down my WordPress site?

A well-built embed loads asynchronously after your main content, so page speed impact is minimal. Test your page speed with Google PageSpeed Insights before and after adding the embed to verify.

Can I embed different booking pages on different WordPress pages?

Yes. Create separate booking pages in your scheduling platform (for different services, locations, or staff) and embed each one on the relevant WordPress page using unique embed codes.