Cal.com

Descripción

Cal.com is an open-source alternative to Calendly that allows easy appointment booking and meeting scheduling.

This plugin enables you to:

• Embed your Cal.com booking calendar inline, as a popup, or as a floating widget.
• Customize UI with theme colors, layout, and event details visibility.
• Pre-fill user information and add UTM tracking parameters.
• Use the new admin widget customizer for real-time previews.

Watch Demo

Shortcodes

[cal url=»/username/meetingid» type=1]

Embed inline calendar.

[cal url=»/username/meetingid» type=2 text=»Schedule a call»]

Embed popup trigger button.

[cal_custom url=»/demo/30min» type=1 prefill=»true» utm=»source:localhost» ui='{«theme»:»dark»,»cssVarsPerTheme»:{«dark»:{«cal-brand»:»#a3ffcb»}},»hideEventTypeDetails»:true,»layout»:»week_view»}’ config='{«layout»:»week_view»,»useSlotsViewOnSmallScreen»:true,»disableMobileScroll»:true}’]

Embed customizable widget with full UI control, prefill, and UTM support.

Shortcode Attributes

• url: URL of the booking calendar.
• type: Embed type (1 = inline, 2 = popup, 3 = floating button for [cal_custom]).
• text: Button text for popup embeds.
• prefill: Set to true to prefill user info if available.
• utm: Comma-separated UTM tracking parameters (e.g., source:newsletter, medium:email).
• ui: JSON object for theme, layout, and visibility customization.
• config: JSON object for advanced widget configuration (slots view, scrolling, etc.).

CSS Customization

Customize popup/button text via CSS targeting #calcom-embed-link:

#calcom-embed-link, .calcom-embed-link {
    background-color: #222222;
    padding: 15px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

Use of 3rd Party Software

This plugin relies on Cal.com embed. See their Privacy Policy and Terms of use.