How to Use Cal.com for Designers

Cal.com is a scheduling platform that lets designers book client meetings without endless email ping‑pong. In this guide you will learn how to set up a Cal.com account, customize the booking page for design work, embed the widget in design tools, and automate follow‑ups. Follow each step and you will have a professional scheduler ready in under an hour.

Table of contents

• 1. Set up your Cal.com account
• 2. Customize the booking page for design services
• 3. Embed the widget in Figma, Webflow, and Adobe XD
• 4. Automate client intake with Zapier
• 5. Cal.com vs. competitors
• 6. Best practices for designers
• 7. Frequently asked questions

1. Set up your Cal.com account

1.1 Create a free account

Visit cal.com and click “Sign up”. Choose the free plan. You will be asked for name, email, and a password. After confirming the email, you land on the dashboard.

1.2 Connect your calendars

Navigate to Settings → Calendar Connections. Click “Add Google Calendar” and follow the OAuth flow. Repeat for Outlook if you use Microsoft 365. Cal.com now reads busy slots from both sources.

1.3 Verify your domain (optional)

The free tier uses yourname.cal.com. If you want book.yourdomain.com, upgrade to the “Pro” plan ($12/month) and add a CNAME record pointing to cname.cal.com.

2. Customize the booking page for design services

2.1 Create an event type

Click “New Event Type”. Name it “Design Consultation – 30 min”. Set duration to 30 minutes and buffer to 10 minutes.

2.2 Add custom fields

Under “Additional Fields”, click “Add Field”. Choose “Dropdown” for “Project Type” with options: Logo, UI/UX, Illustration, Branding. Add a “Text” field called “Budget Range”. These fields appear on the booking form.

2.3 Brand the page

Go to Appearance → Branding. Upload your logo (max 200 KB, PNG). Choose your brand colors – for example #0A3D62 for headings and #66A5AD for buttons. Save changes.

2.4 Set up email confirmations

In Email Settings, edit the “Event Confirmation” template. Include a link to a Google Drive folder where you will later upload drafts. Use merge tags like {{event.location}} and {{event.custom_fields}}.

3. Embed the widget in Figma, Webflow, and Adobe XD

3.1 Get the embed code

Open the event type and click “Share”. Choose “Embed”. Copy the <iframe> snippet.

<iframe src="https://yourname.cal.com/consultation?embed_domain=yourdomain.com"
        width="100%" height="600" frameborder="0"></iframe>

3.2 Figma

Select a frame, press ⌘/K (or Ctrl+K) to add an embed. Paste the iframe code. Resize the frame to 400 px tall for a compact view.

3.3 Webflow

Drag an “Embed” element onto the page. Paste the same iframe. In the page settings, enable “Allow custom code”. Publish and test.

3.4 Adobe XD

Adobe XD does not render iframes directly. Use the “Web View” plugin: create a rectangle, run the plugin, paste the URL https://yourname.cal.com/consultation, and set the height to 600 px.

4. Automate client intake with Zapier

4.1 Create a Zap

Log in to Zapier, click “Make a Zap”. Choose Cal.com as the trigger app and select “New Event Scheduled”. Connect your Cal.com account with the API key found under Settings → API.

4.2 Add an action – Google Sheets

Choose Google Sheets → “Create Spreadsheet Row”. Map fields: Date, Client Name, Project Type, Budget Range. This gives you a live intake sheet.

4.3 Add an action – Slack notification

Select Slack → “Send Channel Message”. Write a concise message: “New design brief from {{client_name}} – {{project_type}}. Budget: {{budget_range}}.”

4.4 Test and turn on

Run the test, verify a row appears in Sheets and a Slack message arrives. Turn the Zap on.

5. Cal.com vs. competitors

Feature	Cal.com (Free)	Calendly (Basic)	Acuity Scheduling (Free)
Unlimited event types	✔	✖ (1)	✖ (1)
Custom branding	✔ (logo only)	✖	✖
Zapier integration	✔	✔ (paid)	✔ (paid)
Self‑hosted option	✔ (Docker)	✖	✖
Price for custom domain	$12/mo	$8/mo	$15/mo
Design‑specific fields	✔ (dropdown, file upload)	✖	✖

6. Best practices for designers

6.1 Collect brief details early

Use custom fields to ask for deliverable type, file format, and deadline. This reduces back‑and‑forth email.

6.2 Sync with project management

Set up a Zap that creates a Trello card for each new booking. Include the Cal.com event link in the card description.

6.3 Use buffer times

Design work often overruns. Add a 15‑minute buffer after each meeting to review notes and prepare the next session.

6.4 Offer multiple time zones

Enable “Display in client’s time zone” so international clients see local times. This cuts missed meetings by 30 % according to Cal.com analytics.

7. Frequently asked questions

Can I use Cal.com for free as a designer?

Yes. The free tier includes unlimited events, basic branding, and calendar sync. You only need to upgrade for custom domains or advanced automation.

How do I embed a Cal.com booking widget in Figma prototypes?

Create an embed block in Figma, paste the iframe code from Cal.com, and set the width to 100%. The widget will work inside the prototype preview.

Is Cal.com compatible with Adobe Creative Cloud apps?

Cal.com does not have a direct plugin for Adobe apps, but you can use Zapier or Integromat to trigger actions in Adobe after a booking is made.

What is the best way to collect design brief details during booking?

Add custom fields in the event type – ask for project type, budget, and preferred file formats. These fields appear on the confirmation page and in the webhook payload.

Can I sync Cal.com with my Google Calendar and Outlook simultaneously?

Yes. In Settings > Calendar Connections you can enable both Google Calendar and Outlook. Cal.com will check both for conflicts before confirming a slot.

With Cal.com set up, customized, and integrated, you can focus on design work instead of scheduling chaos. The platform is free to start, simple to brand, and powerful enough to grow with your studio.