LogoLogo
Log in
  • Introduction
    • Welcome
    • Quick Start
      • Sign up for a Cal.com account
      • Complete your onboarding
      • Self-hosting
        • Installation
          • Ultimate
          • Platform
            • Get access to the API
            • API submodule
        • Install apps
          • Google
          • Microsoft
          • Zoom
          • Daily
          • HubSpot
          • Stripe
          • Sendgrid
          • Twilio
        • E2E testing
        • Upgrading
        • Docker
        • Vercel
        • Database migrations
        • SSO setup
  • Core Features
    • Event types
      • Secret events
      • Location of the event
      • Availability schedule
      • Multiple durations
      • Event buffer
      • Custom time-slot intervals
      • Custom event name in the booking
      • Minimum notice
      • Booking frequency
      • Limit future bookings
      • Add events to calendar
      • Additional inputs
      • Requires confirmation
      • Hide notes in calendar
      • Require additional notes
      • Booking success URL
      • Single use private links
      • Offer seats
      • Recurring events
      • Disable guests
    • Bookings
      • Paid bookings
    • Availability
      • Multiple time slots per day
      • Date overrides
      • Multiple schedules
    • App Store
      • Apps
        • Calendar apps
        • Video apps
        • Payment apps
        • Workflow apps
        • Analytics apps
        • Web3 apps
        • Miscellaneous apps
    • Webhooks
    • Embed
      • Install with JavaScript
      • Install with React
      • Set up your embed
    • New Docs Embed
      • Adding embed to your webpage
      • Embed Snippet Generator
      • Embed events
      • Embed instructions
      • Adding slots to your email
    • Dynamic group links
    • Customization
    • i18n Internationalization
  • Enterprise Features
    • Teams
      • Team workflows
      • Round-robin scheduling
      • Collective events
      • Advanced routing forms
    • Workflows
    • API
      • Quick start
        • Testing API locally
        • Hosted API through Cal.com
      • Authentication
      • Errors
      • Rate limits
      • Versioning
      • Types
      • API reference
        • Attendees
        • Availabilities
        • Booking References
        • Bookings
        • Custom inputs
        • Destination calendars
        • Event types
        • Memberships
        • Payments
        • Schedules
        • Selected calendars
        • Teams
        • Users
        • Webhooks
    • Admin
  • Knowledgebase
    • Glossary
  • How To Guides
    • Acquire and manage a license key
    • Adding your first app
    • Creating a secret event type
    • Creating your first event type
    • How to add a location to your event type
    • How to add custom CSS
    • How to build an app
      • Build a greeter app
    • How to connect apple calendar with calcom
    • How to troubleshoot symbolic link issues on Windows
    • How to set buffer time
    • How to set up requires confirmation
    • How to set time-slot intervals
    • How to set up an event type to receive payments
    • How to test API in a local instance
    • How to use open-source scheduling infrastructure with HubSpot
    • How to white label the self hosted instance
    • Setting up your availability
      • Adding date override
    • Quick actions using command bar
Powered by GitBook
LogoLogo

Solutions

  • Individual
  • Teams
  • Ultimate
  • Platform

Follow us

  • Twitter
  • LinkedIn

Copyright 2023 Cal.com, Inc. All rights reserved.

On this page

Was this helpful?

  1. Core Features
  2. New Docs Embed

Embed instructions

An instruction is how you configure the embed. These instructions can be added immediately after the embed snippet

An instruction is technically a function with the same name, that would be called with the given arguments.

You would not normally need to learn about these instructions in details as the Embed Snippet Generator, automatically updates the snippet with these instructions in the way you configure it.

inline

Appends embed inline as the child of the element.

<script>
Cal("inline", { elementOrSelector, calLink });
</script>
  • elementOrSelector - Give it either a valid CSS selector or an HTMLElement instance directly

  • calLink - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL https://cal.com/john. It makes it easy to configure the calendar host once and use as many links you want with just usernames

ui

Configure UI for embed. Make it look part of your webpage.

<script>
Cal("ui", { styles });
</script>
  • styles - It supports styling for body and eventTypeListItem. Right now we support just background on these two.

preload

Usage:

If you want to open cal link on some action. Make it pop open instantly by preloading it.

<script>
Cal("preload", { calLink });
</script>
  • calLink - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL https://cal.com/john

PreviousEmbed eventsNextAdding slots to your email

Last updated 1 year ago

Was this helpful?