diff --git a/apps/docs/contribute/the-forge/run.mdx b/apps/docs/contribute/the-forge/run.mdx index fc08026927..a487ecbff7 100644 --- a/apps/docs/contribute/the-forge/run.mdx +++ b/apps/docs/contribute/the-forge/run.mdx @@ -135,13 +135,15 @@ Example: export const shoutName = createAction({ // ... run: { - web: ({ options }) => { - return { - args: { - name: options.name ?? null, - }, - content: `alert('Hello ' + name)`, - } + web: { + parseFunction: ({ options }) => { + return { + args: { + name: options.name ?? null, + }, + 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) 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. 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.