Skip to content

Commit aa77d17

Browse files
docs: add closeModal() API documentation for embed instructions
- Add comprehensive closeModal() documentation to embed-instructions.mdx - Include usage examples for both namespaced and non-namespaced embeds - Add common use case example in embed-events.mdx - Document supported embed types and error handling - Include migration note from internal API Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
1 parent 81008f3 commit aa77d17

File tree

2 files changed

+67
-1
lines changed

2 files changed

+67
-1
lines changed

embedding/embed-events.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,20 @@ _`It deprecates rescheduleBookingSuccessful event.`_
9191
- `isRecurring`: `boolean` - Whether the booking is recurring
9292
- `allBookings`: `object` - Array of objects with `startTime` and `endTime`. Applicable only if `isRecurring` is `true`
9393

94+
**Example: Close the modal after successful booking**
95+
```js
96+
<script>
97+
Cal("on", {
98+
action: "bookingSuccessfulV2",
99+
callback: () => {
100+
Cal("closeModal"); // Programmatically close the modal
101+
},
102+
});
103+
</script>
104+
```
105+
106+
See [Embed Instructions](/embedding/embed-instructions#close-modal) for more details on the `closeModal()` method.
107+
94108
### `linkReady`
95109

96110
**Description:** Tells that the link is ready to be shown now.

embedding/embed-instructions.mdx

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,56 @@ To open cal link on some action, make it pop open instantly by using `preload`.
3939
</script>
4040
```
4141

42-
- `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL https://cal.com/john
42+
- `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL https://cal.com/john
43+
44+
#### Close modal
45+
46+
Programmatically closes a modal-based embed shown as a pop-up (for example, when opened via an element click or the floating button).
47+
48+
```js
49+
<script>
50+
Cal("closeModal");
51+
</script>
52+
```
53+
54+
**Supported embed types:**
55+
- Pop-up via element click
56+
- Floating button pop-up
57+
58+
**Not supported:**
59+
- Inline embed (calling this for inline embeds will throw an error: "closeModal() is only supported for modal-based embeds (ModalBox and FloatingButton). It cannot be used with inline embeds.")
60+
61+
**Namespaced usage:**
62+
```js
63+
<script>
64+
Cal.ns.yournamespace("closeModal");
65+
</script>
66+
```
67+
68+
**Common use case - Close the modal after a successful booking:**
69+
```js
70+
<script>
71+
Cal("on", {
72+
action: "bookingSuccessfulV2",
73+
callback: () => {
74+
Cal("closeModal");
75+
},
76+
});
77+
</script>
78+
```
79+
80+
**Namespaced example:**
81+
```js
82+
<script>
83+
Cal.ns.yournamespace("on", {
84+
action: "bookingSuccessfulV2",
85+
callback: () => {
86+
Cal.ns.yournamespace("closeModal");
87+
},
88+
});
89+
</script>
90+
```
91+
92+
<Note>
93+
This replaces any previous internal usage like `cal.instance.actionManager.fire("__closeIframe")`. If you were using this internal method, please migrate to the new `closeModal()` API.
94+
</Note>

0 commit comments

Comments
 (0)