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" onclick="closeModalOutside(event)">
  <div class="meetergo-modal-content">
    <button class="meetergo-modal-close" onclick="closeModal()">&times;</button>
    <iframe src="" id="meetergoFrame"></iframe>
  </div>
</div>

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

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

function closeModal() {
  modal.classList.remove('open');
  document.body.style.overflow = '';
  frame.src = '';
}

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/[email protected]&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 */
  }
}