meetergomeetergo Help

Embedding Overview

Add meetergo scheduling to your website with inline embeds, popups, sidebars, video, and conversion widgets

Updated on August 12, 2026

Embed your meetergo booking page directly on your website so visitors can schedule without leaving your site. meetergo offers several embedding methods to fit your design needs.

Get your embed code

meetergo generates a ready-made snippet for every meeting type, so you do not have to write the HTML yourself:

  1. Go to Meeting Types.
  2. Click Share next to the meeting type you want to embed.
  3. Open the Embed/Website tab.
  4. Choose the embed style you want. Inline Embed is the simplest. You can also use a popup button, text popup, sidebar, video, or Conversion Widget.
  5. Click Copy Code.

The copied snippet already contains your booking link and the integration script. Paste it into your website wherever the booking form should appear, or follow one of the platform-specific guides.

Quick Start

If you prefer to write the markup yourself, add this script before </body> on your website:

<script src="https://cdn.meetergo.com/v4/integration.js"></script>

Then configure your embed using one of the methods below.

Embedding Methods

MethodDescriptionBest For
Inline IframeBooking page embedded in your pageDedicated booking pages
Modal ButtonAny element opens a booking modalCustom buttons, links
Floating ButtonCorner widget that opens modalAlways-visible CTA
SidebarCollapsible side panelProfessional sites
Video WidgetVideo player with booking CTASales pages
Conversion WidgetBranded contact and booking cardConversion-focused pages

The Conversion Widget is configured and saved separately from the other embed styles. See Add a Conversion Widget to your website for setup, availability, domain, and WhatsApp details.

1. Auto-Resize Iframe (Inline)

Display your booking page directly within your website content. The iframe automatically adjusts its height to fit the content.

Code

<div class="meetergo-iframe" link="https://cal.meetergo.com/your-booking-link"></div>

<script src="https://cdn.meetergo.com/v4/integration.js"></script>

Options

AttributeDescriptionExample
linkYour booking page URLhttps://cal.meetergo.com/yourname
data-alignHorizontal alignmentcenter, left, right
data-resizeEnable auto-resizetrue (default), false

Example with Options

<div
  class="meetergo-iframe"
  link="https://cal.meetergo.com/your-link"
  data-align="center"
  data-resize="true"
></div>

2. Modal Booking Buttons

Turn any HTML element into a booking trigger. Clicking opens your booking page in a modal overlay.

Code

<button class="meetergo-modal-button" link="https://cal.meetergo.com/your-booking-link">
  Book Now
</button>

<script src="https://cdn.meetergo.com/v4/integration.js"></script>

Works with Any Element

<!-- Button -->
<button class="meetergo-modal-button" link="https://cal.meetergo.com/your-link">
  Schedule a Call
</button>

<!-- Link -->
<a class="meetergo-modal-button" link="https://cal.meetergo.com/your-link">
  Book a consultation
</a>

<!-- Div -->
<div class="meetergo-modal-button" link="https://cal.meetergo.com/your-link">
  Click to schedule
</div>

3. Floating Action Button

A button that floats in a corner of your page. Supports animations and full customization.

Code

<script>
  window.meetergo = window.meetergo || function(){ (window.meetergo.q = window.meetergo.q || []).push(arguments); };
  meetergo('init', {
    floatingButton: {
      position: "bottom-right",
      link: "https://cal.meetergo.com/your-booking-link",
      text: "Book Appointment",
      backgroundColor: "#4F46E5",
      textColor: "#FFFFFF",
      animation: "pulse"
    }
  });
</script>
<script src="https://cdn.meetergo.com/v4/integration.js"></script>

Options

OptionValuesDescription
positionbottom-right, bottom-left, top-right, top-leftButton placement
textStringButton label
linkURLYour booking page
backgroundColorHex colorButton background
textColorHex colorText color
animationpulse, bounce, slide-in, noneButton animation
iconIcon nameLucide icon to display

4. Collapsible Sidebar

A professional side panel that slides out when clicked. Supports left or right positioning.

Code

<script>
  window.meetergo = window.meetergo || function(){ (window.meetergo.q = window.meetergo.q || []).push(arguments); };
  meetergo('init', {
    sidebar: {
      position: "right",
      link: "https://cal.meetergo.com/your-booking-link",
      buttonText: "Book Meeting",
      backgroundColor: "#4F46E5",
      textColor: "#FFFFFF"
    }
  });
</script>
<script src="https://cdn.meetergo.com/v4/integration.js"></script>

Options

OptionValuesDescription
positionleft, rightWhich edge of the screen
linkURLYour booking page
buttonTextStringText on the collapsed tab
buttonIconIcon nameLucide icon
backgroundColorHex colorTab background
textColorHex colorTab text color
widthCSS valuePanel width (e.g., 400px)

5. Video Widget

An interactive video player with booking call-to-action. Includes mute button and progress bar.

Code

<script>
  window.meetergo = window.meetergo || function(){ (window.meetergo.q = window.meetergo.q || []).push(arguments); };
  meetergo('init', {
    videoEmbed: {
      videoSrc: "https://example.com/your-video.mp4",
      posterImage: "https://example.com/thumbnail.jpg",
      bookingLink: "https://cal.meetergo.com/your-link",
      bookingCta: "Book a Demo",
      bookingCtaColor: "#4F46E5",
      position: "bottom-right",
      isRound: true
    }
  });
</script>
<script src="https://cdn.meetergo.com/v4/integration.js"></script>

Global Configuration

Configure meetergo with the window.meetergoSettings object before loading the script:

<script>
  window.meetergoSettings = {
    company: "your-company",
    enableAutoResize: true,
    iframeAlignment: "center",

    // Pre-fill form fields
    prefill: {
      firstname: "John",
      lastname: "Smith",
      email: "john@example.com"
    },

    // Callbacks
    onSuccess: function(data) {
      console.log("Booking created:", data);
    },
    onEvent: function(event) {
      console.log("Event:", event);
    }
  };
</script>
<script src="https://cdn.meetergo.com/v4/integration.js"></script>

JavaScript API

Control the embed programmatically:

// Pre-fill form data
window.meetergo.setPrefill({
  firstname: "Jane",
  lastname: "Doe",
  email: "jane@example.com"
});

// Open booking modal programmatically
window.meetergo.launchScheduler("https://cal.meetergo.com/your-link", prefillData);

// Open/close modal
window.meetergo.openModal();
window.meetergo.closeModal();

// Re-parse iframes after DOM updates
window.meetergo.parseIframes();

// Cleanup (memory management)
window.meetergo.destroy();

Pre-filling Form Fields

Pass attendee data to skip form fields:

Via URL Parameters

https://cal.meetergo.com/your-link?firstname=John&lastname=Smith&email=john@example.com

Via JavaScript

window.meetergoSettings = {
  prefill: {
    firstname: "John",
    lastname: "Smith",
    email: "john@example.com",
    phone: "+1234567890"
  }
};

See Prefill Forms with URL Parameters for all available fields.

Callbacks

Handle booking events in your code:

onSuccess

Called when a booking is completed:

window.meetergoSettings = {
  onSuccess: function(data) {
    // data contains booking details
    console.log("Appointment ID:", data.appointmentId);
    console.log("Meeting type:", data.meetingTypeName);

    // Track conversion
    analytics.track("booking_completed", data);
  }
};

onEvent

Called for various embed events:

window.meetergoSettings = {
  onEvent: function(event) {
    console.log("Event type:", event.type);
  }
};

Platform-Specific Guides

Troubleshooting

Embed Not Appearing

  1. Verify the script URL is correct
  2. Check that window.meetergoSettings is defined before the script loads
  3. Ensure the booking link URL is valid
  4. Check browser console for errors

Modal Not Opening

  1. Confirm element has class="meetergo-modal-button"
  2. Verify link attribute is present
  3. Check for JavaScript conflicts

Auto-Resize Not Working

  1. Ensure data-resize is not set to false
  2. Check parent container doesn't have fixed height
  3. Call window.meetergo.parseIframes() after dynamic DOM updates

Pre-fill Not Working

  1. Check field names match exactly (case-sensitive)
  2. Ensure prefill is set before script loads or use setPrefill() API
  3. URL-encode special characters in URL parameters

Full Documentation

For TypeScript types, advanced configuration, and more examples, see the meetergo-integration repository.

Was this article helpful?

Let us know if this article answered your questions.

Related articles