253 lines
11 KiB
HTML
253 lines
11 KiB
HTML
<html>
|
|
<head>
|
|
<title>Embed Playground</title>
|
|
<!-- <link rel="prerender" href="http://localhost:3000/free"> -->
|
|
<!-- <script src="./src/embed.ts" type="module"></script> -->
|
|
<script>
|
|
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
|
|
const hexString = randomInt.toString(16).padStart(6, "0");
|
|
|
|
// Return the hex string with a '#' prefix
|
|
return `#${hexString}`;
|
|
}
|
|
if (!location.search.includes("nonResponsive")) {
|
|
document.write('<meta name="viewport" content="width=device-width"/>');
|
|
}
|
|
(() => {
|
|
const url = new URL(document.URL);
|
|
// Only run the example specified by only=, avoids distraction and faster to test.
|
|
const only = (window.only = url.searchParams.get("only"));
|
|
const elementIdentifier = only !== "all" ? only.replace("ns:", "") : null;
|
|
if (elementIdentifier) {
|
|
location.hash = "#cal-booking-place-" + elementIdentifier + "-iframe";
|
|
}
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function (C, A, L) {
|
|
let p = function (a, ar) {
|
|
a.q.push(ar);
|
|
};
|
|
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 () {
|
|
p(api, arguments);
|
|
};
|
|
const namespace = ar[1];
|
|
api.q = api.q || [];
|
|
typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar);
|
|
return;
|
|
}
|
|
p(cal, ar);
|
|
};
|
|
})(window, "//localhost:3000/embed/embed.js", "init");
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(120, 116, 186, 1) 0%,
|
|
rgba(221, 221, 255, 1) 41%,
|
|
rgba(148, 232, 249, 1) 100%
|
|
);
|
|
}
|
|
.inline-embed-container {
|
|
/* border: 1px solid black; */
|
|
margin-bottom: 5px;
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.loader {
|
|
color: green;
|
|
}
|
|
* {
|
|
--cal-brand-color: gray;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
<div>
|
|
<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>
|
|
<a href="?only=ns:floatingButton">Floating Popup</a>
|
|
|
|
<h2>Popup Examples</h2>
|
|
<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>
|
|
<script>
|
|
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>`
|
|
);
|
|
</script>
|
|
<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>
|
|
<!-- <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> -->
|
|
</div>
|
|
<h2>Inline Embed Examples</h2>
|
|
<div id="namespaces-test">
|
|
<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>
|
|
<button onclick="Cal('ui',{theme:'light'})">Toggle to Light</button>
|
|
|
|
<i class="last-action"> You would see last Booking page action in my place </i>
|
|
<div>
|
|
<div class="place" style="width: 100%"></div>
|
|
<div class="loader" id="cal-booking-loader-"></div>
|
|
</div>
|
|
</div>
|
|
<div class="inline-embed-container" id="cal-booking-place-second">
|
|
<h3><a href="?only=ns:second">[Custom Styling]</a></h3>
|
|
<div class="place">
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<button
|
|
onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
|
|
Change <code>eventTypeListItem</code> bg color[Deprecated]
|
|
</button>
|
|
<button onclick="(function () {Cal.ns.second('ui', {styles:{body:{background:'red'}}})})()">
|
|
Change <code>body</code> bg color[Deprecated]
|
|
</button>
|
|
<button onclick="(function () {Cal.ns.second('ui', {styles:{align:'left'}})})()">
|
|
Align left[Deprecated]
|
|
</button>
|
|
<button onclick="(function () {Cal.ns.second('ui', {styles:{align:'center'}})})()">
|
|
Align Center[Deprecated]
|
|
</button>
|
|
<button
|
|
onclick="(function () {Cal.ns.second('ui', {styles:{enabledDateButton: {
|
|
backgroundColor: generateRandomHexColor(),
|
|
},
|
|
disabledDateButton: {
|
|
backgroundColor: generateRandomHexColor(),
|
|
},}})})()">
|
|
Change 'enabledDateButton` and `disabledDateButton` background Color[Deprecated]
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="inline-embed-container" id="cal-booking-place-third">
|
|
<h3><a href="?only=ns:third">[Custom Styling - Transparent Background]</a></h3>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="inline-embed-container" id="cal-booking-place-inline-routing-form">
|
|
<h3><a href="?only=inline-routing-form">Inline Routing Form</a></h3>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<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>
|
|
<script src="./playground.ts"></script>
|
|
</body>
|
|
</html>
|