sequenceDiagram participant Parent as Parent (User Page) participant Embed as Embed (iframe) participant Store as EmbedStore(iframe) participant UI as UI Components(iframe) Note over Parent: Prerender Phase Parent->>Parent: Cal.prerender() or Cal.preload() called Note over Parent: Set prerender=true in URL Parent->>Parent: Create cal-modal-box (hidden) Parent->>Parent: Create iframe (hidden) Parent->>Parent: Set state="prerendering" Note over Embed: background: transparent Note over Embed: body tag hidden Note over Embed: iframe webpage starts rendering Note over Store: EmbedStore pre-initialized
State: NOT_INITIALIZED Store->>Store: renderState: "inProgress" Store->>Store: Initialize UI config & theme Note over Store: Limited events allowed
(__iframeReady, __dimensionChanged,
__connectInitiated, linkPrerendered)
No tracking events fired Embed->>Parent: __iframeReady event Note right of Embed: Purpose: Signals iframe is ready
to receive messages
Action: Sets iframeReady flag
iframe stays hidden Note over Parent: Sets iframeReady flag Note over Parent: iframe stays hidden Note over Store: Set state to INITIALIZED Store->>UI: Apply theme & cssVarsPerTheme Embed->>Parent: __dimensionChanged event Note right of Embed: Purpose: Keeps iframe size
matched to content
Allows proper sizing
even when hidden Note over Parent: Adjust iframe dimensions Note over Store: Update providedCorrectHeightToParent Embed->>Parent: __windowLoadComplete event Note right of Embed: Purpose: Signals page fully loaded
Ensures dimension calculations
are reliable Note over Embed: Load booker (slots may be skipped) Embed->>Parent: linkReady event (internal) Note right of Embed: Purpose: Internal signal for
prerender completion
Not exposed to user Note over Parent: parentKnowsIframeReady called Parent->>Embed: parentKnowsIframeReady event Note right of Parent: Purpose: Parent acknowledges
iframe readiness
Action: Makes body visible,
sets renderState completed Note over Embed: Makes body visible Note over Store: renderState: "completed" Embed->>Parent: linkPrerendered event Note right of Embed: Purpose: Signals prerendered embed
is ready in background
Embed stays hidden until connect() Note over Parent: Prerender complete, waiting for connect() Note over Parent: User clicks CTA or Cal.modal() called Note over Parent: Connect Phase Parent->>Embed: connect() with new config/params Embed->>Parent: __connectInitiated event Note right of Embed: Purpose: Signals connect() called
to activate prerendered embed
Triggers: URL param updates Note over Store: Reset providedCorrectHeightToParent Store->>Store: Update URL params via router Note over Store: Remove prerender params Note over Store: May fetch slots (unless noSlotsFetchOnConnect=true) alt Slots need fetching Note over Embed: Wait for slotsDone state end Embed->>Parent: __connectCompleted event Note right of Embed: Purpose: Signals connect flow
has finished updating embed
URL params updated, slots ready Embed->>Parent: linkReady event (isPrerendered: true) Note right of Embed: Purpose: Signals iframe content
is fully ready for interaction
Fired with isPrerendered flag Note over Parent: Remove loader Note over Parent: Set state="loaded" Note over Parent: Make modal visible Note over Store: viewId set to 1 Note over Store: Full event flow now enabled UI->>Parent: bookerViewed event Note right of UI: Purpose: Tracks first view of booker
Includes: Event info, slots status
Now enabled (was suppressed) UI->>Parent: bookerReady event Note right of UI: Purpose: Signals booker view is loaded
and slots are ready for interaction
Includes: Event identification
Only fires for booker pages alt User closes and reopens modal UI->>Parent: bookerReopened event Note right of UI: Purpose: Tracks when booker is
reopened after being closed end loop Dimension Monitoring Embed->>Embed: Monitor content size changes alt Dimensions Changed Embed->>Parent: __dimensionChanged event Note right of Embed: Purpose: Maintain proper sizing
as content changes Parent->>Parent: Adjust iframe size end end alt Route Changes UI->>Store: Update UI state Store->>Parent: __routeChanged event Note right of Store: Purpose: Notifies parent of
navigation within embed Note over Parent: Handle navigation end alt Close Request Embed->>Parent: __closeIframe event Note right of Embed: Purpose: Request to close modal
from within iframe Note over Parent: Set state="closed" end alt Error Handling Embed->>Parent: linkFailed event Note right of Embed: Purpose: Signals page load error
Includes: Error code, URL info Note over Parent: Set state="failed" end