Embedding Overview

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

Quick Start

Add this script before </body> on your website:

<script src="https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

Then configure your embed using one of the methods below.

Embedding Methods

---

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://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

Options

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://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.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.meetergoSettings = {
    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://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

Options

---

4. Collapsible Sidebar

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

Code

<script>
  window.meetergoSettings = {
    sidebar: {
      position: "right",
      link: "https://cal.meetergo.com/your-booking-link",
      buttonText: "Book Meeting",
      backgroundColor: "#4F46E5",
      textColor: "#FFFFFF"
    }
  };
</script>
<script src="https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"></script>

Options

---

5. Video Widget

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

Code

<script>
  window.meetergoSettings = {
    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://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.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://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.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

• WordPress
• Webflow
• Squarespace

---

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.