All Posts
TutorialsMarch 5, 2026

How to Embed a Booking Widget on Your Website (Any Platform)

Adding a booking widget to your website converts visitors into clients. Here's how to embed one on WordPress, Wix, Squarespace, or any HTML site.

Website IntegrationTutorialBooking WidgetEmbed

Your website gets traffic. Some visitors are ready to book. But if they have to leave your site to schedule, many won't bother. An embedded booking widget keeps them on your site and converts interest into action.

What Is a Booking Widget?

A booking widget is a small piece of code you add to your website that displays your availability and lets visitors book directly. It can appear as:

  • Inline embed — A booking form embedded directly in your page content
  • Pop-up — A button that opens a booking overlay when clicked
  • Floating button — A persistent "Book Now" button in the corner of every page

Getting Your Embed Code

In most scheduling tools (including Meetlr), you'll find the embed code in your settings:

  1. Go to your booking page settings
  2. Click "Embed" or "Add to website"
  3. Choose your embed style (inline, pop-up, or floating button)
  4. Copy the generated code snippet

Platform-Specific Instructions

WordPress

  1. Edit the page where you want the widget
  2. Add a "Custom HTML" block (or switch to the HTML editor)
  3. Paste the embed code
  4. Save and preview

For the floating button option, paste the code in Appearance → Theme Editor → footer.php (before the closing </body> tag), or use a plugin like "Insert Headers and Footers."

Wix

  1. Open the Wix Editor
  2. Click "Add" → "Embed Code" → "Custom Embeds" → "Embed a Widget"
  3. Paste your booking widget code
  4. Resize and position as needed
  5. Publish

Squarespace

  1. Edit the page where you want the widget
  2. Add a "Code" block
  3. Paste the embed code
  4. Save

For site-wide elements (floating button), go to Settings → Advanced → Code Injection and paste in the Footer section.

Shopify

  1. Go to Online Store → Themes → Edit Code
  2. For a specific page, edit the page template
  3. For site-wide, edit theme.liquid before </body>
  4. Paste the embed code
  5. Save

Any HTML Site

Simply paste the embed code wherever you want the widget to appear in your HTML. For inline embeds, place it within your page content. For floating buttons, place it just before </body>.

Best Practices

Placement Matters

  • Above the fold on service pages — Where buying intent is highest
  • After your value proposition — Let them read why, then let them act
  • Contact page — Replace or complement your contact form
  • Homepage — A clear "Book a Free Call" CTA

Keep It Fast

Booking widgets load asynchronously, so they shouldn't slow down your page. But test your page speed after adding the widget to make sure.

Mobile Test

Always preview the embedded widget on a mobile device. It should be fully functional and easy to use on small screens.

The Impact

Websites with embedded booking widgets see 2-3x more bookings than those with just a "Contact Us" link. The reason is simple: you're reducing friction from multiple steps (leave site → find booking page → navigate → book) to one step (book right here).

Step-by-step

Need help setting things up?

Browse the practical guides — events, availability, integrations, payments.

Browse guides

Ready to simplify your scheduling?

Create your free booking page in under 5 minutes. No credit card required.

Get Started — Free