diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index b757cd5080..862a9886e4 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -272,10 +272,15 @@
-
+
+
+ I am Anchor
+ [I am Bold inside anchor]
+
+ I am span inside anchor
+
+
+
Inline Embed Examples
diff --git a/packages/embeds/embed-core/playground.ts b/packages/embeds/embed-core/playground.ts
index 4538dcdd35..3f481352de 100644
--- a/packages/embeds/embed-core/playground.ts
+++ b/packages/embeds/embed-core/playground.ts
@@ -361,6 +361,11 @@ Cal("init", "popupPaidEvent", {
origin: "http://localhost:3000",
});
+Cal("init", "childElementTarget", {
+ debug: true,
+ origin: "http://localhost:3000",
+});
+
Cal("init", "floatingButton", {
debug: true,
origin: "http://localhost:3000",
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 1d6106a1ab..4e9464a3c2 100644
--- a/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
+++ b/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
@@ -266,6 +266,21 @@ test.describe("Popup Tests", () => {
pathname: calLink,
});
});
+
+ test("should open on clicking child element", async ({ page, embeds }) => {
+ await deleteAllBookingsByEmail("embed-user@example.com");
+ const calNamespace = "childElementTarget";
+ const configuredLink = "/free/30min";
+ await embeds.gotoPlayground({ calNamespace, url: "/" });
+
+ await page.click(`[data-cal-namespace="${calNamespace}"] b`);
+
+ const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: configuredLink });
+
+ await expect(embedIframe).toBeEmbedCalLink(calNamespace, embeds.getActionFiredDetails, {
+ pathname: configuredLink,
+ });
+ });
});
async function expectPrerenderedIframe({
diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts
index bb9bd88fac..806bcc8b42 100644
--- a/packages/embeds/embed-core/src/embed.ts
+++ b/packages/embeds/embed-core/src/embed.ts
@@ -864,17 +864,16 @@ window.addEventListener("message", (e) => {
document.addEventListener("click", (e) => {
const targetEl = e.target;
- if (!(targetEl instanceof HTMLElement)) {
- return;
- }
- const path = targetEl.dataset.calLink;
+
+ const calLinkEl = getCalLinkEl(targetEl);
+ const path = calLinkEl?.dataset?.calLink;
if (!path) {
return;
}
- const namespace = targetEl.dataset.calNamespace;
- const configString = targetEl.dataset.calConfig || "";
- const calOrigin = targetEl.dataset.calOrigin || "";
+ const namespace = calLinkEl.dataset.calNamespace;
+ const configString = calLinkEl.dataset.calConfig || "";
+ const calOrigin = calLinkEl.dataset.calOrigin || "";
let config;
try {
config = JSON.parse(configString);
@@ -897,6 +896,25 @@ document.addEventListener("click", (e) => {
config,
calOrigin,
});
+
+ function getCalLinkEl(target: EventTarget | null) {
+ let calLinkEl;
+ if (!(target instanceof HTMLElement)) {
+ return null;
+ }
+ if (target?.dataset.calLink) {
+ calLinkEl = target;
+ } else {
+ // If the element clicked is a child of the cal-link element, then return the cal-link element
+ calLinkEl = Array.from(document.querySelectorAll("[data-cal-link]")).find((el) => el.contains(target));
+ }
+
+ if (!(calLinkEl instanceof HTMLElement)) {
+ return null;
+ }
+
+ return calLinkEl;
+ }
});
let currentColorScheme: string | null = null;