@ -135,13 +135,15 @@ Example:
|
|||||||
export const shoutName = createAction({
|
export const shoutName = createAction({
|
||||||
// ...
|
// ...
|
||||||
run: {
|
run: {
|
||||||
web: ({ options }) => {
|
web: {
|
||||||
return {
|
parseFunction: ({ options }) => {
|
||||||
args: {
|
return {
|
||||||
name: options.name ?? null,
|
args: {
|
||||||
},
|
name: options.name ?? null,
|
||||||
content: `alert('Hello ' + name)`,
|
},
|
||||||
}
|
content: `alert('Hello ' + name)`,
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
@ -159,94 +161,6 @@ If you want to display a custom embed bubble, you can use the `displayEmbedBubbl
|
|||||||
block](https://github.com/baptisteArno/typebot.io/blob/main/packages/forge/blocks/calCom/actions/bookEvent.ts)
|
block](https://github.com/baptisteArno/typebot.io/blob/main/packages/forge/blocks/calCom/actions/bookEvent.ts)
|
||||||
as an example.
|
as an example.
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
export const bookEvent = createAction({
|
|
||||||
// ...
|
|
||||||
run: {
|
|
||||||
web: {
|
|
||||||
displayEmbedBubble: {
|
|
||||||
parseInitFunction: ({ options }) => {
|
|
||||||
if (!options.link) throw new Error('Missing link')
|
|
||||||
const baseUrl = options.baseUrl ?? defaultBaseUrl
|
|
||||||
const link = options.link?.startsWith('http')
|
|
||||||
? options.link.replace(/http.+:\/\/[^\/]+\//, '')
|
|
||||||
: options.link
|
|
||||||
return {
|
|
||||||
args: {
|
|
||||||
baseUrl,
|
|
||||||
link: link ?? '',
|
|
||||||
name: options.name ?? null,
|
|
||||||
email: options.email ?? null,
|
|
||||||
layout: parseLayoutAttr(options.layout),
|
|
||||||
},
|
|
||||||
content: `(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, baseUrl + "/embed/embed.js", "init");
|
|
||||||
Cal("init", { origin: baseUrl });
|
|
||||||
|
|
||||||
Cal("inline", {
|
|
||||||
elementOrSelector: typebotElement,
|
|
||||||
calLink: link,
|
|
||||||
layout,
|
|
||||||
config: {
|
|
||||||
name: name ?? undefined,
|
|
||||||
email: email ?? undefined,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Cal("ui", {"hideEventTypeDetails":false,layout});`,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
waitForEvent: {
|
|
||||||
getSaveVariableId: ({ saveBookedDateInVariableId }) =>
|
|
||||||
saveBookedDateInVariableId,
|
|
||||||
parseFunction: () => {
|
|
||||||
return {
|
|
||||||
args: {},
|
|
||||||
content: `Cal("on", {
|
|
||||||
action: "bookingSuccessful",
|
|
||||||
callback: (e) => {
|
|
||||||
continueFlow(e.detail.data.date)
|
|
||||||
}
|
|
||||||
})`,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
The `displayEmbedBubble` accepts a `parseInitFunction` function. This function needs to return the same object as the [`web` function](./run#client-function). The function content can use the `typebotElement` variable to get the DOM element where the block is rendered.
|
The `displayEmbedBubble` accepts a `parseInitFunction` function. This function needs to return the same object as the [`web` function](./run#client-function). The function content can use the `typebotElement` variable to get the DOM element where the block is rendered.
|
||||||
|
|
||||||
Optionally you can also define a `waitForEvent` object. This object accepts a `getSaveVariableId` function that returns the variable id where the event data should be saved. It also accepts a `parseFunction` function that returns the same object as the [`web` function](./run#client-function). The function content can use the `continueFlow` function to continue the flow with the event data.
|
Optionally you can also define a `waitForEvent` object. This object accepts a `getSaveVariableId` function that returns the variable id where the event data should be saved. It also accepts a `parseFunction` function that returns the same object as the [`web` function](./run#client-function). The function content can use the `continueFlow` function to continue the flow with the event data.
|
||||||
|
Reference in New Issue
Block a user