2022-03-31 08:45:47 +00:00
< html >
< head >
2022-12-13 07:23:26 +00:00
< title > Embed Playground< / title >
2022-03-31 08:45:47 +00:00
<!-- <link rel="prerender" href="http://localhost:3000/free"> -->
2022-05-05 14:29:49 +00:00
<!-- <script src="./src/embed.ts" type="module"></script> -->
2022-03-31 08:45:47 +00:00
< script >
2023-03-28 18:17:40 +00:00
function generateRandomHexColor() {
// Generate a random integer between 0 and 16777215 (FFFFFF in hex)
const randomInt = Math.floor(Math.random() * 16777216);
// Convert the integer to a hex string with 6 digits and add leading zeros if necessary
2023-05-16 19:41:47 +00:00
const hexString = randomInt.toString(16).padStart(6, "0");
2023-03-28 18:17:40 +00:00
// Return the hex string with a '#' prefix
return `#${hexString}`;
}
2022-03-31 08:45:47 +00:00
if (!location.search.includes("nonResponsive")) {
document.write('< meta name = "viewport" content = "width=device-width" / > ');
}
2023-04-13 18:26:31 +00:00
(() => {
2022-04-25 04:33:00 +00:00
const url = new URL(document.URL);
// Only run the example specified by only=, avoids distraction and faster to test.
2023-04-13 18:26:31 +00:00
const only = (window.only = url.searchParams.get("only"));
const elementIdentifier = only !== "all" ? only.replace("ns:", "") : null;
2022-07-28 10:50:25 +00:00
if (elementIdentifier) {
2023-04-13 18:26:31 +00:00
location.hash = "#cal-booking-place-" + elementIdentifier + "-iframe";
2022-04-25 04:33:00 +00:00
}
2023-04-13 18:26:31 +00:00
})();
2022-03-31 08:45:47 +00:00
< / script >
< script >
(function (C, A, L) {
2022-04-04 15:44:04 +00:00
let p = function (a, ar) {
a.q.push(ar);
};
2022-03-31 08:45:47 +00:00
let d = C.document;
C.Cal =
C.Cal ||
function () {
let cal = C.Cal;
let ar = arguments;
if (!cal.loaded) {
cal.ns = {};
cal.q = cal.q || [];
d.head.appendChild(d.createElement("script")).src = A;
cal.loaded = true;
}
if (ar[0] === L) {
const api = function () {
2022-04-04 15:44:04 +00:00
p(api, arguments);
2022-03-31 08:45:47 +00:00
};
2022-04-04 15:44:04 +00:00
const namespace = ar[1];
2022-03-31 08:45:47 +00:00
api.q = api.q || [];
2022-04-04 15:44:04 +00:00
typeof namespace === "string" ? (cal.ns[namespace] = api) & & p(api, ar) : p(cal, ar);
return;
2022-03-31 08:45:47 +00:00
}
2022-04-04 15:44:04 +00:00
p(cal, ar);
2022-03-31 08:45:47 +00:00
};
2022-05-06 15:56:26 +00:00
})(window, "//localhost:3000/embed/embed.js", "init");
2022-03-31 08:45:47 +00:00
< / script >
< style >
2022-04-08 05:33:24 +00:00
body {
background: linear-gradient(
90deg,
rgba(120, 116, 186, 1) 0%,
rgba(221, 221, 255, 1) 41%,
rgba(148, 232, 249, 1) 100%
);
}
2022-12-13 07:23:26 +00:00
.inline-embed-container {
2022-03-31 08:45:47 +00:00
/* border: 1px solid black; */
margin-bottom: 5px;
2023-04-13 18:26:31 +00:00
border-bottom: 1px solid;
2022-03-31 08:45:47 +00:00
}
.loader {
color: green;
}
2022-04-14 02:47:34 +00:00
* {
2022-04-25 04:33:00 +00:00
--cal-brand-color: gray;
2022-04-14 02:47:34 +00:00
}
2022-03-31 08:45:47 +00:00
< / style >
< / head >
< body >
2023-07-18 16:46:35 +00:00
< span style = "display: block" > < a href = "?color-scheme=dark" > With Dark Color Scheme for the Page< / a > < / span >
2023-04-13 18:26:31 +00:00
< span style = "display: block" > < a href = "?nonResponsive" > Non responsive version of this page here< / a > < / span >
< span style = "display: block"
2023-10-10 03:10:04 +00:00
>< a href = "?only=prerender-test" > Go to Prerender test page only< / a > < small > < /small
2023-04-13 18:26:31 +00:00
>< / span >
2023-10-10 03:10:04 +00:00
< span style = "display: block"
>< a href = "?only=preload-test" > Go to Preload test page only< / a > < small > < /small
>< / span >
2023-07-18 16:46:35 +00:00
< button onclick = "document.documentElement.style.colorScheme='dark'" > Toggle Dark Scheme< / button >
< button onclick = "document.documentElement.style.colorScheme='light'" > Toggle Light Scheme< / button >
2022-03-31 08:45:47 +00:00
< div >
2022-12-13 07:23:26 +00:00
< script >
if (only === "all" || only === "prerender-test") {
document.write(`
2023-10-10 03:10:04 +00:00
< button data-cal-namespace = "e2ePrerenderLightTheme" data-cal-config = '{"theme":"dark", "email":"preloaded-prefilled@example.com", "name": "Preloaded Prefilled"}' data-cal-link = "free/30min" > Book with Free User[Dark Theme]< / button >
2022-12-13 07:23:26 +00:00
< i
2023-10-10 03:10:04 +00:00
>Corresponding Cal Link is being prerendered. Assuming that it would take you some time to click this
2022-12-13 07:23:26 +00:00
as you are reading this text, it would open up super fast[If you are running a production build on
local]. Try switching to slow 3G or create a custom Network configuration which is impossibly
2023-10-10 03:10:04 +00:00
slow. This should be used if you know beforehand which type of embed is going to be opened.< /i
>`);
}
if (only === "all" || only === "preload-test") {
document.write(`
< button data-cal-namespace = "preloadTest" data-cal-config = '{"theme":"dark", "email":"preloaded-prefilled@example.com", "name": "Preloaded Prefilled"}' data-cal-link = "free/30min" > Book with Free User[Dark Theme]< / button >
< i
>Corresponding Cal Link is being preloaded. That means that all the resources would be preloaded. This could be useful in preloading possible resources if you don't know before hand which type of embed you want to show< /i
2023-04-13 18:26:31 +00:00
>`);
2022-12-13 07:23:26 +00:00
}
2023-04-13 18:26:31 +00:00
< / script >
2022-12-13 07:23:26 +00:00
< / div >
2023-04-13 18:26:31 +00:00
< span style = "display: block"
>< a href = "?only=all" > Render All embeds together< / a > < small > - It would be slow to load< / small > < /span
>
2022-12-13 07:23:26 +00:00
< div >
2023-03-28 18:17:40 +00:00
< a href = "?only=ns:floatingButton" > Floating Popup< / a >
2022-12-13 07:23:26 +00:00
< h2 > Popup Examples< / h2 >
2023-10-10 03:10:04 +00:00
< button data-cal-namespace = "e2ePopupLightTheme" data-cal-link = "free" data-cal-config = '{"theme":"light"}' > Book an event with Free[Light Theme]< / button >
2023-04-13 18:26:31 +00:00
< button data-cal-namespace = "popupAutoTheme" data-cal-link = "free" >
Book with Free User[Auto Theme]
< / button >
< button data-cal-namespace = "popupDarkTheme" data-cal-config = '{"theme":"dark"}' data-cal-link = "free" >
Book with Free User[Dark Theme]
< / button >
< button
data-cal-namespace="popupTeamLinkLightTheme"
data-cal-config='{"theme":"light"}'
data-cal-link="team/seeded-team/collective-seeded-team-event">
Book with Test Team[Light Theme]
< / button >
< button
data-cal-namespace="popupTeamLinkDarkTheme"
data-cal-config='{"theme":"dark"}'
data-cal-link="team/seeded-team/collective-seeded-team-event">
Book with Test Team[Dark Theme]
< / button >
< button data-cal-namespace = "popupTeamLinksList" data-cal-link = "team/seeded-team/" >
See Team Links [Auto Theme]
< / button >
2022-12-18 19:24:44 +00:00
< script >
2023-04-13 18:26:31 +00:00
let popupRescheduleId =
new URL(document.URL).searchParams.get("popupRescheduleId") || "qm3kwt3aTnVD7vmP9tiT2f";
document.write(
`< button data-cal-namespace = "popupReschedule" data-cal-link = "reschedule/${popupRescheduleId}" > Reschedule Event[Auto Theme]< / button > `
);
2022-12-18 19:24:44 +00:00
< / script >
2023-04-13 18:26:31 +00:00
< button data-cal-namespace = "popupPaidEvent" data-cal-link = "pro/paid" >
Book Paid Event [Auto Theme]
< / button >
< button data-cal-namespace = "popupHideEventTypeDetails" data-cal-link = "free/30min" >
Book Free Event [Auto Theme][uiConfig.hideEventTypeDetails=true]
< / button >
< button data-cal-namespace = "routingFormAuto" data-cal-link = "forms/948ae412-d995-4865-875a-48302588de03" >
Book through Routing Form [Auto Theme]
< / button >
< button
data-cal-namespace="routingFormDark"
data-cal-config='{"theme":"dark"}'
data-cal-link="forms/948ae412-d995-4865-875a-48302588de03">
Book through Routing Form [Dark Theme]
< / button >
2023-06-14 09:22:44 +00:00
< button data-cal-namespace = "popupPaidEvent" data-cal-config = '{"layout":"week_view"}' data-cal-link = "pro/paid" >
Book Paid Event - weekly view
< / button >
< button data-cal-namespace = "popupPaidEvent" data-cal-config = '{"layout":"column_view"}' data-cal-link = "pro/paid" >
Book Paid Event - column view
< / button >
2022-12-13 07:23:26 +00:00
<!-- <div>
2022-04-14 02:47:34 +00:00
< h2 > Embed for Pages behind authentication< / h2 >
< button data-cal-namespace = "upcomingBookings" data-cal-config = '{"theme":"dark"}' data-cal-link = "bookings/upcoming" > Show Upcoming Bookings< / button >
2022-12-13 07:23:26 +00:00
< / div > -->
2022-03-31 08:45:47 +00:00
< / div >
2022-12-13 07:23:26 +00:00
< h2 > Inline Embed Examples< / h2 >
2022-03-31 08:45:47 +00:00
< div id = "namespaces-test" >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-default" >
< h3 >
2023-06-06 23:52:13 +00:00
< a href = "?only=ns:default" > [Dark Theme][Guests(janedoe@example.com and test@example.com)](Default Namespace)< / a >
2022-12-13 07:23:26 +00:00
< / h3 >
2023-05-16 19:41:47 +00:00
< button onclick = "Cal('ui',{theme:'light'})" > Toggle to Light< / button >
2023-06-26 15:24:19 +00:00
< button onclick = "Cal('ui',{layout:'week_view'})" > Toggle to Week View< / button >
< button onclick = "Cal('ui',{layout:'month_view'})" > Toggle to Month View< / button >
< button onclick = "Cal('ui',{layout:'column_view'})" > Toggle to Column View< / button >
2022-04-04 15:44:04 +00:00
< i class = "last-action" > You would see last Booking page action in my place < / i >
2023-04-13 18:26:31 +00:00
< div >
< div class = "place" style = "width: 100%" > < / div >
2022-12-13 07:23:26 +00:00
< div class = "loader" id = "cal-booking-loader-" > < / div >
2022-03-31 08:45:47 +00:00
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-second" >
< h3 > < a href = "?only=ns:second" > [Custom Styling]< / a > < / h3 >
2022-04-04 15:44:04 +00:00
< div class = "place" >
2023-04-13 18:26:31 +00:00
< div >
If you render booking embed in me, I won't restrict you. The entire page is yours. Content is by
default aligned center
< / div >
2023-04-18 12:53:46 +00:00
< button
onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-border-booker':'green', 'cal-border-booker-width':'20px'},dark:{'cal-border-booker':'red', 'cal-border-booker-width':'5px'}}})})()">
Change booker border for dark and light themes
< / button >
2023-05-23 08:16:56 +00:00
< button
onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-brand':'green'},dark:{'cal-brand':'red'}}})})()">
Change Brand color for dark and light theme
< / button >
2022-03-31 08:45:47 +00:00
< button
onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
2023-04-18 12:53:46 +00:00
Change < code > eventTypeListItem< / code > bg color[Deprecated]
2022-03-31 08:45:47 +00:00
< / button >
< button onclick = "(function () {Cal.ns.second('ui', {styles:{body:{background:'red'}}})})()" >
2023-04-18 12:53:46 +00:00
Change < code > body< / code > bg color[Deprecated]
2022-04-25 04:33:00 +00:00
< / button >
2023-05-16 19:41:47 +00:00
< button onclick = "(function () {Cal.ns.second('ui', {styles:{align:'left'}})})()" >
Align left[Deprecated]
< / button >
2022-04-25 04:33:00 +00:00
< button onclick = "(function () {Cal.ns.second('ui', {styles:{align:'center'}})})()" >
2023-04-18 12:53:46 +00:00
Align Center[Deprecated]
2022-04-25 04:33:00 +00:00
< / button >
2023-04-13 18:26:31 +00:00
< button
onclick="(function () {Cal.ns.second('ui', {styles:{enabledDateButton: {
2023-03-28 18:17:40 +00:00
backgroundColor: generateRandomHexColor(),
2022-04-25 04:33:00 +00:00
},
disabledDateButton: {
2023-03-28 18:17:40 +00:00
backgroundColor: generateRandomHexColor(),
2022-04-25 04:33:00 +00:00
},}})})()">
2023-04-18 12:53:46 +00:00
Change 'enabledDateButton` and `disabledDateButton` background Color[Deprecated]
2022-04-25 04:33:00 +00:00
< / button >
2022-03-31 08:45:47 +00:00
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-third" >
< h3 > < a href = "?only=ns:third" > [Custom Styling - Transparent Background]< / a > < / h3 >
2022-04-04 15:44:04 +00:00
< div style = "width: 30%" class = "place" >
< div > If you render booking embed in me, I would not let you be more than 30% wide< / div >
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-fourth" >
< h3 > < a href = "?only=ns:fourth" > [Team Event Test][inline taking entire width]< / a > < / h3 >
2022-04-04 15:44:04 +00:00
< div style = "width: 30%" class = "place" >
2022-03-31 08:45:47 +00:00
< div > If you render booking embed in me, I would not let you be more than 30% wide< / div >
< / div >
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-fifth" >
< h3 > < a href = "?only=ns:fifth" > [Team Event Test][inline along with some content]< / a > < / h3 >
2023-04-13 18:26:31 +00:00
< div style = "display: flex; align-items: center" >
< h4 style = "width: 30%" > On the right side you can book a team meeting =>< / h4 >
< div style = "width: 70%" class = "place" > < / div >
2022-04-25 04:33:00 +00:00
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-inline-routing-form" >
< h3 > < a href = "?only=inline-routing-form" > Inline Routing Form< / a > < / h3 >
2023-04-13 18:26:31 +00:00
< div style = "display: flex; align-items: center" >
< h4 style = "width: 30%" > On the right side you can book a team meeting =>< / h4 >
< div style = "width: 70%" class = "place" > < / div >
2022-07-28 10:50:25 +00:00
< / div >
< / div >
2022-12-13 07:23:26 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-hideEventTypeDetails" >
< h3 > < a href = "?only=hideEventTypeDetails" > Hide EventType Details Test< / a > < / h3 >
2023-04-13 18:26:31 +00:00
< div class = "place" > < / div >
2022-12-13 07:23:26 +00:00
< / div >
2023-05-16 19:41:47 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-conflicting-theme" >
< h3 > < a href = "?only=conflicting-theme" > You would be able to test out conflicting themes for the same namespace here.< / a > < / h3 >
< div class = "light" > < / div >
< div class = "dark" > < / div >
< i > 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< / i >
< / div >
< / div >
2023-06-28 13:45:39 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-monthView" >
< h3 > < a href = "?only=ns:monthView" > Test Month View< / a > < / h3 >
< div class = "place" style = "width: 100%" > < / div >
< / div >
2023-06-26 15:24:19 +00:00
< div class = "inline-embed-container" id = "cal-booking-place-weekView" >
2023-06-28 13:45:39 +00:00
< h3 > < a href = "?only=ns:weekView" > Test Week View< / a > < / h3 >
2023-06-26 15:24:19 +00:00
< div class = "place" style = "width: 100%" > < / div >
< / div >
< div class = "inline-embed-container" id = "cal-booking-place-columnView" >
< h3 > < a href = "?only=ns:columnView" > Test Column View< / a > < / h3 >
< div class = "place" style = "width: 100%" > < / div >
< / div >
2023-03-28 18:17:40 +00:00
< script src = "./playground.ts" > < / script >
2022-03-31 08:45:47 +00:00
< / body >
< / html >
