From 39935306fc758837dd7344706b31088b9ab98d78 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Thu, 14 Apr 2022 08:17:34 +0530
Subject: [PATCH] Embed behind authentication page, Floating Button Popup and
 other changes (#2468)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Omar López <zomars@me.com>
---
 apps/web/components/Shell.tsx                 |  12 +-
 .../booking/pages/AvailabilityPage.tsx        |  15 +-
 .../components/booking/pages/BookingPage.tsx  |  12 +-
 apps/web/lib/app-providers.tsx                |   6 +-
 apps/web/lib/telemetry.ts                     |   3 +-
 apps/web/pages/[user].tsx                     |   8 +
 apps/web/pages/team/[slug].tsx                |  16 +-
 packages/embeds/embed-core/README.md          |  39 ++--
 packages/embeds/embed-core/index.html         |  34 ++-
 .../playwright/tests/action-based.test.ts     |   6 +
 .../embeds/embed-core/src/FloatingButton.ts   |  33 +++
 packages/embeds/embed-core/src/ModalBox.ts    | 124 +++--------
 .../embeds/embed-core/src/embed-iframe.ts     |  29 ++-
 packages/embeds/embed-core/src/embed.css      |   2 +-
 packages/embeds/embed-core/src/embed.ts       |  63 +++++-
 packages/embeds/embed-core/src/inline.ts      |  27 +++
 packages/embeds/embed-core/src/loader.css     |  62 ++++++
 packages/embeds/embed-core/src/tailwind.css   | 203 ++++++++++++++++++
 packages/embeds/embed-react/src/Cal.tsx       |  16 +-
 packages/embeds/embed-react/test-cal.tsx      |   1 +
 20 files changed, 559 insertions(+), 152 deletions(-)
 create mode 100644 packages/embeds/embed-core/src/FloatingButton.ts
 create mode 100644 packages/embeds/embed-core/src/inline.ts
 create mode 100644 packages/embeds/embed-core/src/loader.css
 create mode 100644 packages/embeds/embed-core/src/tailwind.css

diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx
index 12dd4ea822..15efb679e1 100644
--- a/apps/web/components/Shell.tsx
+++ b/apps/web/components/Shell.tsx
@@ -17,6 +17,7 @@ import { useRouter } from "next/router";
 import React, { Fragment, ReactNode, useEffect } from "react";
 import { Toaster } from "react-hot-toast";
 
+import { useIsEmbed } from "@calcom/embed-core";
 import Button from "@calcom/ui/Button";
 import Dropdown, {
   DropdownMenuContent,
@@ -135,6 +136,7 @@ export default function Shell(props: {
   flexChildrenContainer?: boolean;
   isPublic?: boolean;
 }) {
+  const isEmbed = useIsEmbed();
   const { t } = useLocale();
   const router = useRouter();
   const { loading, session } = useRedirectToLoginIfUnauthenticated(props.isPublic);
@@ -231,7 +233,7 @@ export default function Shell(props: {
         className={classNames("flex h-screen overflow-hidden", props.large ? "bg-white" : "bg-gray-100")}
         data-testid="dashboard-shell">
         {status === "authenticated" && (
-          <div className="hidden md:flex lg:flex-shrink-0">
+          <div style={isEmbed ? { display: "none" } : {}} className="hidden md:flex lg:flex-shrink-0">
             <div className="flex w-14 flex-col lg:w-56">
               <div className="flex h-0 flex-1 flex-col border-r border-gray-200 bg-white">
                 <div className="flex flex-1 flex-col overflow-y-auto pt-3 pb-4 lg:pt-5">
@@ -322,7 +324,9 @@ export default function Shell(props: {
             )}>
             {/* show top navigation for md and smaller (tablet and phones) */}
             {status === "authenticated" && (
-              <nav className="flex items-center justify-between border-b border-gray-200 bg-white p-4 md:hidden">
+              <nav
+                style={isEmbed ? { display: "none" } : {}}
+                className="flex items-center justify-between border-b border-gray-200 bg-white p-4 md:hidden">
                 <Link href="/event-types">
                   <a>
                     <Logo />
@@ -382,7 +386,9 @@ export default function Shell(props: {
               </div>
               {/* show bottom navigation for md and smaller (tablet and phones) */}
               {status === "authenticated" && (
-                <nav className="bottom-nav fixed bottom-0 z-30 flex w-full bg-white shadow md:hidden">
+                <nav
+                  style={isEmbed ? { display: "none" } : {}}
+                  className="bottom-nav fixed bottom-0 z-30 flex w-full bg-white shadow md:hidden">
                   {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
                   {navigation.flatMap((item, itemIdx) =>
                     item.href === "/settings/profile" ? (
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 9a29f2793f..cd2c281339 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -16,7 +16,7 @@ import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
-import { useEmbedStyles, useIsEmbed, useIsBackgroundTransparent } from "@calcom/embed-core";
+import { useEmbedStyles, useIsEmbed, useIsBackgroundTransparent, sdkActionManager } from "@calcom/embed-core";
 import classNames from "@calcom/lib/classNames";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
@@ -83,6 +83,10 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
     return null;
   }, [router.query.date]);
 
+  if (selectedDate) {
+    // Let iframe take the width available due to increase in max-width
+    sdkActionManager?.fire("__refreshWidth", {});
+  }
   const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
   const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
 
@@ -91,7 +95,12 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
   useEffect(() => {
     handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
 
-    telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters()));
+    telemetry.withJitsu((jitsu) =>
+      jitsu.track(
+        telemetryEventTypes.pageView,
+        collectPageParameters("availability", { isTeamBooking: document.URL.includes("team/") })
+      )
+    );
   }, [telemetry]);
 
   const changeDate = (newDate: Dayjs) => {
@@ -136,7 +145,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
         <main
           className={
             isEmbed
-              ? ""
+              ? classNames("m-auto", selectedDate ? "max-w-5xl" : "max-w-3xl")
               : "transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24 " +
                 (selectedDate ? "max-w-5xl" : "max-w-3xl")
           }>
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 3dd4a421d1..dd36b04f36 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -222,7 +222,10 @@ const BookingPage = ({
 
   const bookEvent = (booking: BookingFormValues) => {
     telemetry.withJitsu((jitsu) =>
-      jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters())
+      jitsu.track(
+        telemetryEventTypes.bookingConfirmed,
+        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
+      )
     );
 
     // "metadata" is a reserved key to allow for connecting external users without relying on the email address.
@@ -290,9 +293,10 @@ const BookingPage = ({
       </Head>
       <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
       <main
-        className={
-          isEmbed ? "mx-auto" : "mx-auto my-0 max-w-3xl rounded-sm sm:my-24 sm:border sm:dark:border-gray-600"
-        }>
+        className={classNames(
+          isEmbed ? "mx-auto" : "mx-auto my-0 rounded-sm sm:my-24",
+          "max-w-3xl  sm:border sm:dark:border-gray-600"
+        )}>
         {isReady && (
           <div
             className={classNames(
diff --git a/apps/web/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx
index 6a9707c1fa..4fa416cafd 100644
--- a/apps/web/lib/app-providers.tsx
+++ b/apps/web/lib/app-providers.tsx
@@ -1,7 +1,7 @@
 import { SessionProvider } from "next-auth/react";
 import { appWithTranslation } from "next-i18next";
 import type { AppProps as NextAppProps } from "next/app";
-import { ComponentProps, ReactNode } from "react";
+import { ComponentProps, ReactNode, useMemo } from "react";
 
 import DynamicHelpscoutProvider from "@ee/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@ee/lib/intercom/providerDynamic";
@@ -48,9 +48,9 @@ const AppProviders = (props: AppPropsWithChildren) => {
       <CustomI18nextProvider {...props}>{props.children}</CustomI18nextProvider>
     </SessionProvider>
   );
-
+  const telemetryClient = useMemo(createTelemetryClient, []);
   return (
-    <TelemetryProvider value={createTelemetryClient()}>
+    <TelemetryProvider value={telemetryClient}>
       {isPublicPage ? (
         RemainingProviders
       ) : (
diff --git a/apps/web/lib/telemetry.ts b/apps/web/lib/telemetry.ts
index 5fa5ff015b..90093be7db 100644
--- a/apps/web/lib/telemetry.ts
+++ b/apps/web/lib/telemetry.ts
@@ -46,7 +46,7 @@ function isLocalhost(host: string) {
  * Collects page parameters and makes sure no sensitive data made it to telemetry
  * @param route current next.js route
  */
-export function collectPageParameters(route?: string): any {
+export function collectPageParameters(route?: string, extraData: Record<string, any> = {}): any {
   const host = document.location.hostname;
   const maskedHost = isLocalhost(host) ? "localhost" : "masked";
   //starts with ''
@@ -60,6 +60,7 @@ export function collectPageParameters(route?: string): any {
     doc_search: "",
     doc_path: docPath,
     referer: "",
+    ...extraData,
   };
 }
 
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 672841db1d..43a8463869 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -20,6 +20,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import useTheme from "@lib/hooks/useTheme";
 import prisma from "@lib/prisma";
+import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import AvatarGroup from "@components/ui/AvatarGroup";
@@ -108,6 +109,13 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
   const nameOrUsername = user.name || user.username || "";
   const [evtsToVerify, setEvtsToVerify] = useState<EvtsToVerify>({});
   const isEmbed = useIsEmbed();
+  const telemetry = useTelemetry();
+
+  useEffect(() => {
+    telemetry.withJitsu((jitsu) =>
+      jitsu.track(telemetryEventTypes.pageView, collectPageParameters("/[user]"))
+    );
+  }, [telemetry]);
   return (
     <>
       <Theme />
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index df3a85db44..260cbc4d78 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -3,7 +3,7 @@ import { UserPlan } from "@prisma/client";
 import classNames from "classnames";
 import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
-import React from "react";
+import React, { useEffect } from "react";
 
 import { useIsEmbed } from "@calcom/embed-core";
 import Button from "@calcom/ui/Button";
@@ -15,6 +15,7 @@ import useTheme from "@lib/hooks/useTheme";
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
 import { defaultAvatarSrc } from "@lib/profile";
 import { getTeamWithMembers } from "@lib/queries/teams";
+import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import EventTypeDescription from "@components/eventtype/EventTypeDescription";
@@ -25,13 +26,24 @@ import AvatarGroup from "@components/ui/AvatarGroup";
 import Text from "@components/ui/Text";
 
 export type TeamPageProps = inferSSRProps<typeof getServerSideProps>;
-
 function TeamPage({ team }: TeamPageProps) {
   const { isReady, Theme } = useTheme();
   const showMembers = useToggleQuery("members");
   const { t } = useLocale();
   useExposePlanGlobally("PRO");
   const isEmbed = useIsEmbed();
+  const telemetry = useTelemetry();
+
+  useEffect(() => {
+    telemetry.withJitsu((jitsu) =>
+      jitsu.track(
+        telemetryEventTypes.pageView,
+        collectPageParameters("/team/[slug]", {
+          isTeamBooking: true,
+        })
+      )
+    );
+  }, [telemetry]);
   const eventTypes = (
     <ul className="space-y-3">
       {team.eventTypes.map((type) => (
diff --git a/packages/embeds/embed-core/README.md b/packages/embeds/embed-core/README.md
index f223288e40..bd1e76dcb1 100644
--- a/packages/embeds/embed-core/README.md
+++ b/packages/embeds/embed-core/README.md
@@ -41,6 +41,17 @@ Make `dist/embed.umd.js` servable on URL <http://cal.com/embed.js>
   - let user choose the loader for ModalBox
   - If website owner links the booking page directly for an event, should the user be able to go to events-listing page using back button ?
   - Let user specify both dark and light theme colors. Right now the colors specified are for light theme.
+  - Embed doesn't adapt to screen size without page refresh.
+    - Try opening in portrait mode and then go to landscape mode.
+  - In inline mode, due to changing height of iframe, the content goes beyond the fold. Automatic scroll needs to be implemented.
+  - On Availability page, when selecting date, width doesn't increase. max-width is there but because of strict width restriction with iframe, it doesn't allow it to expand.
+
+- Branding
+  - Powered by Cal.com and 'Try it for free'. Should they be shown only for FREE account.
+  - Branding at the bottom has been removed for UI improvements, need to see where to add it.
+
+- API
+  - Allow loader color customization using UI command itself too.
 
 - Automation Tests
   - Run automation tests in CI
@@ -64,8 +75,18 @@ Make `dist/embed.umd.js` servable on URL <http://cal.com/embed.js>
 
 - Might be better to pass all configuration using a single base64encoded query param to booking page.
 
+- Performance Improvements
+  - Custom written Tailwind CSS is sent multiple times for different custom elements.
+  
 - Embed Code Generator
 
+- Release Issues
+  - Compatibility Issue - When embed-iframe.js is updated in such a way that it is not compatible with embed.js, doing a release might break the embed for some time. e.g. iframeReady event let's say get's changed to something else
+    - Best Case scenario - App and Website goes live at the same time. A website using embed loads the same updated and thus compatible versions of embed.js and embed-iframe.js
+    - Worst case scenario - App goes live first, website PR isn't merged yet and thus a website using the embed would load updated version of embed-iframe but outdated version of embed.js possibly breaking the embed.
+    - Ideal Solution: It would be to keep the libraries versioned and embed.js should instruct app within iframe to load a particular version. But if we push a security fix, it is possible that someone is still enforcing embed to load version with security issue. Need to handle this.
+    - Quick Solution: Serve embed.js also from app, so that they go live together and there is only a slight chance of compatibility issues on going live. Note, that they can still occur as 2 different requests are sent at different times to fetch the libraries and deployments can go live in between,
+
 - UI Config Features
   - Theme switch dynamically - If user switches the theme on website, he should be able to do it on embed. Add a demo for the API. Also, test system theme handling.
     - How would the user add on hover styles just using style attribute ?
@@ -73,22 +94,8 @@ Make `dist/embed.umd.js` servable on URL <http://cal.com/embed.js>
 - If just iframe refreshes due to some reason, embed script can't replay the applied instructions.
 
 - React Component
-  - `onClick` support with preloading
-
-Embed for authenticated pages
-
-- Currently embed is properly supported for non authenticated pages like cal.com/john. It is supported for team links as well.
-- For such pages, you can customize the colors of all the texts and give a common background to all pages under your cal link
-- If we can support other pages, which are behind login, it can open possibilities for users to show "upcoming bookings", "availability" and other functionalities on their website itself. 
-  - First of all we need more usecases for this.
-  - Think of it in this way. Cal.com is build with many different UI components that are put together to work seamlessly, what if the user can choose which component they need and which they don't
-  - The main problem with this is that, there are so many pages in the app. We would need to ensure that all the pages use the same text colors only that are available as embed UI configuration.
-  - We would need to hide certain UI components when opening a page. e.g. the navigation component wouldn't be there.
-  - User might want to change the text also for components, e.g. he might call "Event Type" as "Meeting Type" everywhere. common.json would be useful in this scenario.
-  - Login form shouldn't be visible in embed as auth would be taken care of separately. If due to cookies being expired, the component can't be shown then whatever auth flow is configured, can be triggered
-    - In most scenarios, user would have a website on which the visitors would be signing in already into their system(and thus they own the user table) and he would want to just link those users to cal.com - This would be allowed only with self hosted instance ?
-      - So, cal.com won't maintain the user details itself and would simply store a user id which it would provide to hosting website to retrieve user information whenever it needs it.
-
+  - `onClick` support with automatic preloading
+- Shadow DOM is currently in open state, which probably means that any styling change on website can possibly impact loader.
 
 ## Pending Documentation
 
diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index de639074ed..6f6a53a87c 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -54,6 +54,10 @@
       .loader {
         color: green;
       }
+      * {
+        --cal-brand-border-color: blue;
+        --cal-brand-background-color: blue;
+      }
     </style>
   </head>
   <body>
@@ -61,10 +65,6 @@
     <h3>Pre-render test page available at <a href="?only=prerender-test">here</a></h3>
     <div>
       <button data-cal-namespace="prerendertestLightTheme" data-cal-link="free?light&popup">Book with Free User[Light Theme]</button>
-      <button data-cal-namespace="popupDarkTheme" data-cal-config='{"theme":"dark"}' data-cal-link="free?dark&popup">Book with Free User[Dark Theme]</button>
-      <button data-cal-namespace="popupTeamLinkLightTheme" data-cal-config='{"theme":"light"}' data-cal-link="team/test-team?team&light&popup">Book with Test Team[Light Theme]</button>
-      <button data-cal-namespace="popupTeamLinkDarkTheme" data-cal-config='{"theme":"dark"}' data-cal-link="team/test-team?team&dark&popup">Book with Test Team[Dark Theme]</button>
-
       <div>
         <i
           >Corresponding Cal Link is being preloaded. Assuming that it would take you some time to click this
@@ -73,6 +73,14 @@
           slow</i
         >
       </div>
+      <h2>Other Popup Examples</h2>
+      <button data-cal-namespace="popupDarkTheme" data-cal-config='{"theme":"dark"}' data-cal-link="free?dark&popup">Book with Free User[Dark Theme]</button>
+      <button data-cal-namespace="popupTeamLinkLightTheme" data-cal-config='{"theme":"light"}' data-cal-link="team/test-team?team&light&popup">Book with Test Team[Light Theme]</button>
+      <button data-cal-namespace="popupTeamLinkDarkTheme" data-cal-config='{"theme":"dark"}' data-cal-link="team/test-team?team&dark&popup">Book with Test Team[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>
     <div id="namespaces-test">
       <div class="debug" id="cal-booking-place-default">
@@ -83,11 +91,12 @@
           <i><a href="?only=ns:default">Test in Zen Mode</a></i>
         </div>
         <i class="last-action"> You would see last Booking page action in my place </i>
-        <div style="max-height: 30vh; overflow: scroll" class="place">
+        <div >
           <div>
             if you render booking embed in me, I would not let it be more than 30vh in height. So you would
             have to scroll to see the entire content
           </div>
+          <div class="place" style="width:50%; max-height: 30vh; overflow: scroll"></div>
           <div class="loader" id="cal-booking-loader-">Loading .....</div>
         </div>
       </div>
@@ -320,6 +329,21 @@
         debug: 1,
         origin: "http://localhost:3000",
       })
+
+      Cal('init', 'upcomingBookings', {
+        debug: 1,
+        origin: "http://localhost:3000",
+      })
+
+      Cal("init", "floatingButton", {
+        debug: 1,
+        origin: "http://localhost:3000",
+      });
+      if (!only  || only == "ns:floatingButton") {
+      Cal.ns.floatingButton("floatingButton", {
+        calLink: "pro"
+      })
+    }
     </script>
     <script></script>
   </body>
diff --git a/packages/embeds/embed-core/playwright/tests/action-based.test.ts b/packages/embeds/embed-core/playwright/tests/action-based.test.ts
index 2da83610cf..559c199de2 100644
--- a/packages/embeds/embed-core/playwright/tests/action-based.test.ts
+++ b/packages/embeds/embed-core/playwright/tests/action-based.test.ts
@@ -18,3 +18,9 @@ test("should open embed iframe on click", async ({ page, addEmbedListeners, getA
     pathname: "/free",
   });
 });
+
+todo("Floating Button Test with Dark Theme");
+
+todo("Floating Button Test with Light Theme");
+
+todo("Add snapshot test for embed iframe");
diff --git a/packages/embeds/embed-core/src/FloatingButton.ts b/packages/embeds/embed-core/src/FloatingButton.ts
new file mode 100644
index 0000000000..670a7008ad
--- /dev/null
+++ b/packages/embeds/embed-core/src/FloatingButton.ts
@@ -0,0 +1,33 @@
+import tailwindCss from "./tailwind.css";
+
+export class FloatingButton extends HTMLElement {
+  constructor() {
+    super();
+    const buttonHtml = `
+			<style>
+			${tailwindCss}
+			</style>
+			<button
+                  class="fixed bottom-4 right-4 flex h-16 origin-center transform cursor-pointer items-center rounded-full py-4 px-6 text-base outline-none drop-shadow-md transition transition-all focus:outline-none focus:ring-4 focus:ring-gray-600 focus:ring-opacity-50 active:scale-95 md:bottom-6 md:right-10"
+                  style="background-color: rgb(255, 202, 0); color: rgb(20, 30, 47); z-index: 10001">
+                  <div class="mr-3 flex items-center justify-center">
+                    <svg
+                      class="h-7 w-7"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                    </svg>
+                  </div>
+                  <div class="font-semibold leading-5 antialiased">Book my Cal</div>
+                </button>`;
+    this.attachShadow({ mode: "open" });
+
+    this.shadowRoot!.innerHTML = buttonHtml;
+  }
+}
diff --git a/packages/embeds/embed-core/src/ModalBox.ts b/packages/embeds/embed-core/src/ModalBox.ts
index 8bef5e3869..ce56c8d10f 100644
--- a/packages/embeds/embed-core/src/ModalBox.ts
+++ b/packages/embeds/embed-core/src/ModalBox.ts
@@ -1,25 +1,39 @@
+import loaderCss from "./loader.css";
+import tailwindCss from "./tailwind.css";
+
 export class ModalBox extends HTMLElement {
   static htmlOverflow: string;
   //@ts-ignore
   static get observedAttributes() {
-    return ["loading"];
+    return ["state"];
+  }
+
+  show(show: boolean) {
+    // We can't make it display none as that takes iframe width and height calculations to 0
+    (this.shadowRoot!.host as unknown as any).style.visibility = show ? "visible" : "hidden";
   }
 
   close() {
-    this.shadowRoot!.host.remove();
+    this.show(false);
     document.body.style.overflow = ModalBox.htmlOverflow;
   }
+
   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (name === "loading" && newValue == "done") {
+    if (name !== "state") {
+      return;
+    }
+
+    if (newValue == "loaded") {
       (this.shadowRoot!.querySelector("#loader")! as HTMLElement).style.display = "none";
+    } else if (newValue === "started") {
+      this.show(true);
     }
   }
 
   connectedCallback() {
     const closeEl = this.shadowRoot!.querySelector(".close") as HTMLElement;
 
-    document.addEventListener("click", (e) => {
-      const el = e.target as HTMLElement;
+    this.shadowRoot!.host.addEventListener("click", (e) => {
       this.close();
     });
 
@@ -32,37 +46,7 @@ export class ModalBox extends HTMLElement {
     super();
     //FIXME: this styling goes as is as it's a JS string. That's a lot of unnecessary whitespaces over the wire.
     const modalHtml = `
-		<style>
-		.bg-gray-50 {
-			--tw-bg-opacity: 1;
-			background-color: rgb(248 248 248 / var(--tw-bg-opacity));
-		}
-		
-		.items-center {
-			align-items: center;
-		}
-		.w-full {
-			width: 100%;
-		}
-		.h-screen {
-			height: 100%;
-		}
-		.flex {
-			display: flex;
-		}
-		.z-highest {
-			z-index: 500000000;
-		}
-		.absolute {
-			position: absolute;
-		}
-		.border-brand {
-			border-color: white;
-		}
-		.bg-brand {
-			background-color: white;
-		}
-		
+		<style> ${tailwindCss}
 		.backdrop {
 		  position:fixed;
 		  width:100%;
@@ -73,10 +57,10 @@ export class ModalBox extends HTMLElement {
 		  display:block;
 		  background-color:rgb(5,5,5, 0.8)
 		}
+		
 		@media only screen and (min-width:600px) {
 		  .modal-box {
 			margin:0 auto; 
-			border-radius: 8px;
 			margin-top:20px; 
 			margin-bottom:20px;
 			position:absolute;
@@ -112,69 +96,11 @@ export class ModalBox extends HTMLElement {
 		  color:white;
 		  cursor: pointer;
 		}
-
-		@keyframes loader {
-			0% {
-			transform: rotate(0deg);
-			}
-		
-			25% {
-			transform: rotate(180deg);
-			}
-		
-			50% {
-			transform: rotate(180deg);
-			}
-		
-			75% {
-			transform: rotate(360deg);
-			}
-		
-			100% {
-			transform: rotate(360deg);
-			}
-		}
-	
-	@keyframes loader-inner {
-		0% {
-		height: 0%;
-		}
-	
-		25% {
-		height: 0%;
-		}
-	
-		50% {
-		height: 100%;
-		}
-	
-		75% {
-		height: 100%;
-		}
-	
-		100% {
-		height: 0%;
-		}
-	}
-		
-		.loader-inner {
-			vertical-align: top;
-			display: inline-block;
-			width: 100%;
-			animation: loader-inner 2s infinite ease-in;
-		}
-
 		.loader {
-			display: block;
-			width: 30px;
-			height: 30px;
-			margin: 60px auto;
-			position: relative;
-			border-width: 4px;
-			border-style: solid;
-			-webkit-animation: loader 2s infinite ease;
-			animation: loader 2s infinite ease;
-		}
+			--cal-brand-border-color: white;
+			--cal-brand-background-color: white;
+		 }
+		${loaderCss}
 		</style>
 		<div class="backdrop">
 		<div class="header">
diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index fd1d3f8b28..c41ef8c1c2 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/packages/embeds/embed-core/src/embed-iframe.ts
@@ -275,6 +275,7 @@ const messageParent = (data: any) => {
 
 function keepParentInformedAboutDimensionChanges() {
   let knownIframeHeight: Number | null = null;
+  let knownIframeWidth: Number | null = null;
   let numDimensionChanges = 0;
   let isFirstTime = true;
   let isWindowLoadComplete = false;
@@ -290,18 +291,20 @@ function keepParentInformedAboutDimensionChanges() {
       setTimeout(() => {
         isWindowLoadComplete = true;
         informAboutScroll();
-      }, 10);
+      }, 100);
       return;
     }
     if (!embedStore.windowLoadEventFired) {
       sdkActionManager?.fire("__windowLoadComplete", {});
     }
     embedStore.windowLoadEventFired = true;
-
+    // Use the dimensions of main element as in most places there is max-width restriction on it and we just want to show the main content.
+    // It avoids the unwanted padding outside main tag.
+    const mainElement = document.getElementsByTagName("main")[0] || document.documentElement;
     const documentScrollHeight = document.documentElement.scrollHeight;
     const documentScrollWidth = document.documentElement.scrollWidth;
-    const contentHeight = document.documentElement.offsetHeight;
-    const contentWidth = document.documentElement.offsetWidth;
+    const contentHeight = mainElement.offsetHeight;
+    const contentWidth = mainElement.offsetWidth;
 
     // During first render let iframe tell parent that how much is the expected height to avoid scroll.
     // Parent would set the same value as the height of iframe which would prevent scroll.
@@ -309,9 +312,13 @@ function keepParentInformedAboutDimensionChanges() {
     let iframeHeight = isFirstTime ? documentScrollHeight : contentHeight;
     let iframeWidth = isFirstTime ? documentScrollWidth : contentWidth;
     embedStore.parentInformedAboutContentHeight = true;
-    // TODO: Handle width as well.
-    if (knownIframeHeight !== iframeHeight) {
+    if (!iframeHeight || !iframeWidth) {
+      runAsap(informAboutScroll);
+      return;
+    }
+    if (knownIframeHeight !== iframeHeight || knownIframeWidth !== iframeWidth) {
       knownIframeHeight = iframeHeight;
+      knownIframeWidth = iframeWidth;
       numDimensionChanges++;
       // FIXME: This event shouldn't be subscribable by the user. Only by the SDK.
       sdkActionManager?.fire("__dimensionChanged", {
@@ -350,6 +357,16 @@ if (isBrowser) {
       messageParent(detail);
     });
 
+    // This event should be fired whenever you want to let the content take automatic width which is available.
+    // Because on cal-iframe we set explicty width to make it look inline and part of page, there is never space available for content to automatically expand
+    // This is a HACK to quickly tell iframe to go full width and let iframe content adapt to that and set new width.
+    sdkActionManager?.on("__refreshWidth", () => {
+      sdkActionManager?.fire("__dimensionChanged", {
+        iframeWidth: 100,
+        __unit: "%",
+      });
+    });
+
     window.addEventListener("message", (e) => {
       const data: Record<string, any> = e.data;
       if (!data) {
diff --git a/packages/embeds/embed-core/src/embed.css b/packages/embeds/embed-core/src/embed.css
index a51088bd4f..08b796dcf5 100644
--- a/packages/embeds/embed-core/src/embed.css
+++ b/packages/embeds/embed-core/src/embed.css
@@ -3,5 +3,5 @@
 */
 .cal-embed {
   border: 0px;
-  min-height: 100%;
+  min-height: 300px;
 }
diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts
index 2db2428aae..aa2383112a 100644
--- a/packages/embeds/embed-core/src/embed.ts
+++ b/packages/embeds/embed-core/src/embed.ts
@@ -1,8 +1,10 @@
 import type { CalWindow } from "@calcom/embed-snippet";
 
+import { FloatingButton } from "./FloatingButton";
 import { ModalBox } from "./ModalBox";
 import { methods, UiConfig } from "./embed-iframe";
 import css from "./embed.css";
+import { Inline } from "./inline";
 import { SdkActionManager } from "./sdk-action-manager";
 
 declare module "*.css";
@@ -77,6 +79,8 @@ export class Cal {
 
   modalBox!: Element;
 
+  inlineEl!: Element;
+
   namespace: string;
 
   actionManager: SdkActionManager;
@@ -201,6 +205,7 @@ export class Cal {
       required: true,
       props: {
         calLink: {
+          // TODO: Add a special type calLink for it and validate that it doesn't start with / or https?://
           required: true,
           type: "string",
         },
@@ -224,15 +229,41 @@ export class Cal {
     if (!element) {
       throw new Error("Element not found");
     }
-    element.appendChild(iframe);
+    const template = document.createElement("template");
+    template.innerHTML = `<cal-inline style="max-height:inherit;height:inherit;min-height:inherit;display:block;position:relative"></cal-inline>`;
+    this.inlineEl = template.content.children[0];
+    this.inlineEl.appendChild(iframe);
+    element.appendChild(template.content);
   }
 
-  modal({ calLink, config = {} }: { calLink: string; config?: Record<string, string> }) {
+  floatingButton({ calLink }: { calLink: string }) {
+    validate(arguments[0], {
+      required: true,
+      props: {
+        calLink: {
+          required: true,
+          type: "string",
+        },
+      },
+    });
+    const template = document.createElement("template");
+    template.innerHTML = `<cal-floating-button data-cal-namespace=${this.namespace} data-cal-link=${calLink}></cal-floating-button>`;
+    document.body.appendChild(template.content);
+  }
+
+  modal({ calLink, config = {}, uid }: { calLink: string; config?: Record<string, string>; uid: number }) {
+    const existingModalEl = document.querySelector(`cal-modal-box[uid="${uid}"]`);
+    if (existingModalEl) {
+      existingModalEl.setAttribute("state", "started");
+      return;
+    }
     const iframe = this.createIframe({ calLink, queryObject: Cal.getQueryObject(config) });
+    iframe.style.borderRadius = "8px";
+
     iframe.style.height = "100%";
     iframe.style.width = "100%";
     const template = document.createElement("template");
-    template.innerHTML = `<cal-modal-box></cal-modal-box>`;
+    template.innerHTML = `<cal-modal-box uid="${uid}"></cal-modal-box>`;
     this.modalBox = template.content.children[0];
     this.modalBox.appendChild(iframe);
     document.body.appendChild(template.content);
@@ -338,12 +369,26 @@ export class Cal {
         // Iframe might be pre-rendering
         return;
       }
-      iframe.style.height = data.iframeHeight + "px";
-      iframe.style.width = data.iframeWidth + "px";
+      let unit = "px";
+      if (data.__unit) {
+        unit = data.__unit;
+      }
+      if (data.iframeHeight) {
+        iframe.style.height = data.iframeHeight + unit;
+      }
+
+      if (data.iframeWidth) {
+        iframe.style.width = data.iframeWidth + unit;
+      }
+
       if (this.modalBox) {
         // It ensures that if the iframe is so tall that it can't fit in the parent window without scroll. Then force the scroll by restricting the max-height to innerHeight
         // This case is reproducible when viewing in ModalBox on Mobile.
         iframe.style.maxHeight = window.innerHeight + "px";
+        // Automatically setting the height of modal-box as per iframe creates problem in managing width of iframe.
+        // if (iframe.style.width !== "100%") {
+        //   this.modalBox!.shadowRoot!.querySelector(".modal-box")!.style.width = iframe.style.width;
+        // }
       }
     });
 
@@ -355,7 +400,8 @@ export class Cal {
       });
     });
     this.actionManager.on("linkReady", (e) => {
-      this.modalBox?.setAttribute("loading", "done");
+      this.modalBox?.setAttribute("state", "loaded");
+      this.inlineEl?.setAttribute("loading", "done");
     });
     this.actionManager.on("linkFailed", (e) => {
       this.iframe?.remove();
@@ -395,6 +441,8 @@ document.addEventListener("click", (e) => {
   if (!path) {
     return;
   }
+  const modalUniqueId = ((htmlElement as unknown as any).uniqueId =
+    (htmlElement as unknown as any).uniqueId || Date.now());
   const namespace = htmlElement.dataset.calNamespace;
   const configString = htmlElement.dataset.calConfig || "";
   let config;
@@ -410,7 +458,10 @@ document.addEventListener("click", (e) => {
   api("modal", {
     calLink: path,
     config,
+    uid: modalUniqueId,
   });
 });
 
 customElements.define("cal-modal-box", ModalBox);
+customElements.define("cal-floating-button", FloatingButton);
+customElements.define("cal-inline", Inline);
diff --git a/packages/embeds/embed-core/src/inline.ts b/packages/embeds/embed-core/src/inline.ts
new file mode 100644
index 0000000000..23e804f9a3
--- /dev/null
+++ b/packages/embeds/embed-core/src/inline.ts
@@ -0,0 +1,27 @@
+import loaderCss from "./loader.css";
+import tailwindCss from "./tailwind.css";
+
+export class Inline extends HTMLElement {
+  //@ts-ignore
+  static get observedAttributes() {
+    return ["loading"];
+  }
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (name === "loading" && newValue == "done") {
+      (this.shadowRoot!.querySelector("#loader")! as HTMLElement).style.display = "none";
+    }
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot!.innerHTML = `
+	<style> ${tailwindCss}${loaderCss}</style>
+	<div id="loader" style="left:0;right:0" class="absolute z-highest flex h-screen w-full items-center">
+		<div class="loader border-brand dark:border-darkmodebrand">
+			<span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
+		</div>
+	</div>
+<slot></slot>
+`;
+  }
+}
diff --git a/packages/embeds/embed-core/src/loader.css b/packages/embeds/embed-core/src/loader.css
new file mode 100644
index 0000000000..f22b9aa882
--- /dev/null
+++ b/packages/embeds/embed-core/src/loader.css
@@ -0,0 +1,62 @@
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(180deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  75% {
+    transform: rotate(360deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-inner {
+  0% {
+    height: 0%;
+  }
+
+  25% {
+    height: 0%;
+  }
+
+  50% {
+    height: 100%;
+  }
+
+  75% {
+    height: 100%;
+  }
+
+  100% {
+    height: 0%;
+  }
+}
+
+.loader-inner {
+  vertical-align: top;
+  display: inline-block;
+  width: 100%;
+  animation: loader-inner 2s infinite ease-in;
+}
+
+.loader {
+  display: block;
+  width: 30px;
+  height: 30px;
+  margin: 60px auto;
+  position: relative;
+  border-width: 4px;
+  border-style: solid;
+  -webkit-animation: loader 2s infinite ease;
+  animation: loader 2s infinite ease;
+}
diff --git a/packages/embeds/embed-core/src/tailwind.css b/packages/embeds/embed-core/src/tailwind.css
new file mode 100644
index 0000000000..a00ff918da
--- /dev/null
+++ b/packages/embeds/embed-core/src/tailwind.css
@@ -0,0 +1,203 @@
+* {
+	-tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 248 248 / var(--tw-bg-opacity));
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.leading-5 {
+    line-height: 1.25rem;
+}
+.w-7 {
+    width: 1.75rem;
+}
+
+.h-7 {
+    height: 1.75rem;
+}
+
+.font-semibold {
+    font-weight: 600;
+}
+.flex {
+    display: flex;
+}
+
+.antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.leading-5 {
+    line-height: 1.25rem;
+}
+.font-semibold {
+    font-weight: 600;
+}
+.mr-3 {
+    margin-right: 0.75rem;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-screen {
+  height: 100%;
+}
+.flex {
+  display: flex;
+}
+.z-highest {
+  z-index: 500000000;
+}
+.absolute {
+  position: absolute;
+}
+
+.border-brand {
+  border-color:var(--cal-brand-border-color);
+}
+
+.bg-brand {
+  background-color: var(--cal-brand-background-color);
+}
+
+@media (min-width: 768px) {
+  .md\:right-10 {
+    right: 2.5rem;
+  }
+
+  .md\:bottom-6 {
+    bottom: 1.5rem;
+  }
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition {
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform,
+    filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity,
+    box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity,
+    box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate)
+    var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
+    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.origin-center {
+  transform-origin: center;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.bottom-4 {
+  bottom: 1rem;
+}
+
+.fixed {
+  position: fixed;
+}
+.relative {
+  position: relative;
+}
diff --git a/packages/embeds/embed-react/src/Cal.tsx b/packages/embeds/embed-react/src/Cal.tsx
index 0cf976c5c8..08f91ddb49 100644
--- a/packages/embeds/embed-react/src/Cal.tsx
+++ b/packages/embeds/embed-react/src/Cal.tsx
@@ -4,9 +4,11 @@ import useEmbed from "./useEmbed";
 
 export default function Cal({
   calLink,
+  calOrigin,
   config,
   embedJsUrl,
 }: {
+  calOrigin?: string;
   calLink: string;
   config?: any;
   embedJsUrl?: string;
@@ -17,13 +19,21 @@ export default function Cal({
     if (!Cal) {
       return;
     }
-    Cal("init");
+    const element = ref.current;
+    let initConfig = {};
+    if (calOrigin) {
+      (initConfig as any).origin = calOrigin;
+    }
+    Cal("init", initConfig);
     Cal("inline", {
-      elementOrSelector: ref.current,
+      elementOrSelector: element,
       calLink,
       config,
     });
-  }, [Cal, calLink, config]);
+    return () => {
+      element?.querySelector(".cal-embed")?.remove();
+    };
+  }, [Cal, calLink, config, calOrigin]);
 
   if (!Cal) {
     return <div>Loading {calLink}</div>;
diff --git a/packages/embeds/embed-react/test-cal.tsx b/packages/embeds/embed-react/test-cal.tsx
index 1cf7c0b97f..9bc56e5c56 100644
--- a/packages/embeds/embed-react/test-cal.tsx
+++ b/packages/embeds/embed-react/test-cal.tsx
@@ -9,6 +9,7 @@ function App() {
         There is <code>Cal</code> component below me
       </h1>
       <Cal
+        calOrigin="http://localhost:3000"
         embedJsUrl="//localhost:3002/dist/embed.umd.js"
         calLink="pro"
         config={{