chore: added headless routing link to embed #22921

PeerRich · 2025-08-06T09:08:01Z

coderabbitai · 2025-08-06T09:08:10Z

Walkthrough

The changes introduce a new "headless" embed type across several components and type definitions. The English localization file receives two new strings related to headless embedding and form usage. The embed type selection UI is updated so that selecting "headless" opens a help URL in a new tab rather than proceeding with the usual flow. The RoutingFormEmbedDialog component conditionally displays the "headless" option with localized text and a custom SVG illustration. The EmbedType type alias is extended to include "headless". Embed code generators for React, React-Atom, and HTML now include a "headless" variant that returns null, and the embed code tab logic is updated to handle the new type.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15 minutes

Complexity arises from coordinated changes across UI, type definitions, localization, and code generation logic.
The review requires verifying correct conditional logic, type safety, and integration of the new "headless" option without affecting existing functionality.
No high-risk refactoring or changes to exported/public APIs, but thorough review is needed for UI handling and code consistency.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2b7ad94 and 335b056.

📒 Files selected for processing (2)

packages/features/embed/lib/EmbedCodes.tsx (5 hunks)
packages/features/embed/lib/EmbedTabs.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

packages/features/embed/lib/EmbedTabs.tsx
packages/features/embed/lib/EmbedCodes.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Install dependencies / Yarn install & cache

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch chore/add-headless-routing-docs

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

PeerRich · 2025-08-06T09:09:02Z

packages/features/embed/RoutingFormEmbed.tsx

+    ),
+  };
+
+  const routingFormTypesWithHeadless = IS_CALCOM 


lets only show this for cal.com users, not self-hosters

graphite-app · 2025-08-06T09:10:12Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (08/06/25)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add platform team as reviewer" took an action on this PR • (08/06/25)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add ready-for-e2e label" took an action on this PR • (08/08/25)

1 label was added to this PR based on Keith Williams's automation.

apps/web/public/static/locales/en/common.json

vercel · 2025-08-06T09:11:52Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)			Aug 7, 2025 1:58pm
cal-eu	⬜️ Ignored (Inspect)			Aug 7, 2025 1:58pm

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/web/public/static/locales/en/common.json (1)
2254-2255: Capitalisation consistency – consider lower-casing “Form”

Across this file, strings usually capitalise only the first word unless it’s a proper noun (e.g. "Upload image", "Add guests").
To stay consistent, you might want:
-  "use_my_own_form": "Use my own Form",
+  "use_my_own_form": "Use my own form",
packages/features/embed/RoutingFormEmbed.tsx (1)
22-61: Consider extracting the large SVG illustration

While the SVG illustration is well-formed, it's quite large (40+ lines) and makes the component harder to read. Consider extracting it to a separate component or constant for better maintainability.

You could extract it like this:
const HeadlessIllustration = () => (
  <svg
    width="100%"
    height="100%"
    className="rounded-md"
    viewBox="0 0 308 265"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    {/* SVG paths... */}
  </svg>
);

// Then use it as:
illustration: <HeadlessIllustration />

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d764b6a and 4907ad7.

📒 Files selected for processing (4)

apps/web/public/static/locales/en/common.json (1 hunks)
packages/features/embed/Embed.tsx (1 hunks)
packages/features/embed/RoutingFormEmbed.tsx (1 hunks)
packages/features/embed/types/index.d.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.ts

📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)

**/*.ts: For Prisma queries, only select data you need; never use include, always use select
Ensure the credential.key field is never returned from tRPC endpoints or APIs

Files:

packages/features/embed/types/index.d.ts

**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)

Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Files:

packages/features/embed/types/index.d.ts
packages/features/embed/Embed.tsx
packages/features/embed/RoutingFormEmbed.tsx

**/*.tsx

📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)

Always use t() for text localization in frontend code; direct text embedding should trigger a warning

Files:

packages/features/embed/Embed.tsx
packages/features/embed/RoutingFormEmbed.tsx

🧠 Learnings (8)

📓 Common learnings

Learnt from: CR
PR: calcom/cal.com#0
File: .cursor/rules/review.mdc:0-0
Timestamp: 2025-07-28T11:50:23.946Z
Learning: Applies to **/*.tsx : Always use `t()` for text localization in frontend code; direct text embedding should trigger a warning

Learnt from: bandhan-majumder
PR: calcom/cal.com#22359
File: packages/lib/server/locales/en/common.json:1336-1339
Timestamp: 2025-07-14T16:31:45.233Z
Learning: When making localization changes for new features, it's often safer to add new strings rather than modify existing ones to avoid breaking existing functionality that depends on the original strings. This approach allows for feature-specific customization while maintaining backward compatibility.

Learnt from: Anshumancanrock
PR: calcom/cal.com#22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.

Learnt from: eunjae-lee
PR: calcom/cal.com#22106
File: packages/features/insights/components/FailedBookingsByField.tsx:65-71
Timestamp: 2025-07-15T12:59:34.389Z
Learning: In the FailedBookingsByField component (packages/features/insights/components/FailedBookingsByField.tsx), although routingFormId is typed as optional in useInsightsParameters, the system automatically enforces a routing form filter, so routingFormId is always present in practice. This means the data always contains only one entry, making the single-entry destructuring approach safe.

📚 Learning: in the multipleprivatelinkscontroller component (packages/features/eventtypes/components/multiplepri...

Learnt from: alishaz-polymath
PR: calcom/cal.com#22304
File: packages/features/eventtypes/components/MultiplePrivateLinksController.tsx:92-94
Timestamp: 2025-07-16T06:42:27.024Z
Learning: In the MultiplePrivateLinksController component (packages/features/eventtypes/components/MultiplePrivateLinksController.tsx), the `currentLink.maxUsageCount ?? 1` fallback in the openSettingsDialog function is intentional. Missing maxUsageCount values indicate old/legacy private links that existed before the expiration feature was added, and they should default to single-use behavior (1) for backward compatibility.

Applied to files:

packages/features/embed/Embed.tsx

📚 Learning: in cal.com's embed system, internal events like "__scrollbydistance" are fired by cal.com's own code...

Learnt from: hariombalhara
PR: calcom/cal.com#22547
File: packages/embeds/embed-core/src/lib/eventHandlers/scrollByDistanceEventHandler.ts:11-14
Timestamp: 2025-07-16T11:46:28.759Z
Learning: In Cal.com's embed system, internal events like "__scrollByDistance" are fired by Cal.com's own code, so runtime validation of event data structure is unnecessary since TypeScript type system guarantees type safety for internal events.

Applied to files:

packages/features/embed/Embed.tsx

📚 Learning: in the failedbookingsbyfield component (packages/features/insights/components/failedbookingsbyfield....

Learnt from: eunjae-lee
PR: calcom/cal.com#22106
File: packages/features/insights/components/FailedBookingsByField.tsx:65-71
Timestamp: 2025-07-15T12:59:34.389Z
Learning: In the FailedBookingsByField component (packages/features/insights/components/FailedBookingsByField.tsx), although routingFormId is typed as optional in useInsightsParameters, the system automatically enforces a routing form filter, so routingFormId is always present in practice. This means the data always contains only one entry, making the single-entry destructuring approach safe.

Applied to files:

packages/features/embed/RoutingFormEmbed.tsx

📚 Learning: in signup-view.tsx, when checking if redirecturl contains certain strings, using explicit && checks ...

Learnt from: Anshumancanrock
PR: calcom/cal.com#22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.

Applied to files:

packages/features/embed/RoutingFormEmbed.tsx

📚 Learning: in the insights routing funnel component (packages/features/insights/components/routingfunnel.tsx), ...

Learnt from: eunjae-lee
PR: calcom/cal.com#22106
File: packages/features/insights/components/RoutingFunnel.tsx:15-17
Timestamp: 2025-07-15T12:58:40.539Z
Learning: In the insights routing funnel component (packages/features/insights/components/RoutingFunnel.tsx), the useColumnFilters exclusions are intentionally different from the general useInsightsParameters exclusions. RoutingFunnel specifically excludes only ["createdAt"] while useInsightsParameters excludes ["bookingUserId", "formId", "createdAt", "eventTypeId"]. This difference is by design.

Applied to files:

packages/features/embed/RoutingFormEmbed.tsx

📚 Learning: applies to **/*.tsx : always use `t()` for text localization in frontend code; direct text embedding...

Learnt from: CR
PR: calcom/cal.com#0
File: .cursor/rules/review.mdc:0-0
Timestamp: 2025-07-28T11:50:23.946Z
Learning: Applies to **/*.tsx : Always use `t()` for text localization in frontend code; direct text embedding should trigger a warning

Applied to files:

packages/features/embed/RoutingFormEmbed.tsx

📚 Learning: when making localization changes for new features, it's often safer to add new strings rather than m...

Learnt from: bandhan-majumder
PR: calcom/cal.com#22359
File: packages/lib/server/locales/en/common.json:1336-1339
Timestamp: 2025-07-14T16:31:45.233Z
Learning: When making localization changes for new features, it's often safer to add new strings rather than modify existing ones to avoid breaking existing functionality that depends on the original strings. This approach allows for feature-specific customization while maintaining backward compatibility.

Applied to files:

apps/web/public/static/locales/en/common.json

🧬 Code Graph Analysis (1)

packages/features/embed/Embed.tsx (1)

packages/features/embed/types/index.d.ts (1)

EmbedType (6-6)

🔇 Additional comments (7)

packages/features/embed/types/index.d.ts (1)

6-6: EmbedType extended – verify exhaustive handling across the codebase

The new "headless" literal widens the union, but PreviewState and several UI/state reducers still list explicit keys for each embed type (only inline, floatingPopup, elementClick).
Please audit all switch/if branches, reducers, and object maps that rely on exact keys to ensure "headless" is explicitly handled; otherwise it may fall through to default paths or raise runtime errors.

Key spots to double-check:
• Embed.tsx state transitions
• RoutingFormEmbedDialog option maps
• Any reducers/selectors initialising PreviewState
• Docs/analytics events enumerating embed types

No code change needed here, just confirm coverage.

packages/features/embed/Embed.tsx (1)

210-216: LGTM! Clean handling of headless embed type

The conditional logic appropriately redirects users to documentation for the "headless" embed type instead of proceeding with the normal embed flow. Opening the help URL in a new tab is the right UX choice for external documentation.

packages/features/embed/RoutingFormEmbed.tsx (5)

4-5: LGTM! Proper imports for new functionality

The imports are appropriate for the new headless routing feature - IS_CALCOM for feature flagging and useLocale for proper text localization.

13-13: LGTM! Following localization guidelines

Correctly uses the useLocale hook to obtain the t function for text localization, which follows the coding guidelines for frontend code.

18-21: LGTM! Proper localization usage

The title and subtitle properties correctly use the t() function for localization instead of hardcoded text, following the established coding guidelines for frontend code.

63-65: LGTM! Clean feature flag implementation

The conditional logic properly uses the IS_CALCOM environment flag to control the headless feature rollout. The ternary operator clearly shows when the headless option is included vs excluded.

69-69: LGTM! Proper integration with EmbedDialog

The updated types prop correctly passes the conditionally extended array to the EmbedDialog component, ensuring the headless option appears when the feature flag is enabled.

apps/web/public/static/locales/en/common.json

…rrors - Add headless handlers for react, react-atom, and HTML frameworks in EmbedCodes.tsx - Add headless case handling in EmbedTabs.tsx getEmbedTypeSpecificString function - Add embedCalOrigin parameter to HTML framework handlers for type consistency - All handlers return documentation comments directing users to headless routing docs Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

… code Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

…bed handlers - Headless handlers now take no parameters since they only return null - Simplified function signatures to avoid unused parameter warnings - Maintains existing functionality while improving code clarity Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

github-actions · 2025-08-08T06:22:29Z

E2E results are ready!

Workflow #71075.1 latest results

* added headless routing link to embed * Update apps/web/public/static/locales/en/common.json * Update apps/web/public/static/locales/en/common.json * fix: add missing headless embed type handlers to resolve TypeScript errors - Add headless handlers for react, react-atom, and HTML frameworks in EmbedCodes.tsx - Add headless case handling in EmbedTabs.tsx getEmbedTypeSpecificString function - Add embedCalOrigin parameter to HTML framework handlers for type consistency - All handlers return documentation comments directing users to headless routing docs Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com> * temp: enable IS_CALCOM for localhost testing Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com> * fix: change headless handlers to return null instead of documentation code Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com> * revert: remove temporary IS_CALCOM localhost change Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com> * refactor: remove unnecessary parameter destructuring from headless embed handlers - Headless handlers now take no parameters since they only return null - Simplified function signatures to avoid unused parameter warnings - Maintains existing functionality while improving code clarity Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: hariom@cal.com <hariombalhara@gmail.com>

added headless routing link to embed

4907ad7

PeerRich requested a review from hariombalhara August 6, 2025 09:08

graphite-app bot requested a review from a team August 6, 2025 09:08

keithwillcode added core area: core, team members only platform Anything related to our platform plan labels Aug 6, 2025

graphite-app bot requested a review from a team August 6, 2025 09:08

dosubot bot added the embed area: embed, widget, react embed label Aug 6, 2025

PeerRich commented Aug 6, 2025

View reviewed changes

apps/web/public/static/locales/en/common.json Outdated Show resolved Hide resolved

Update apps/web/public/static/locales/en/common.json

8f1c891

coderabbitai bot reviewed Aug 6, 2025

View reviewed changes

PeerRich commented Aug 6, 2025

View reviewed changes

apps/web/public/static/locales/en/common.json Outdated Show resolved Hide resolved

Update apps/web/public/static/locales/en/common.json

51fde27

vercel bot deployed to Preview – dev August 6, 2025 09:52 View deployment

vercel bot deployed to Preview – dev August 7, 2025 09:42 View deployment

devin-ai-integration bot and others added 3 commits August 7, 2025 10:08

Merge branch 'main' into chore/add-headless-routing-docs

25efac7

temp: enable IS_CALCOM for localhost testing

dd2d8c5

Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

fix: change headless handlers to return null instead of documentation…

2b7ad94

… code Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

vercel bot deployed to Preview – dev August 7, 2025 10:32 View deployment

revert: remove temporary IS_CALCOM localhost change

3eec12e

Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

vercel bot deployed to Preview – dev August 7, 2025 11:50 View deployment

vercel bot deployed to Preview – dev August 7, 2025 14:15 View deployment

hariombalhara approved these changes Aug 8, 2025

View reviewed changes

graphite-app bot added the ready-for-e2e label Aug 8, 2025

hariombalhara approved these changes Aug 8, 2025

View reviewed changes

hariombalhara enabled auto-merge (squash) August 8, 2025 06:00

hariombalhara merged commit 09b1643 into main Aug 8, 2025
59 of 60 checks passed

hariombalhara deleted the chore/add-headless-routing-docs branch August 8, 2025 06:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: added headless routing link to embed #22921

chore: added headless routing link to embed #22921

Uh oh!

PeerRich commented Aug 6, 2025

Uh oh!

coderabbitai bot commented Aug 6, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

PeerRich Aug 6, 2025

Uh oh!

graphite-app bot commented Aug 6, 2025 •

edited

Loading

Uh oh!

Uh oh!

vercel bot commented Aug 6, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 8, 2025

Uh oh!

Uh oh!

chore: added headless routing link to embed #22921

chore: added headless routing link to embed #22921

Uh oh!

Conversation

PeerRich commented Aug 6, 2025

Uh oh!

coderabbitai bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

PeerRich Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Graphite Automations

Uh oh!

Uh oh!

vercel bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 8, 2025

E2E results are ready!

Uh oh!

Uh oh!

coderabbitai bot commented Aug 6, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

graphite-app bot commented Aug 6, 2025 •

edited

Loading

vercel bot commented Aug 6, 2025 •

edited

Loading