Embed Playground

Different variations of the page

With Dark Color Scheme for the PageNon responsive version of this page hereGrid row gap version of this page here

Misc Embeds

Add Inline Embed in a new namespace without reload

Double Install Embed Snippet with inline embed - Default Namespace

Double Install Embed Snippet with inline embed - Non Default Namespace

Two different namespace with two different config

Page Params Forwarding(Prefills various fields by auto-forwarding query params) Go to Prerender test page onlyGo to Preload test page onlyToggle Dark Scheme(For Embedding Page)Toggle Light Scheme(For Embedding Page)

Render All embeds together - It would be slow to loadFloating Popup

Popup Examples - Theme Tests

Book an event with Free[Light Theme] Book with Free User[Auto Theme] Book with Free User[Dark Theme] Book with Test Team[Light Theme] Book with Test Team[Dark Theme] See Team Links [Auto Theme] Book Paid Event [Auto Theme]

Popup Examples - Reschedule Tests

Popup Examples - Cancel Tests

Popup Examples - Different Configurations

Book Free Event [Auto Theme][uiConfig.hideEventTypeDetails=true] Book Paid Event - weekly view Book Paid Event - column view

Popup Examples - Routing Form Tests

Book through Routing Form [Auto Theme] - Test for 'routed' event Book through Routing Form [Dark Theme] Book through Headless Router

Popup Examples - Child Element Target Tests

I am Anchor [I am Bold inside anchor] I am span inside anchor

Inline Embed Examples

[Dark Theme][Guests([email protected] and [email protected])](Default Namespace)

Toggle to LightToggle to Week ViewToggle to Month ViewToggle to Column View You would see last Booking page action in my place

[Custom Styling]

If you render booking embed in me, I won't restrict you. The entire page is yours. Content is by default aligned center Heavily customize UI Change booker border for dark and light themes Create error scenario Change Brand color for dark and light theme Change eventTypeListItem bg color[Deprecated] Align left[Deprecated] Align Center[Deprecated] Change 'enabledDateButtonanddisabledDateButton` background Color[Deprecated]

[Custom Styling - Transparent Background]

If you render booking embed in me, I would not let you be more than 30% wide

[Team Event Test][inline taking entire width]

If you render booking embed in me, I would not let you be more than 30% wide

CORP/COEP Blocking Test

It would forever load

[Team Event Test][inline along with some content]

On the right side you can book a team meeting =>

Inline Routing Form

On the right side you can book a team meeting =>

Hide EventType Details Test

Scroll to Timeslot Test - Selecting a date would scroll the window to the timeslot

Container Scroll Test - Selecting a date would scroll the element to the timeslot

You would be able to test out conflicting themes for the same namespace here.

Note that one of the embeds would stay in loading state as they are using the same namespace and it is not supported to have more than 1 embeds using same namespace

Test Month View

Test Week View

Test Column View

Test Column View Hide Event Type Details

Test Page Params Forwarding

Test Auto Scroll

Test Two Step Slot Selection

Note: Two step slot selection only applies to mobile view. If you're testing this on a big screen, you need to make the screen mobile width.

Skeleton Loader INLINE Demo

Skeleton Loader MODAL Demo

Skeleton Loader MODAL Demo