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 >
if (!location.search.includes("nonResponsive")) {
document.write('< meta name = "viewport" content = "width=device-width" / > ');
}
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.
2022-12-13 07:23:26 +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) {
location.hash="#cal-booking-place-" + elementIdentifier + "-iframe"
2022-04-25 04:33:00 +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;
2022-12-13 07:23:26 +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 >
2022-12-13 07:23:26 +00:00
< span style = "display: block;" > < a href = "?nonResponsive" > Non responsive version of this page here< / a > < / span >
< span style = "display: block;" > < a href = "?only=prerender-test" > Go to Pre-render test page only< / a > < small > < / small > < / span >
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(`
< button data-cal-namespace = "prerendertestLightTheme" data-cal-config = '{"theme":"light"}' data-cal-link = "free?light&popup" > Book with Free User[Light Theme]< / button >
< i
>Corresponding Cal Link is being preloaded. Assuming that it would take you some time to click this
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
slow< /i
>`)
}
< / script >
< / div >
< span style = "display: block;" > < a href = "?only=all" > Render All embeds together< / a > < small > - It would be slow to load< / small > < / span >
< div >
< h2 > Popup Examples< / h2 >
2022-04-25 04:33:00 +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-07 20:08:34 +00:00
< button data-cal-namespace = "popupReschedule" data-cal-link = "reschedule/qm3kwt3aTnVD7vmP9tiT2f" > Reschedule Event[Auto Theme]< / button >
2022-04-25 04:33:00 +00:00
< button data-cal-namespace = "popupPaidEvent" data-cal-link = "pro/paid" > Book Paid Event [Auto Theme]< / button >
2022-12-13 07:23:26 +00:00
< button data-cal-namespace = "popupHideEventTypeDetails" data-cal-link = "free/30min" > Book Free Event [Auto Theme][uiConfig.hideEventTypeDetails=true]< / button >
2022-07-28 10:50:25 +00:00
< 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 >
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 >
< a href = "?only=ns:default" > [Dark Theme][Guests(janedoe@example.com and test@example.com)]< / a >
< / h3 >
2022-04-04 15:44:04 +00:00
< i class = "last-action" > You would see last Booking page action in my place < / i >
2022-04-14 02:47:34 +00:00
< div >
2022-10-19 21:25:03 +00:00
< 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" >
2022-04-25 04:33:00 +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 >
2022-03-31 08:45:47 +00:00
< button
onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
Change < code > eventTypeListItem< / code > bg color
< / button >
< button onclick = "(function () {Cal.ns.second('ui', {styles:{body:{background:'red'}}})})()" >
Change < code > body< / code > bg color
< / button >
2022-04-25 04:33:00 +00:00
< button onclick = "(function () {Cal.ns.second('ui', {styles:{align:'left'}})})()" >
Align left
< / button >
< button onclick = "(function () {Cal.ns.second('ui', {styles:{align:'center'}})})()" >
Align Center
< / button >
< button onclick = "(function ( ) { Cal . ns . second ( ' ui ' , { styles: { enabledDateButton: {
backgroundColor: '#D3D3D3',
},
disabledDateButton: {
backgroundColor: 'lightslategray',
},}})})()">
Change Date Button Color
< / 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 >
2022-04-25 04:33:00 +00:00
< div style = "display:flex;align-items: center;" >
2022-12-13 07:23:26 +00:00
< h4 style = "width: 30%" >
2022-04-25 04:33:00 +00:00
On the right side you can book a team meeting =>
2022-12-13 07:23:26 +00:00
< / h4 >
2022-04-25 04:33:00 +00:00
< div style = "width: 70%" class = "place" >
< / div >
< / 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 >
2022-07-28 10:50:25 +00:00
< div style = "display:flex;align-items: center;" >
2022-12-13 07:23:26 +00:00
< h4 style = "width: 30%" >
2022-07-28 10:50:25 +00:00
On the right side you can book a team meeting =>
2022-12-13 07:23:26 +00:00
< / h4 >
2022-07-28 10:50:25 +00:00
< div style = "width: 70%" class = "place" >
< / div >
< / 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 >
< div class = "place" >
< / div >
< / div >
2022-04-25 04:33:00 +00:00
2022-03-31 08:45:47 +00:00
< script >
2022-04-04 15:44:04 +00:00
const callback = function (e) {
const detail = e.detail;
const namespace = detail.namespace || "default";
if (detail.type === "linkReady") {
document.querySelector(`#cal-booking-place-${namespace} .loader`).remove();
2022-04-08 05:33:24 +00:00
} else if (detail.type === "linkFailed") {
document.querySelector(`#cal-booking-place-${namespace} .loader`).remove();
2022-04-04 15:44:04 +00:00
}
document.querySelector(`#cal-booking-place-${namespace} .last-action`).innerHTML = JSON.stringify(
e.detail
);
};
2022-03-31 08:45:47 +00:00
const searchParams = new URL(document.URL).searchParams;
2022-12-13 07:23:26 +00:00
let only = window.only
if (only === "all" || only === "ns:default") {
2022-04-04 15:44:04 +00:00
Cal("init", {
debug: 1,
origin: "http://localhost:3000",
});
Cal("inline", {
elementOrSelector: "#cal-booking-place-default .place",
calLink: "pro?case=1",
config: {
2022-04-25 04:33:00 +00:00
__autoScroll:true,
iframeAttrs: {
id: "cal-booking-place-default-iframe"
},
name: "John",
2022-04-04 15:44:04 +00:00
email: "johndoe@gmail.com",
notes: "Test Meeting",
2022-04-25 04:33:00 +00:00
guests: ["janedoe@example.com", "test@example.com"],
2022-04-04 15:44:04 +00:00
theme: "dark",
},
});
Cal("on", {
action: "*",
callback,
});
}
2022-12-13 07:23:26 +00:00
if (only === "all" || only === "ns:second") {
2022-04-04 15:44:04 +00:00
// Create a namespace "second". It can be accessed as Cal.ns.second with the exact same API as Cal
Cal("init", "second", {
debug: 1,
origin: "http://localhost:3000",
});
// Bulk API is supported - Keep all configuration at one place.
Cal.ns.second(
[
"inline",
{
elementOrSelector: "#cal-booking-place-second .place",
calLink: "pro?case=2",
2022-04-25 04:33:00 +00:00
config: {
iframeAttrs: {
id: "cal-booking-place-second-iframe"
2022-04-04 15:44:04 +00:00
},
2022-04-25 04:33:00 +00:00
}
2022-04-04 15:44:04 +00:00
},
]
);
Cal.ns.second("on", {
action: "*",
callback,
});
}
2022-12-13 07:23:26 +00:00
if (only === "all" || only === "ns:third") {
2022-04-04 15:44:04 +00:00
// Create a namespace "third". It can be accessed as Cal.ns.second with the exact same API as Cal
Cal("init", "third", {
debug: 1,
origin: "http://localhost:3000",
});
2022-04-08 05:33:24 +00:00
2022-04-04 15:44:04 +00:00
Cal.ns.third(
[
"inline",
{
elementOrSelector: "#cal-booking-place-third .place",
calLink: "pro/30min",
2022-04-25 04:33:00 +00:00
config: {
iframeAttrs: {
id: "cal-booking-place-third-iframe"
},
}
2022-04-04 15:44:04 +00:00
},
],
[
"ui",
{
styles: {
body: {
2022-04-08 05:33:24 +00:00
background: "transparent",
},
branding: {
brandColor: "#81e61c",
lightColor: "#494545",
lighterColor: "#4c4848",
lightestColor: "#7c7777",
highlightColor: "#9b0e0e",
medianColor: "black",
2022-03-31 08:45:47 +00:00
},
2022-08-31 09:47:23 +00:00
enabledDateButton: {
backgroundColor: "red"
},
disabledDateButton: {
backgroundColor: "green"
}
2022-03-31 08:45:47 +00:00
},
2022-04-04 15:44:04 +00:00
},
]
);
Cal.ns.third("on", {
action: "*",
callback,
});
2022-03-31 08:45:47 +00:00
}
2022-12-13 07:23:26 +00:00
if (only === "all" || only === "ns:fourth") {
2022-04-04 15:44:04 +00:00
Cal("init", "fourth", {
debug: 1,
origin: "http://localhost:3000",
});
Cal.ns.fourth(
[
"inline",
{
elementOrSelector: "#cal-booking-place-fourth .place",
2022-04-25 04:33:00 +00:00
calLink: "team/seeded-team",
config: {
iframeAttrs: {
id: "cal-booking-place-fourth-iframe"
},
}
2022-04-04 15:44:04 +00:00
},
],
[
"ui",
{
styles: {
body: {
2022-04-08 05:33:24 +00:00
background: "transparent",
},
branding: {
brandColor: "#81e61c",
lightColor: "#494545",
lighterColor: "#4c4848",
lightestColor: "#7c7777",
highlightColor: "#9b0e0e",
medianColor: "black",
2022-04-04 15:44:04 +00:00
},
},
},
]
);
Cal.ns.fourth("on", {
action: "*",
callback,
});
}
2022-12-13 07:23:26 +00:00
if (only === "all" || only === "ns:fifth") {
2022-04-25 04:33:00 +00:00
Cal("init", "fifth", {
debug: 1,
origin: "http://localhost:3000",
});
Cal.ns.fifth(
[
"inline",
{
elementOrSelector: "#cal-booking-place-fifth .place",
calLink: "team/seeded-team/collective-seeded-team-event",
config: {
iframeAttrs: {
id: "cal-booking-place-fifth-iframe"
},
}
},
],
);
Cal.ns.fifth("on", {
action: "*",
callback,
});
}
2022-12-13 07:23:26 +00:00
if (only === "all" || only === "prerender-test") {
2022-04-08 05:33:24 +00:00
Cal('init', 'prerendertestLightTheme', {
debug: 1,
origin: "http://localhost:3000",
})
Cal.ns.prerendertestLightTheme("preload", {
2022-04-04 15:44:04 +00:00
calLink: "free",
});
}
2022-07-28 10:50:25 +00:00
2022-12-13 07:23:26 +00:00
if (only === "all" || only === "inline-routing-form") {
2022-07-28 10:50:25 +00:00
Cal('init', 'inline-routing-form', {
debug: 1,
origin: "http://localhost:3000",
})
Cal.ns['inline-routing-form'](
[
"inline",
{
elementOrSelector: "#cal-booking-place-inline-routing-form .place",
2022-10-19 21:25:03 +00:00
calLink: "forms/948ae412-d995-4865-875a-48302588de03",
2022-07-28 10:50:25 +00:00
config: {
iframeAttrs: {
id: "cal-booking-place-inline-routing-form-iframe"
},
}
},
],
);
}
2022-12-13 07:23:26 +00:00
if (only === "all" || only === "hideEventTypeDetails") {
let identifier = "hideEventTypeDetails"
Cal('init', identifier, {
debug: 1,
origin: "http://localhost:3000",
})
Cal.ns.hideEventTypeDetails([
['inline', {
elementOrSelector: `#cal-booking-place-${identifier} .place`,
calLink: "free/30min",
config: {
iframeAttrs: {
id: `cal-booking-place-${identifier}-iframe`
},
}
}],
[
'ui', {
hideEventTypeDetails:true
}
]
]);
}
2022-04-08 05:33:24 +00:00
Cal('init', 'popupDarkTheme', {
debug: 1,
origin: "http://localhost:3000",
})
2022-12-07 20:08:34 +00:00
2022-12-13 07:23:26 +00:00
Cal('init', 'popupHideEventTypeDetails', {
debug: 1,
origin: "http://localhost:3000",
});
Cal.ns.popupHideEventTypeDetails('ui', {
hideEventTypeDetails:true
});
2022-12-07 20:08:34 +00:00
Cal('init', 'popupReschedule', {
debug: 1,
origin: "http://localhost:3000",
})
2022-04-25 04:33:00 +00:00
Cal('init', 'popupAutoTheme', {
debug: 1,
origin: "http://localhost:3000",
})
2022-04-08 05:33:24 +00:00
Cal('init', 'popupTeamLinkLightTheme', {
debug: 1,
origin: "http://localhost:3000",
})
Cal('init', 'popupTeamLinkDarkTheme', {
debug: 1,
origin: "http://localhost:3000",
})
2022-04-14 02:47:34 +00:00
2022-04-25 04:33:00 +00:00
Cal('init', 'popupTeamLinkDarkTheme', {
debug: 1,
origin: "http://localhost:3000",
})
Cal('init', 'popupTeamLinksList', {
debug: 1,
origin: "http://localhost:3000",
})
Cal('init', 'popupPaidEvent', {
2022-04-14 02:47:34 +00:00
debug: 1,
origin: "http://localhost:3000",
})
Cal("init", "floatingButton", {
debug: 1,
origin: "http://localhost:3000",
});
2022-07-28 10:50:25 +00:00
Cal('init', 'routingFormAuto', {
debug: 1,
origin: "http://localhost:3000",
})
Cal('init', 'routingFormDark', {
debug: 1,
origin: "http://localhost:3000",
2022-04-14 02:47:34 +00:00
})
2022-07-28 10:50:25 +00:00
2022-12-13 07:23:26 +00:00
if (only === "all" || only == "ns:floatingButton") {
2022-07-28 10:50:25 +00:00
Cal.ns.floatingButton("floatingButton", {
calLink: "pro"
})
}
2022-03-31 08:45:47 +00:00
< / script >
2022-04-04 15:44:04 +00:00
< script > < / script >
2022-03-31 08:45:47 +00:00
< / body >
< / html >
