Embed Widget

Add Calendo scheduling to any website with a single script tag. No build tools, no frameworks -- just paste and go.

Script Tag

Add this script tag anywhere in your HTML. The widget loads asynchronously and will not block your page.

html 
<script
  src="https://calendo.dev/embed.js"
  data-calendo-user="your-username"
></script>

Replace your-username with your Calendo booking page slug (found in your dashboard under Settings).

Quick Start

The simplest integration is the badge mode, which adds a floating "Book a meeting" button to the bottom-right corner of your page. Just add the script tag -- no additional configuration needed.

html 
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my site</h1>
  <p>Your page content here...</p>

  <!-- Calendo embed widget -->
  <script
    src="https://calendo.dev/embed.js"
    data-calendo-user="your-username"
  ></script>
</body>
</html>

Embed Modes

The widget supports three display modes, each suited to different use cases. Set the mode using the data-calendo-mode attribute.

Badge Mode

Displays a floating button in the bottom-right corner of the page. Clicking it opens a modal with your booking page. This is the default mode.

Live Preview

Your website content would appear here...

html 
<!-- Badge mode (default) -->
<script
  src="https://calendo.dev/embed.js"
  data-calendo-user="your-username"
  data-calendo-mode="badge"
></script>

Renders a button inline with your content. Clicking the button opens a modal with your booking page. Use this when you want the booking button placed at a specific position in your page.

Live Preview

Want to schedule a call? Click below.

html 
<!-- Popup mode: button appears where script tag is placed -->
<p>Want to schedule a call? Click below.</p>
<script
  src="https://calendo.dev/embed.js"
  data-calendo-user="your-username"
  data-calendo-mode="popup"
  data-calendo-text="Book a meeting"
></script>

Inline Mode

Embeds the full booking page directly into your page via an iframe. No modal, no button -- the scheduler is rendered right where you place the script tag. Best for dedicated booking pages.

Live Preview
Select a time
9:00 AM 10:00 AM 11:00 AM 2:00 PM 3:00 PM
html 
<!-- Inline mode: scheduler embedded directly -->
<script
  src="https://calendo.dev/embed.js"
  data-calendo-user="your-username"
  data-calendo-mode="inline"
></script>

Customization

Configure the widget using data-calendo-* attributes on the script tag.

Attribute Type Default Description
data-calendo-user string -- Required. Your booking page slug (e.g., jane-smith)
data-calendo-event string -- Specific event type slug. If set, skips event selection and goes straight to time picker
data-calendo-mode string badge Display mode: badge, popup, or inline
data-calendo-color string #2563eb Primary color for the button (any valid CSS color)
data-calendo-text string Book a meeting Button text (for badge and popup modes)

Custom Color Example

html 
<script
  src="https://calendo.dev/embed.js"
  data-calendo-user="your-username"
  data-calendo-color="#7c3aed"
  data-calendo-text="Schedule a call"
></script>

Direct to Event Type

Skip the event type selection by specifying the event slug. The invitee goes directly to the time picker.

html 
<script
  src="https://calendo.dev/embed.js"
  data-calendo-user="your-username"
  data-calendo-event="30-minute-call"
  data-calendo-mode="popup"
  data-calendo-text="Book a 30-min call"
></script>

Full Page Examples

Complete HTML pages showing each embed mode in context.

Badge on a Portfolio Site

html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jane Smith - Designer</title>
</head>
<body>
  <h1>Jane Smith</h1>
  <p>Product Designer. Available for freelance work.</p>

  <!-- Floating badge button -->
  <script
    src="https://calendo.dev/embed.js"
    data-calendo-user="jane-smith"
    data-calendo-color="#7c3aed"
    data-calendo-text="Schedule a call"
  ></script>
</body>
</html>

Inline Scheduler on a Contact Page

html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
</head>
<body>
  <h1>Schedule a Meeting</h1>
  <p>Pick a time that works for you:</p>

  <!-- Inline scheduler -->
  <script
    src="https://calendo.dev/embed.js"
    data-calendo-user="jane-smith"
    data-calendo-event="30-minute-call"
    data-calendo-mode="inline"
  ></script>
</body>
</html>

Popup Button in a Landing Page

html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Acme Consulting</title>
</head>
<body>
  <section>
    <h1>Grow your business with Acme</h1>
    <p>Book a free 30-minute strategy session.</p>

    <!-- Popup booking button -->
    <script
      src="https://calendo.dev/embed.js"
      data-calendo-user="jane-smith"
      data-calendo-event="strategy-session"
      data-calendo-mode="popup"
      data-calendo-text="Book Free Session"
      data-calendo-color="#16a34a"
    ></script>
  </section>
</body>
</html>
Need help?
Check the API documentation for programmatic access, or open an issue on GitHub.