Cal.com is a scheduling platform that lets designers embed booking experiences directly into portfolios, design systems, or client‑facing sites. This guide walks you through the conceptual overview, initial setup, core workflows, advanced patterns, and common pitfalls. By the end, you’ll know how to configure Cal.com so it feels like a natural extension of your design work.
Designers need a booking tool that respects visual language and interaction patterns. Cal.com provides a white‑label UI, a REST API, and a React component library. You can keep the brand color palette, typography, and spacing consistent with the rest of your product.
Visit app.cal.com and sign up with an email or SSO. Choose the free tier if you are testing; you can upgrade later.
Navigate to Settings → Calendars. Click “Connect Google Calendar”. Grant read/write access. Cal.com will sync existing events and block them from new bookings.
npm install @calcom/embed-reactThen add the widget to a page:
import { Cal } from '@calcom/embed-react';
<Cal
calLink="yourteam/cal.com"
style={{width:'100%',height:'600px'}}
/>In Settings → Branding, upload your logo (max 200 KB, SVG preferred) and set primary/secondary colors. The widget respects these variables via CSS custom properties.
Place the React component inside your portfolio’s “Contact” section. Use CSS to match your grid:
.cal-widget{margin-top:2rem;}Open Settings → Availability. Add a recurring block: Mon‑Fri, 09:00‑12:00 UTC. Enable “Buffer before” 15 min to avoid back‑to‑back meetings.
Prepare a CSV with columns: title, duration, location, start_date, end_date. Upload via Admin → Import. This is handy for setting up a week of critique sessions.
Override Cal.com variables in your global stylesheet:
:root{
--cal-primary:#ff6f61;
--cal-font-family:"Inter",sans-serif;
--cal-border-radius:8px;
}Export the widget as an iframe URL, then use Figma’s “Embed” plugin. Set the iframe size to 800×600 px for realistic testing.
Upgrade to the “Pro” plan ($12 / user / month). Enable Stripe under Settings → Payments. Set the price field in the event type (e.g., $49 for a 2‑hour workshop).
| Feature | Free | Pro ($12/mo) | Enterprise (custom) |
|---|---|---|---|
| Unlimited public event types | ✓ | ✓ | ✓ |
| Custom branding | Limited (logo only) | Full (CSS vars) | Full + white‑label domain |
| Integrations | 5 basic (Google, Outlook, Zoom, Stripe, Zapier) | All 20+ integrations | Dedicated API + SSO |
| Booking limit | 1,000/mo | Unlimited | Unlimited + SLA |
| Support | Community forum | Email 24‑h | Dedicated account manager |
Changing fonts and colors is fine, but always preview on mobile and desktop. Use Chrome DevTools to emulate different viewports.
Without a buffer, meetings can run back‑to‑back, causing fatigue. Set at least 10 minutes for design reviews.
If you use both Google and Outlook, connect both. Otherwise, double bookings will appear.
Past events clutter the dashboard. Enable the toggle in Settings → Display.
Design teams often need custom reminder templates. Edit the email markup under Settings → Notifications to include brand tone.
The free tier includes unlimited public event types, basic branding, and up to 5 integrations. It caps at 1,000 bookings per month.
Yes. Cal.com lets you edit CSS, add custom fonts, and embed the widget in Figma prototypes via an iframe.
All dates are stored in UTC. The front‑end automatically converts to the viewer’s local time zone using the browser’s Intl API.
Use the CSV import tool in the Admin panel. Map columns to event fields and upload up to 500 rows per file.
Over‑customizing the UI without testing, ignoring the 15‑minute buffer setting, and forgetting to set proper availability for recurring meetings.
Cal.com can become a seamless part of any designer’s workflow when you follow this guide. Set up your account, match the visual style, and avoid the pitfalls listed above. You’ll spend less time on scheduling and more time on creating.