2022-03-31 08:45:47 +00:00
< html >
< head >
<!-- <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.
const only = url.searchParams.get("only");
2022-07-28 10:50:25 +00:00
const elementIdentifier = only ? only.replace("ns:",""): null
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-03-31 08:45:47 +00:00
.debug {
/* border: 1px solid black; */
margin-bottom: 5px;
}
.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 >
< h3 > This page has a non responsive version accessible < a href = "?nonResponsive" > here< / a > < / h3 >
2022-04-04 15:44:04 +00:00
< h3 > Pre-render test page available at < a href = "?only=prerender-test" > here< / a > < / h3 >
2022-03-31 08:45:47 +00:00
< div >
2022-04-25 04:33:00 +00:00
< button data-cal-namespace = "prerendertestLightTheme" data-cal-config = '{"theme":"light"}' data-cal-link = "free?light&popup" > Book with Free User[Light Theme]< / button >
2022-03-31 08:45:47 +00:00
< div >
< 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
>
< / div >
2022-04-14 02:47:34 +00:00
< h2 > Other 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 >
< button data-cal-namespace = "popupPaidEvent" data-cal-link = "pro/paid" > Book Paid Event [Auto Theme]< / 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-04-14 02:47:34 +00:00
< div >
< 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 >
< / div >
2022-03-31 08:45:47 +00:00
< / div >
< div id = "namespaces-test" >
2022-04-04 15:44:04 +00:00
< div class = "debug" id = "cal-booking-place-default" >
< h2 >
2022-04-25 04:33:00 +00:00
Default Namespace(Cal)< i > [Dark Theme][inline][Guests(janedoe@example.com and test@example.com)]< / i >
2022-04-04 15:44:04 +00:00
< / h2 >
2022-03-31 08:45:47 +00:00
< div >
< i > < a href = "?only=ns:default" > Test in Zen Mode< / a > < / i >
< / div >
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-04-25 04:33:00 +00:00
< div class = "place" style = "width:50%;" > < / div >
2022-03-31 08:45:47 +00:00
< div class = "loader" id = "cal-booking-loader-" > Loading .....< / div >
< / div >
< / div >
2022-04-04 15:44:04 +00:00
< div class = "debug" id = "cal-booking-place-second" >
< h2 > Namespace "second"(Cal.ns.second)[Custom Styling][inline]< / h2 >
2022-03-31 08:45:47 +00:00
< div >
< i > < a href = "?only=ns:second" > Test in Zen Mode< / a > < / i >
< / div >
2022-04-04 15:44:04 +00:00
< i class = "last-action" >
2022-03-31 08:45:47 +00:00
< i > You would see last Booking page action in my place< / i >
< / i >
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 class = "loader" id = "cal-booking-loader-second" > Loading .....< / div >
< / div >
< / div >
2022-04-04 15:44:04 +00:00
< div class = "debug" id = "cal-booking-place-third" >
2022-04-08 05:33:24 +00:00
< h2 > Namespace "third"(Cal.ns.third)[inline][Custom Styling - Transparent Background]< / h2 >
2022-03-31 08:45:47 +00:00
< div >
< i > < a href = "?only=ns:third" > Test in Zen Mode< / a > < / i >
< / div >
2022-04-04 15:44:04 +00:00
< i class = "last-action" >
2022-03-31 08:45:47 +00:00
< i > You would see last Booking page action in my place< / i >
< / i >
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 class = "loader" id = "cal-booking-loader-third" > Loading .....< / div >
< / div >
< / div >
< div class = "debug" id = "cal-booking-place-fourth" >
2022-04-25 04:33:00 +00:00
< h2 > Namespace "fourth"(Cal.ns.fourth)[Team Event Test][inline taking entire width]< / h2 >
2022-04-04 15:44:04 +00:00
< div >
< i > < a href = "?only=ns:fourth" > Test in Zen Mode< / a > < / i >
< / div >
< i class = "last-action" >
< i > You would see last Booking page action in my place< / i >
< / i >
< 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 class = "loader" id = "cal-booking-loader-third" > Loading .....< / div >
< / div >
< / div >
< / div >
2022-04-25 04:33:00 +00:00
< div class = "debug" id = "cal-booking-place-fifth" >
< h2 > Namespace "fifth"(Cal.ns.fifth)[Team Event Test][inline along with some content]< / h2 >
< div >
< i > < a href = "?only=ns:fifth" > Test in Zen Mode< / a > < / i >
< / div >
< i class = "last-action" >
< i > You would see last Booking page action in my place< / i >
< / i >
< div style = "display:flex;align-items: center;" >
< h2 style = "width: 30%" >
On the right side you can book a team meeting =>
< / h2 >
< div style = "width: 70%" class = "place" >
< / div >
< / div >
< / div >
2022-07-28 10:50:25 +00:00
< div class = "debug" id = "cal-booking-place-inline-routing-form" >
< h2 > Inline Routing Form< / h2 >
< div >
< i > < a href = "?only=inline-routing-form" > Test in Zen Mode< / a > < / i >
< / div >
< i class = "last-action" >
< i > You would see last Booking page action in my place< / i >
< / i >
< div style = "display:flex;align-items: center;" >
< h2 style = "width: 30%" >
On the right side you can book a team meeting =>
< / h2 >
< div style = "width: 70%" class = "place" >
< / div >
< / 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;
const only = searchParams.get("only");
2022-04-04 15:44:04 +00:00
if (!only || only === "ns:default") {
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,
});
}
if (!only || only === "ns:second") {
// 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-03-31 08:45:47 +00:00
2022-04-04 15:44:04 +00:00
if (!only || only === "ns:third") {
// 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-04-04 15:44:04 +00:00
if (!only || only === "ns:fourth") {
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-04-25 04:33:00 +00:00
if (!only || only === "ns:fifth") {
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-04-04 15:44:04 +00:00
if (!only || 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
if (!only || only === "inline-routing-form") {
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",
calLink: "forms/9a7e8801-2f34-45ae-aa79-51859766a860",
config: {
iframeAttrs: {
id: "cal-booking-place-inline-routing-form-iframe"
},
}
},
],
);
}
2022-04-08 05:33:24 +00:00
Cal('init', 'popupDarkTheme', {
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
if (!only || only == "ns:floatingButton") {
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 >
