How to Embed Your Booking Calendar on Any Website

Why Embed Your Booking Calendar

Embedding your Meetario calendar directly on your website lets visitors book meetings without leaving your page. This increases conversion rates compared to sending people to an external link. It works on any website platform: plain HTML, React, Vue, Next.js, WordPress, Webflow, Squarespace, and more.

Step 1: Find Your Embed Code

Go to /app/event-types in your Meetario dashboard. On each event type card, you will see an Embed button (the </> icon). Click it to open the Embed & Share page.

This page provides ready-to-copy snippets for all embed methods, plus a live preview of how your embedded calendar will look.

Method 1: Inline Iframe

The simplest way to embed — paste this HTML anywhere on your page:

<iframe
  src="https://meetario.com/embed/your-username/event-slug"
  width="100%" height="700"
  frameborder="0"
  style="border:none; border-radius:12px;">
</iframe>

The embed URL uses /embed/ instead of /booking/. This serves a clean version of the booking page without the Meetario navigation bar, footer, or chat widget — just the calendar and booking form.

Adjust the height if needed. 700px works well for most layouts, but you can increase it to 800px or more if your event type has many custom fields.

WordPress

In the WordPress block editor (Gutenberg), add a Custom HTML block and paste the iframe code. In the classic editor, switch to the Text tab and paste it there.

Webflow

Add an Embed element from the components panel and paste the iframe code.

Squarespace

Add a Code Block to your page and paste the iframe code. Make sure "Display Source" is unchecked.

Method 2: Popup Button

Adds a floating "Book a Meeting" button in the bottom-right corner of your page. When clicked, the booking calendar opens in a modal overlay. Paste this one line anywhere in your HTML:

<script
  src="https://meetario.com/embed/meetario-widget.js"
  data-url="https://meetario.com/embed/your-username/event-slug"
  data-text="Book a Meeting"
  data-color="#4F46E5"
  async>
</script>

Customization Options

Attribute	Description	Default
data-url	Your embed URL (required)	—
data-text	Button text	Book a Meeting
data-color	Button color (any HEX code)	#4F46E5

Examples of custom text: "Schedule a Demo", "Book a Consultation", "Reserve Your Spot".

Examples of custom colors: #10B981 (green), #EF4444 (red), #F59E0B (amber), #000000 (black).

Method 3: React / Next.js Component

If you are building with React, use the embed URL in an iframe component:

function MeetarioBooking() {
  return (
    <iframe
      src="https://meetario.com/embed/your-username/event-slug"
      width="100%"
      height="700"
      style={{ border: "none", borderRadius: "12px" }}
    />
  );
}

You can use this component anywhere in your React, Next.js, Gatsby, or Remix application. It works in both client-side rendered and server-side rendered pages.

For Vue.js, use the same iframe approach inside a <template> block.

How It Works Technically

• The /embed/ URL renders the same booking page as /booking/, but with a minimal layout — no navigation bar, no footer, no chat widget, no cookie banner.
• The background is transparent, so the calendar blends into your site design.
• The embed page has noindex, nofollow meta tags — search engines will not index it (they index your main site instead).
• The X-Frame-Options header is removed for embed URLs, so the iframe loads on any domain.
• All booking functionality works identically: time slot selection, form submission, payment collection, confirmation emails.

Best Practices

• Use the popup button on landing pages — it does not take up space and is always accessible as visitors scroll.
• Use the inline iframe on dedicated booking pages — for "Schedule a Meeting" or "Contact Us" pages where the calendar is the main content.
• Match the button color to your brand — update data-color to use your brand color for a consistent look.
• Test on mobile — the embedded calendar is responsive, but verify it looks right on your specific mobile layout.
• Use one embed per page — multiple popup buttons on the same page can be confusing. If you need to offer several event types, link to your profile page instead.

Troubleshooting

Iframe is blank or shows an error

Check that the URL is correct. The format must be /embed/{your-username}/{event-slug}. You can verify by opening the URL directly in your browser — you should see the booking calendar without any navigation.

Iframe is too short and shows scrollbars

Increase the height attribute. Start with 700px and increase as needed. If your event type has many custom fields, 800px or 900px may work better.

Popup button not appearing

Make sure the data-url attribute is set. The script silently does nothing if this attribute is missing. Also check that no ad blocker is blocking the script — add meetario.com to your ad blocker whitelist.

Booking form submits but nothing happens

The booking is processed through the same API as the main site. Check that the event type is active (not paused or archived). If you have set booking limits, verify they are not exceeded.