diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index 2b64e305a5..d59bdad44d 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -11,11 +11,13 @@
      <script type="text/javascript" src="./playground/lib/playground-init.ts"></script>
     <script>
       let popupRescheduleUid = null;
+      let popupCancelUid = null;
       let calLink = null;
       const initialNamespace = (url.searchParams.get("only") || "").split("ns:")[1] || "";
       (function defineVariables() {
         const searchParams = new URL(document.URL).searchParams;
         popupRescheduleUid = searchParams.get("popupRescheduleUid") || "qm3kwt3aTnVD7vmP9tiT2f";
+        popupCancelUid = searchParams.get("popupCancelUid") || "qm3kwt3aTnVD7vmP9tiT2f";
         calLink = searchParams.get("calLink");
       })()
       
@@ -292,6 +294,12 @@
       `<button data-cal-namespace="popupRescheduleWithRescheduleUidParam" data-cal-config='{"flag.coep":"true", "rescheduleUid": "${popupRescheduleUid}"}' data-cal-link="${calLink}">Reschedule Event(with rescheduleUid param) - Needs popupRescheduleUid and calLink param</button>`
           );
         </script>
+        <h2>Popup Examples - Cancel Tests</h2>
+        <script>
+          document.write(
+            `<button data-cal-namespace="popupCancelBooking" data-cal-config='{"flag.coep":"true"}' data-cal-link="booking/${popupCancelUid}?cancel=true">Cancel Booking - Needs popupCancelUid param</button>`
+          );
+        </script>
         <h2>Popup Examples - Different Configurations</h2>
         <button data-cal-namespace="popupHideEventTypeDetails" data-cal-link="free/30min" data-cal-config='{"flag.coep": "true"}'>
           Book Free Event [Auto Theme][uiConfig.hideEventTypeDetails=true]
diff --git a/packages/embeds/embed-core/playground/lib/playground.ts b/packages/embeds/embed-core/playground/lib/playground.ts
index a468791aec..cc39e3178d 100644
--- a/packages/embeds/embed-core/playground/lib/playground.ts
+++ b/packages/embeds/embed-core/playground/lib/playground.ts
@@ -371,6 +371,11 @@ Cal("init", "popupRescheduleWithRescheduleUidParam", {
   origin: origin,
 });
 
+Cal("init", "popupCancelBooking", {
+  debug: true,
+  origin: origin,
+});
+
 Cal("init", "popupAutoTheme", {
   debug: true,
   origin: origin,
diff --git a/packages/embeds/embed-core/playwright/lib/testUtils.ts b/packages/embeds/embed-core/playwright/lib/testUtils.ts
index 4cb75410cd..345095e745 100644
--- a/packages/embeds/embed-core/playwright/lib/testUtils.ts
+++ b/packages/embeds/embed-core/playwright/lib/testUtils.ts
@@ -232,3 +232,19 @@ export async function expectActualFormResponseConnectedToQueuedFormResponse({
   // TODO: We should be able to verify the exact response values by correlating the form field identifiers with the actual Form from DB
   expect(valuesSetInResponse.length).toBe(numberOfExpectedSetFieldValues);
 }
+
+export async function cancelBookingThroughEmbed(bookingUid: string, frame: Frame, page: Page) {
+  await frame.waitForSelector('[data-testid="cancel_reason"]');
+
+  await frame.fill('[data-testid="cancel_reason"]', "Test cancellation from embed");
+
+  const responsePromise = page.waitForResponse("**/api/cancel");
+  await frame.click('[data-testid="confirm_cancel"]');
+
+  const response = await responsePromise;
+  expect(response.status()).toBe(200);
+
+  await expect(frame.locator('[data-testid="cancelled-headline"]')).toBeVisible();
+
+  return response;
+}
diff --git a/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts b/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
index 76301b2103..34e7fe4973 100644
--- a/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
+++ b/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
@@ -11,6 +11,7 @@ import {
   getBooking,
   deleteAllBookingsByEmail,
   rescheduleEvent,
+  cancelBookingThroughEmbed,
 } from "../lib/testUtils";
 
 // in parallel mode sometimes handleNewBooking endpoint throws "No available users found" error, this never happens in serial mode.
@@ -104,6 +105,34 @@ test.describe("Popup Tests", () => {
 
   todo("Add snapshot test for embed iframe");
 
+  test("should be able to cancel booking through embed iframe", async ({
+    page,
+    embeds: { addEmbedListeners, getActionFiredDetails },
+  }) => {
+    const booking = await test.step("Create a booking", async () => {
+      return await bookFirstFreeUserEventThroughEmbed({
+        page,
+        addEmbedListeners,
+        getActionFiredDetails,
+      });
+    });
+
+    await test.step("Cancel the booking through embed", async () => {
+      const calNamespace = "popupCancelBooking";
+      await addEmbedListeners(calNamespace);
+      await page.goto(`/?popupCancelUid=${booking.uid}`);
+      await page.click(`[data-cal-namespace="${calNamespace}"]`);
+      const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: `/booking/${booking.uid}` });
+      if (!embedIframe) {
+        throw new Error("Embed iframe not found");
+      }
+      await cancelBookingThroughEmbed(booking.uid, embedIframe, page);
+    });
+
+    const cancelledBooking = await getBooking(booking.uid);
+    expect(cancelledBooking.status).toBe("CANCELLED");
+  });
+
   test("should open Routing Forms embed on click", async ({
     page,
     embeds: { addEmbedListeners, getActionFiredDetails },