Cal.com
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.
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
trueto 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.