Skip to main content
Embed meetergo booking pages directly in your website for a seamless customer experience.

​
Embedding Options

MethodBest For
IframeDedicated booking pages, full integration
PopupCall-to-action buttons, minimal footprint
Direct LinkEmail 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:

​
Simple 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>

​
React Modal Component

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

ParameterDescription
emailAttendee email
nameFull name
firstnameFirst name
lastnameLast name
companyCompany name
phonePhone 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 */
  }
}