✨ (typebot-js) Add setHiddenVariables command

packages/typebot-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typebot-js",
-  "version": "2.2.14",
+  "version": "2.2.15",
   "main": "dist/index.js",
   "unpkg": "dist/index.global.js",
   "license": "AGPL-3.0-or-later",

packages/typebot-js/src/commands/index.ts

@@ -1,5 +1,6 @@
 export * from './close'
 export * from './hideMessage'
 export * from './open'
+export * from './setHiddenVariables'
 export * from './showMessage'
 export * from './toggle'

packages/typebot-js/src/commands/setHiddenVariables.ts

@@ -0,0 +1,43 @@
+import { IframeParams } from '../types'
+
+export const setHiddenVariables = (
+  hiddenVariables: IframeParams['hiddenVariables']
+) => {
+  const existingIframe = document.querySelector('.typebot-iframe') as
+    | HTMLIFrameElement
+    | undefined
+  if (!existingIframe) return
+  const hostUrlParams = new URLSearchParams(document.location.search)
+  const hostQueryObj: { [key: string]: string } = {}
+  hostUrlParams.forEach((value, key) => {
+    hostQueryObj[key] = value
+  })
+  const isLoadWhenVisible = existingIframe.hasAttribute('data-src')
+  const url = (
+    existingIframe.getAttribute('data-src') || existingIframe.src
+  ).split('?')[0]
+  const iframeUrl = `${url}${parseQueryParams({
+    ...hiddenVariables,
+    ...hostQueryObj,
+  })}`
+  existingIframe.setAttribute(isLoadWhenVisible ? 'data-src' : 'src', iframeUrl)
+}
+
+export const parseQueryParams = (starterVariables?: {
+  [key: string]: string | undefined
+}): string => {
+  return parseStarterVariables(starterVariables)
+}
+
+const parseStarterVariables = (starterVariables?: {
+  [key: string]: string | undefined
+}) =>
+  starterVariables && Object.keys(starterVariables).length > 0
+    ? `?${Object.keys(starterVariables)
+        .filter((key) => starterVariables[key])
+        .map(
+          (key) =>
+            `${key}=${encodeURIComponent(starterVariables[key] as string)}`
+        )
+        .join('&')}`
+    : ''

packages/typebot-js/src/iframe/index.ts

@@ -1,4 +1,5 @@
 import { close } from '../commands'
+import { parseQueryParams } from '../commands/setHiddenVariables'
 import { TypebotPostMessageData, IframeCallbacks, IframeParams } from '../types'
 import './style.css'
 
@@ -30,25 +31,6 @@ export const createIframe = ({
   return iframe
 }
 
-const parseQueryParams = (starterVariables?: {
-  [key: string]: string | undefined
-}): string => {
-  return parseStarterVariables(starterVariables)
-}
-
-const parseStarterVariables = (starterVariables?: {
-  [key: string]: string | undefined
-}) =>
-  starterVariables && Object.keys(starterVariables).length > 0
-    ? `?${Object.keys(starterVariables)
-        .filter((key) => starterVariables[key])
-        .map(
-          (key) =>
-            `${key}=${encodeURIComponent(starterVariables[key] as string)}`
-        )
-        .join('&')}`
-    : ''
-
 export const listenForTypebotMessages = (callbacks: IframeCallbacks) => {
   window.addEventListener('message', (event) => {
     const data = event.data as { from?: 'typebot' } & TypebotPostMessageData

packages/typebot-js/src/index.ts

@@ -1,7 +1,14 @@
 import { initContainer } from './embedTypes/container'
 import { initPopup, getPopupActions } from './embedTypes/popup'
 import { initBubble, getBubbleActions } from './embedTypes/chat'
-import { open, close, toggle, showMessage, hideMessage } from './commands'
+import {
+  open,
+  close,
+  toggle,
+  showMessage,
+  hideMessage,
+  setHiddenVariables,
+} from './commands'
 
 export {
   initContainer,
@@ -14,6 +21,7 @@ export {
   toggle,
   showMessage,
   hideMessage,
+  setHiddenVariables,
 }
 
 const defaultExports = {
@@ -27,6 +35,7 @@ const defaultExports = {
   toggle,
   showMessage,
   hideMessage,
+  setHiddenVariables,
 }
 
 export default defaultExports