Embed Booking Widget

Embed meetergo booking pages directly in your website for a seamless customer experience.

Embedding Options

Method	Best For
Iframe	Dedicated booking pages, full integration
Popup	Call-to-action buttons, minimal footprint
Direct Link	Email links, simple integration

Iframe Embed

Embed a booking page inline:

<iframe
  src="https://cal.meetergo.com/john-smith/discovery-call"
  width="100%"
  height="700"
  frameborder="0"
  scrolling="no"
  style="border: none; min-height: 700px;"
></iframe>

Responsive Iframe

Make the iframe responsive:

<style>
.meetergo-embed {
  position: relative;
  width: 100%;
  padding-bottom: 80%; /* Adjust ratio as needed */
  height: 0;
  overflow: hidden;
}

.meetergo-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<div class="meetergo-embed">
  <iframe src="https://cal.meetergo.com/john-smith/discovery-call"></iframe>
</div>

React Component

function MeetergoEmbed({ userSlug, meetingSlug }) {
  const src = `https://cal.meetergo.com/${userSlug}/${meetingSlug}`;

  return (
    <iframe
      src={src}
      style={{
        width: '100%',
        height: '700px',
        border: 'none',
        minHeight: '700px'
      }}
      title="Book a meeting"
    />
  );
}

// Usage
<MeetergoEmbed userSlug="john-smith" meetingSlug="discovery-call" />

Open booking in a modal/popup:

<button onclick="openMeetergo()">Book a Meeting</button>

<script>
function openMeetergo() {
  const url = 'https://cal.meetergo.com/john-smith/discovery-call';
  const width = 600;
  const height = 700;
  const left = (window.innerWidth - width) / 2;
  const top = (window.innerHeight - height) / 2;

  window.open(
    url,
    'meetergo-booking',
    `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`
  );
}
</script>

<style>
.meetergo-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.meetergo-modal.open {
  display: flex;
}

.meetergo-modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  height: 80%;
  max-height: 700px;
  overflow: hidden;
  position: relative;
}

.meetergo-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 1;
}

.meetergo-modal iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<button onclick="openModal()">Book a Meeting</button>

<div
  id="meetergoModal"
  class="meetergo-modal"
  role="dialog"
  aria-modal="true"
  aria-label="Book a meeting"
  onclick="closeModalOutside(event)"
>
  <div class="meetergo-modal-content">
    <button
      class="meetergo-modal-close"
      onclick="closeModal()"
      aria-label="Close booking dialog"
    >&times;</button>
    <iframe
      src=""
      id="meetergoFrame"
      title="Booking calendar"
      style="width:100%;height:100%;border:none;"
    ></iframe>
  </div>
</div>

<script>
const modal = document.getElementById('meetergoModal');
const frame = document.getElementById('meetergoFrame');
let previouslyFocused = null;

function trapFocus(element) {
  const focusable = element.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];
  element.addEventListener('keydown', function onKeyDown(e) {
    if (e.key !== 'Tab') {
      if (e.key === 'Escape') closeModal();
      return;
    }
    if (e.shiftKey) {
      if (document.activeElement === first) { e.preventDefault(); last.focus(); }
    } else {
      if (document.activeElement === last) { e.preventDefault(); first.focus(); }
    }
  });
}

function openModal() {
  previouslyFocused = document.activeElement;
  frame.src = 'https://cal.meetergo.com/john-smith/discovery-call';
  modal.classList.add('open');
  modal.removeAttribute('hidden');
  document.body.style.overflow = 'hidden';
  modal.querySelector('.meetergo-modal-close').focus();
  trapFocus(modal);
}

function closeModal() {
  modal.classList.remove('open');
  modal.setAttribute('hidden', '');
  document.body.style.overflow = '';
  frame.src = '';
  if (previouslyFocused) previouslyFocused.focus();
}

function closeModalOutside(event) {
  if (event.target === modal) {
    closeModal();
  }
}
</script>

import { useState } from 'react';

function MeetergoModal({ userSlug, meetingSlug, children }) {
  const [isOpen, setIsOpen] = useState(false);
  const src = `https://cal.meetergo.com/${userSlug}/${meetingSlug}`;

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        {children || 'Book a Meeting'}
      </button>

      {isOpen && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            background: 'rgba(0,0,0,0.5)',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            zIndex: 1000
          }}
          onClick={() => setIsOpen(false)}
        >
          <div
            style={{
              background: 'white',
              borderRadius: '8px',
              width: '90%',
              maxWidth: '600px',
              height: '80%',
              maxHeight: '700px',
              position: 'relative'
            }}
            onClick={e => e.stopPropagation()}
          >
            <button
              onClick={() => setIsOpen(false)}
              style={{
                position: 'absolute',
                top: '10px',
                right: '10px',
                background: 'none',
                border: 'none',
                fontSize: '24px',
                cursor: 'pointer',
                zIndex: 1
              }}
            >
              &times;
            </button>
            <iframe
              src={src}
              style={{ width: '100%', height: '100%', border: 'none' }}
              title="Book a meeting"
            />
          </div>
        </div>
      )}
    </>
  );
}

// Usage
<MeetergoModal userSlug="john-smith" meetingSlug="discovery-call">
  Schedule a Demo
</MeetergoModal>

Pre-filling Information

Pass attendee data via URL parameters:

<iframe
  src="https://cal.meetergo.com/john-smith/discovery-call?email=jane@example.com&name=Jane%20Doe&company=Acme%20Inc"
  width="100%"
  height="700"
  frameborder="0"
></iframe>

Available Parameters

Parameter	Description
`email`	Attendee email
`name`	Full name
`firstname`	First name
`lastname`	Last name
`company`	Company name
`phone`	Phone number

Dynamic Pre-fill

function buildBookingUrl(userSlug, meetingSlug, attendee) {
  const baseUrl = `https://cal.meetergo.com/${userSlug}/${meetingSlug}`;
  const params = new URLSearchParams();

  if (attendee.email) params.set('email', attendee.email);
  if (attendee.name) params.set('name', attendee.name);
  if (attendee.company) params.set('company', attendee.company);

  return `${baseUrl}?${params.toString()}`;
}

// Usage
const url = buildBookingUrl('john-smith', 'discovery-call', {
  email: currentUser.email,
  name: currentUser.name,
  company: currentUser.company
});

Styling Tips

Match Your Brand

Customize the container to match your site:

.booking-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.booking-header {
  text-align: center;
  margin-bottom: 20px;
}

.booking-header h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.booking-header p {
  color: #6b7280;
  margin: 0;
}

<div class="booking-container">
  <div class="booking-header">
    <h2>Schedule a Call</h2>
    <p>Choose a time that works for you</p>
  </div>
  <iframe
    src="https://cal.meetergo.com/john-smith/discovery-call"
    width="100%"
    height="600"
    frameborder="0"
  ></iframe>
</div>

Best Practices

Use HTTPS - Always embed via HTTPS URLs

Set minimum height - Ensure enough space for the calendar (600-700px)

Pre-fill when possible - Reduce friction by passing known data

Test responsively - Check on mobile and tablet devices

Use loading states - Show a spinner while the iframe loads

Troubleshooting

Iframe Not Loading

Check the URL is correct
Ensure the meeting type is published
Verify the user slug exists

Scrollbars Appearing

Increase the iframe height or use scrolling="no" with sufficient height:

<iframe
  src="..."
  height="800"
  scrolling="no"
  style="overflow: hidden;"
></iframe>

Mobile Display Issues

Use responsive CSS and test on actual devices:

@media (max-width: 768px) {
  .meetergo-embed iframe {
    min-height: 800px; /* More space needed on mobile */
  }
}

Get Started

Core Concepts

Webhooks

Components

Recipes

Best Practices

Embed Booking Widget

Embedding Options

Iframe Embed

Responsive Iframe

React Component

Pre-filling Information

Available Parameters

Dynamic Pre-fill

Styling Tips

Match Your Brand

Best Practices

Troubleshooting

Iframe Not Loading

Scrollbars Appearing

Mobile Display Issues

​Embedding Options

​Iframe Embed

​Responsive Iframe

​React Component

​Popup Widget

​Simple Popup

​Modal Overlay

​React Modal Component

​Pre-filling Information

​Available Parameters

​Dynamic Pre-fill

​Styling Tips

​Match Your Brand

​Best Practices

​Troubleshooting

​Iframe Not Loading

​Scrollbars Appearing

​Mobile Display Issues

Embedding Options

Iframe Embed

Responsive Iframe

React Component

Popup Widget

Simple Popup

Modal Overlay

React Modal Component

Pre-filling Information

Available Parameters

Dynamic Pre-fill

Styling Tips

Match Your Brand

Best Practices

Troubleshooting

Iframe Not Loading

Scrollbars Appearing

Mobile Display Issues