meetergomeetergo Help

Embedding your booking page in Framer

Add meetergo scheduling to your Framer website with the meetergo plugin or code components

Updated on February 5, 2026

If you want to add meetergo scheduling directly to your Framer website, you have two options: the meetergo Framer plugin (recommended) or code components you paste manually. Both let visitors book appointments without leaving your site.

Option 1: meetergo Framer Plugin (Recommended)

The meetergo plugin integrates directly into the Framer editor. It walks you through a simple wizard to configure and insert a booking embed onto your canvas.

Step 1: Install the Plugin

  1. Open your Framer project
  2. Go to Plugins in the toolbar (or press ⌘ + / and search "meetergo")
  3. Find meetergo and click Install

Step 2: Open the Plugin

  1. Click on the meetergo plugin in your plugins panel
  2. Enter your meetergo booking URL (e.g. https://cal.meetergo.com/your-link)
  3. Click Continue

Step 3: Choose an Embed Type

Select one of four embed types:

Embed TypeDescriptionBest For
Inline EmbedBooking page rendered directly in your layoutDedicated booking pages
Popup ButtonStyled button that opens a booking modalCTAs, landing pages
Floating ButtonCorner-anchored button with animationAlways-visible booking access
SidebarCollapsible panel from left or right edgeProfessional sites

Step 4: Customize

Depending on the embed type you chose, you can configure:

  • Button text — Label shown on buttons and tabs
  • Background color — Button/tab background
  • Text color — Button/tab text
  • Position — Corner placement (floating) or edge (sidebar)
  • Animation — Pulse, bounce, or slide-in (floating button)
  • Panel width — Sidebar width (e.g. 400px)
  • Border radius — Button corner rounding (popup)

Step 5: Insert

Click Add to Site. The plugin creates a code component in your project and places it on your canvas. You can resize and reposition it like any other layer.

Option 2: Code Components (Manual)

If you prefer not to install a plugin, you can use pre-built code components instead.

Quick Start: Remix Link

The fastest way is to use our Remix link — it copies all 4 components into your project in one click:

Open meetergo Components in Framer

After remixing, you'll find the components under Assets → Code in the left panel. Drag them onto your canvas and configure the booking URL in the right panel.

Manual: Adding a Code Component

If you prefer to add components one by one:

  1. In the Framer editor, go to Assets → Code → New Code Component
  2. Paste one of the component codes below
  3. Drag the component from the Assets panel onto your canvas
  4. Configure it using the property controls in the right panel

Inline Embed

Renders the full booking page directly on your Framer page.

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useRef } from "react"

const SCRIPT_URL = "https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"

function loadScript() {
  if (document.querySelector(`script[src="${SCRIPT_URL}"]`)) return
  const s = document.createElement("script")
  s.src = SCRIPT_URL
  s.async = true
  document.body.appendChild(s)
}

export default function MeetergoInline({ bookingUrl, minHeight, alignment }) {
  const loaded = useRef(false)

  useEffect(() => {
    loadScript()
    loaded.current = true
  }, [])

  useEffect(() => {
    if (!loaded.current) return
    window.meetergo?.parseIframes?.()
  }, [bookingUrl, alignment])

  return (
    <div
      className="meetergo-iframe"
      link={bookingUrl}
      data-align={alignment}
      style={{ width: "100%", minWidth: 330, minHeight }}
    />
  )
}

MeetergoInline.defaultProps = {
  bookingUrl: "https://cal.meetergo.com/your-booking-link",
  minHeight: 700,
  alignment: "center",
}

addPropertyControls(MeetergoInline, {
  bookingUrl: {
    type: ControlType.String,
    title: "Booking URL",
    placeholder: "https://cal.meetergo.com/...",
  },
  minHeight: {
    type: ControlType.Number,
    title: "Min Height",
    defaultValue: 700,
    min: 300,
    max: 1400,
    step: 50,
    unit: "px",
  },
  alignment: {
    type: ControlType.Enum,
    title: "Alignment",
    options: ["left", "center", "right"],
    optionTitles: ["Left", "Center", "Right"],
    defaultValue: "center",
  },
})

Popup Button

A styled button that opens the booking page in a modal overlay.

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useRef } from "react"

const SCRIPT_URL = "https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"

function loadScript() {
  if (document.querySelector(`script[src="${SCRIPT_URL}"]`)) return
  const s = document.createElement("script")
  s.src = SCRIPT_URL
  s.async = true
  document.body.appendChild(s)
}

export default function MeetergoPopupButton({ bookingUrl, buttonText, backgroundColor, textColor, borderRadius, fontSize }) {
  const loaded = useRef(false)

  useEffect(() => {
    loadScript()
    loaded.current = true
  }, [])

  useEffect(() => {
    if (!loaded.current) return
    window.meetergo?.parseIframes?.()
  }, [bookingUrl])

  return (
    <button
      className="meetergo-modal-button"
      link={bookingUrl}
      style={{
        backgroundColor,
        color: textColor,
        borderRadius,
        fontSize,
        padding: "12px 24px",
        border: "none",
        cursor: "pointer",
        fontWeight: 600,
        fontFamily: "inherit",
        width: "100%",
      }}
    >
      {buttonText}
    </button>
  )
}

MeetergoPopupButton.defaultProps = {
  bookingUrl: "https://cal.meetergo.com/your-booking-link",
  buttonText: "Book a Meeting",
  backgroundColor: "#196EF5",
  textColor: "#FFFFFF",
  borderRadius: 8,
  fontSize: 16,
}

addPropertyControls(MeetergoPopupButton, {
  bookingUrl: { type: ControlType.String, title: "Booking URL", placeholder: "https://cal.meetergo.com/..." },
  buttonText: { type: ControlType.String, title: "Button Text", defaultValue: "Book a Meeting" },
  backgroundColor: { type: ControlType.Color, title: "Background", defaultValue: "#196EF5" },
  textColor: { type: ControlType.Color, title: "Text Color", defaultValue: "#FFFFFF" },
  borderRadius: { type: ControlType.Number, title: "Radius", defaultValue: 8, min: 0, max: 50, unit: "px" },
  fontSize: { type: ControlType.Number, title: "Font Size", defaultValue: 16, min: 12, max: 28, unit: "px" },
})

Floating Button

A corner-anchored button that opens a booking modal. Configurable position and animation.

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useRef } from "react"

const SCRIPT_URL = "https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"

function loadScript() {
  return new Promise((resolve) => {
    if (document.querySelector(`script[src="${SCRIPT_URL}"]`)) { resolve(); return }
    const s = document.createElement("script")
    s.src = SCRIPT_URL
    s.async = true
    s.onload = () => resolve()
    document.body.appendChild(s)
  })
}

export default function MeetergoFloatingButton({ bookingUrl, buttonText, position, backgroundColor, textColor, animation }) {
  const initialized = useRef(false)

  useEffect(() => {
    window.meetergoSettings = {
      ...(window.meetergoSettings || {}),
      floatingButton: {
        position,
        text: buttonText,
        link: bookingUrl,
        backgroundColor,
        textColor,
        animation: animation === "none" ? undefined : animation,
      },
    }
    if (!initialized.current) {
      loadScript().then(() => { initialized.current = true })
    } else {
      window.meetergo?.init?.()
    }
    return () => {
      if (window.meetergoSettings) delete window.meetergoSettings.floatingButton
    }
  }, [bookingUrl, buttonText, position, backgroundColor, textColor, animation])

  return (
    <div style={{ padding: 16, fontSize: 13, color: "#666", textAlign: "center" }}>
      Floating button will appear on the published site
    </div>
  )
}

MeetergoFloatingButton.defaultProps = {
  bookingUrl: "https://cal.meetergo.com/your-booking-link",
  buttonText: "Book a Meeting",
  position: "bottom-right",
  backgroundColor: "#196EF5",
  textColor: "#FFFFFF",
  animation: "pulse",
}

addPropertyControls(MeetergoFloatingButton, {
  bookingUrl: { type: ControlType.String, title: "Booking URL", placeholder: "https://cal.meetergo.com/..." },
  buttonText: { type: ControlType.String, title: "Button Text", defaultValue: "Book a Meeting" },
  position: { type: ControlType.Enum, title: "Position", options: ["bottom-right", "bottom-left", "top-right", "top-left"], optionTitles: ["Bottom Right", "Bottom Left", "Top Right", "Top Left"], defaultValue: "bottom-right" },
  backgroundColor: { type: ControlType.Color, title: "Background", defaultValue: "#196EF5" },
  textColor: { type: ControlType.Color, title: "Text Color", defaultValue: "#FFFFFF" },
  animation: { type: ControlType.Enum, title: "Animation", options: ["none", "pulse", "bounce", "slide-in"], optionTitles: ["None", "Pulse", "Bounce", "Slide In"], defaultValue: "pulse" },
})

Sidebar

A collapsible side panel that slides out from the left or right edge.

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useRef } from "react"

const SCRIPT_URL = "https://liv-showcase.s3.eu-central-1.amazonaws.com/browser-v3.js"

function loadScript() {
  return new Promise((resolve) => {
    if (document.querySelector(`script[src="${SCRIPT_URL}"]`)) { resolve(); return }
    const s = document.createElement("script")
    s.src = SCRIPT_URL
    s.async = true
    s.onload = () => resolve()
    document.body.appendChild(s)
  })
}

export default function MeetergoSidebar({ bookingUrl, buttonText, sidebarPosition, sidebarWidth, backgroundColor, textColor }) {
  const initialized = useRef(false)

  useEffect(() => {
    window.meetergoSettings = {
      ...(window.meetergoSettings || {}),
      sidebar: {
        position: sidebarPosition,
        width: sidebarWidth,
        link: bookingUrl,
        buttonText,
        buttonPosition: sidebarPosition === "left" ? "middle-left" : "middle-right",
        backgroundColor,
        textColor,
      },
    }
    if (!initialized.current) {
      loadScript().then(() => { initialized.current = true })
    } else {
      window.meetergo?.init?.()
    }
    return () => {
      if (window.meetergoSettings) delete window.meetergoSettings.sidebar
    }
  }, [bookingUrl, buttonText, sidebarPosition, sidebarWidth, backgroundColor, textColor])

  return (
    <div style={{ padding: 16, fontSize: 13, color: "#666", textAlign: "center" }}>
      Sidebar tab will appear on the published site
    </div>
  )
}

MeetergoSidebar.defaultProps = {
  bookingUrl: "https://cal.meetergo.com/your-booking-link",
  buttonText: "Book Meeting",
  sidebarPosition: "right",
  sidebarWidth: "400px",
  backgroundColor: "#196EF5",
  textColor: "#FFFFFF",
}

addPropertyControls(MeetergoSidebar, {
  bookingUrl: { type: ControlType.String, title: "Booking URL", placeholder: "https://cal.meetergo.com/..." },
  buttonText: { type: ControlType.String, title: "Tab Text", defaultValue: "Book Meeting" },
  sidebarPosition: { type: ControlType.Enum, title: "Side", options: ["left", "right"], optionTitles: ["Left", "Right"], defaultValue: "right" },
  sidebarWidth: { type: ControlType.String, title: "Panel Width", defaultValue: "400px" },
  backgroundColor: { type: ControlType.Color, title: "Background", defaultValue: "#196EF5" },
  textColor: { type: ControlType.Color, title: "Text Color", defaultValue: "#FFFFFF" },
})

FAQ

Do I need the plugin, or can I just use code components?

Either works. The plugin is easier — it walks you through setup and inserts the component automatically. Code components give you more control if you want to modify the source directly.

Will the booking form work on mobile?

Yes, all meetergo embeds are fully responsive and adapt to any screen size.

Can I customize colors and styling?

Yes. All embed types support custom background and text colors. You can also customize the appearance of your booking page itself in your meetergo account settings.

Why doesn't the floating button or sidebar show in the Framer editor?

The floating button and sidebar are injected globally by the meetergo script and only appear on the published site. In the editor, you'll see a placeholder. Publish your site to test the live behavior.

Can I add multiple embeds on the same page?

Yes. You can use multiple inline embeds or popup buttons on the same page. For floating button and sidebar, only one of each is supported since they are global widgets.

Where do I find my booking URL?

Go to Meeting Types, click Share next to any meeting type, and copy the booking link.

Was this article helpful?

Let us know if this article answered your questions.