🧑‍💻 Better Typebot import in vanilla JS sites

baptisteArno · Feb 21, 2023 · ab43d80 · ab43d80 · vercel · Feb 21, 2023
1 parent 907cad8
commit ab43d80
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 30 deletions.
diff --git a/packages/js/package.json b/packages/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/js/src/web.ts b/packages/js/src/web.ts
@@ -1,5 +1,10 @@
 import { registerWebComponents } from './register'
-import { injectTypebotInWindow } from './window'
+import { parseTypebot, injectTypebotInWindow } from './window'
 
 registerWebComponents()
-injectTypebotInWindow()
+
+const typebot = parseTypebot()
+
+injectTypebotInWindow(typebot)
+
+export default typebot
diff --git a/packages/js/src/window.ts b/packages/js/src/window.ts
@@ -31,36 +31,37 @@ export const initBubble = (props: BubbleProps) => {
   document.body.appendChild(bubbleElement)
 }
 
+type Typebot = {
+  initStandard: typeof initStandard
+  initPopup: typeof initPopup
+  initBubble: typeof initBubble
+  close: typeof close
+  hidePreviewMessage: typeof hidePreviewMessage
+  open: typeof open
+  setPrefilledVariables: typeof setPrefilledVariables
+  showPreviewMessage: typeof showPreviewMessage
+  toggle: typeof toggle
+}
+
 declare const window:
   | {
-      Typebot:
-        | {
-            initStandard: typeof initStandard
-            initPopup: typeof initPopup
-            initBubble: typeof initBubble
-            close: typeof close
-            hidePreviewMessage: typeof hidePreviewMessage
-            open: typeof open
-            setPrefilledVariables: typeof setPrefilledVariables
-            showPreviewMessage: typeof showPreviewMessage
-            toggle: typeof toggle
-          }
-        | undefined
+      Typebot: Typebot | undefined
     }
   | undefined
 
-export const injectTypebotInWindow = () => {
-  if (typeof window === 'undefined') return
+export const parseTypebot = () => ({
+  initStandard,
+  initPopup,
+  initBubble,
+  close,
+  hidePreviewMessage,
+  open,
+  setPrefilledVariables,
+  showPreviewMessage,
+  toggle,
+})
 
-  window.Typebot = {
-    initStandard,
-    initPopup,
-    initBubble,
-    close,
-    hidePreviewMessage,
-    open,
-    setPrefilledVariables,
-    showPreviewMessage,
-    toggle,
-  }
+export const injectTypebotInWindow = (typebot: Typebot) => {
+  if (typeof window === 'undefined') return
+  window.Typebot = { ...typebot }
 }
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",