🧑‍💻 (typebot-js) Implement easier commands: open / close / toggle

apps/docs/docs/embed/html-javascript.md

@@ -31,7 +31,7 @@ Here is an example:
 ```html
 <script src="https://unpkg.com/typebot-js@2.2"></script>
 <script>
-  var typebotCommands = Typebot.initPopup({
+  Typebot.initPopup({
     url: 'https://viewer.typebot.io/my-typebot',
     delay: 3000,
   })
@@ -45,17 +45,21 @@ This code will automatically trigger the popup window after 3 seconds.
 You can use these commands:
 
 ```js
-Typebot.getPopupActions().open()
+Typebot.open()
+```
+
+```js
+Typebot.close()
 ```
 
 ```js
-Typebot.getPopupActions().close()
+Typebot.toggle()
 ```
 
 You can bind these commands on a button element, for example:
 
 ```html
-<button onclick="Typebot.getPopupActions().open()">Open the popup</button>
+<button onclick="Typebot.open()">Contact us</button>
 ```
 
 ## Bubble
@@ -76,38 +80,44 @@ Here is an example:
 
 This code will automatically trigger the popup window after 3 seconds.
 
-### Open or close the proactive message
+### Open or close the preview message
 
-You can use this command:
+You can use these commands:
 
 ```js
-Typebot.getBubbleActions().openProactiveMessage()
+Typebot.showMessage()
+```
+
+```js
+Typebot.hideMessage()
 ```
 
 You can bind this command on a button element, for example:
 
 ```html
-<button onclick="Typebot.getBubbleActions().openProactiveMessage()">
-  Open proactive message
-</button>
+<button onclick="Typebot.showMessage()">Open message</button>
 ```
 
 ### Open or close the typebot
 
 You can use these commands:
 
 ```js
-Typebot.getBubbleActions().open()
+Typebot.open()
+```
+
+```js
+Typebot.close()
 ```
 
 ```js
-Typebot.getBubbleActions().close()
+Typebot.toggle()
 ```
 
 You can bind these commands on a button element, for example:
 
 ```html
-<button onclick="Typebot.getBubbleActions().open()">Open the chat</button>
+<button onclick="Typebot.open()">Contact us</button>
 ```
 
 ## Additional configuration

packages/typebot-js/package.json

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

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

@@ -0,0 +1,9 @@
+import { closeIframe } from '../embedTypes/chat/iframe'
+import { closePopup } from '../embedTypes/popup'
+
+export const close = () => {
+  const existingPopup = document.querySelector('#typebot-popup')
+  if (existingPopup) closePopup(existingPopup)
+  const existingBubble = document.querySelector('#typebot-bubble')
+  if (existingBubble) closeIframe(existingBubble)
+}

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

@@ -0,0 +1,6 @@
+import { closeProactiveMessage } from '../embedTypes/chat/proactiveMessage'
+
+export const hideMessage = () => {
+  const existingBubble = document.querySelector('#typebot-bubble')
+  if (existingBubble) closeProactiveMessage(existingBubble)
+}

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

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

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

@@ -0,0 +1,9 @@
+import { openIframe } from '../embedTypes/chat/iframe'
+import { openPopup } from '../embedTypes/popup'
+
+export const open = () => {
+  const existingPopup = document.querySelector('#typebot-popup')
+  if (existingPopup) openPopup(existingPopup)
+  const existingBubble = document.querySelector('#typebot-bubble')
+  if (existingBubble) openIframe(existingBubble)
+}

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

@@ -0,0 +1,6 @@
+import { openProactiveMessage } from '../embedTypes/chat/proactiveMessage'
+
+export const showMessage = () => {
+  const existingBubble = document.querySelector('#typebot-bubble')
+  if (existingBubble) openProactiveMessage(existingBubble)
+}

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

@@ -0,0 +1,20 @@
+import {
+  closeIframe,
+  isIframeOpened,
+  openIframe,
+} from '../embedTypes/chat/iframe'
+import { closePopup, isPopupOpened, openPopup } from '../embedTypes/popup'
+
+export const toggle = () => {
+  const existingPopup = document.querySelector('#typebot-popup')
+  if (existingPopup)
+    isPopupOpened(existingPopup)
+      ? closePopup(existingPopup)
+      : openPopup(existingPopup)
+  const existingBubble = document.querySelector('#typebot-bubble')
+  console.log(existingBubble)
+  if (existingBubble)
+    isIframeOpened(existingBubble)
+      ? closeIframe(existingBubble)
+      : openIframe(existingBubble)
+}

packages/typebot-js/src/embedTypes/chat/iframe.ts

@@ -9,20 +9,16 @@ export const createIframeContainer = (
   return iframe
 }
 
-export const openIframe = (
-  bubble: HTMLDivElement,
-  iframe: HTMLIFrameElement
-): void => {
+export const openIframe = (bubble: Element): void => {
+  const iframe = bubble.querySelector('.typebot-iframe') as HTMLIFrameElement
   loadTypebotIfFirstOpen(iframe)
   iframe.style.display = 'flex'
   setTimeout(() => bubble.classList.add('iframe-opened'), 50)
   bubble.classList.remove('message-opened')
 }
 
-export const closeIframe = (
-  bubble: HTMLDivElement,
-  iframe: HTMLIFrameElement
-): void => {
+export const closeIframe = (bubble: Element): void => {
+  const iframe = bubble.querySelector('.typebot-iframe') as HTMLIFrameElement
   bubble.classList.remove('iframe-opened')
   setTimeout(() => (iframe.style.display = 'none'), 550)
 }
@@ -32,3 +28,6 @@ export const loadTypebotIfFirstOpen = (iframe: HTMLIFrameElement): void => {
   iframe.src = iframe.dataset.src
   iframe.removeAttribute('data-src')
 }
+
+export const isIframeOpened = (bubble: Element): boolean =>
+  bubble.classList.contains('iframe-opened')

packages/typebot-js/src/embedTypes/chat/index.ts

@@ -5,12 +5,7 @@ import {
   ProactiveMessageParams,
 } from '../../types'
 import { createButton } from './button'
-import {
-  closeIframe,
-  createIframeContainer,
-  loadTypebotIfFirstOpen,
-  openIframe,
-} from './iframe'
+import { closeIframe, createIframeContainer, openIframe } from './iframe'
 import {
   createProactiveMessage,
   openProactiveMessage,
@@ -33,10 +28,7 @@ export const initBubble = (params: BubbleParams): BubbleActions => {
     !hasBeenClosed()
   ) {
     setRememberCloseInStorage()
-    setTimeout(
-      () => openIframe(bubbleElement, iframeElement),
-      params.autoOpenDelay
-    )
+    setTimeout(() => openIframe(bubbleElement), params.autoOpenDelay)
   }
   !document.body
     ? (window.onload = () => document.body.appendChild(bubbleElement))
@@ -62,8 +54,8 @@ const createBubble = (
   const iframeElement = createIframeContainer(params)
   buttonElement.addEventListener('click', () => {
     iframeElement.style.display === 'none'
-      ? openIframe(bubbleElement, iframeElement)
-      : closeIframe(bubbleElement, iframeElement)
+      ? openIframe(bubbleElement)
+      : closeIframe(bubbleElement)
   })
   if (proactiveMessageElement)
     proactiveMessageElement.addEventListener('click', () =>
@@ -77,9 +69,7 @@ const onProactiveMessageClick = (
   bubble: HTMLDivElement,
   iframe: HTMLIFrameElement
 ): void => {
-  iframe.style.display === 'none'
-    ? openIframe(bubble, iframe)
-    : closeIframe(bubble, iframe)
+  iframe.style.display === 'none' ? openIframe(bubble) : closeIframe(bubble)
   bubble.classList.remove('message-opened')
 }
 
@@ -107,10 +97,10 @@ export const getBubbleActions = (
         }
       : undefined,
     open: () => {
-      openIframe(existingBubbleElement, existingIframeElement)
+      openIframe(existingBubbleElement)
     },
     close: () => {
-      closeIframe(existingBubbleElement, existingIframeElement)
+      closeIframe(existingBubbleElement)
     },
   }
 }

packages/typebot-js/src/embedTypes/chat/proactiveMessage.ts

@@ -44,7 +44,7 @@ const createCloseButton = (bubble: HTMLDivElement): HTMLButtonElement => {
   return button
 }
 
-const openProactiveMessage = (bubble: HTMLDivElement): void => {
+const openProactiveMessage = (bubble: Element): void => {
   bubble.classList.add('message-opened')
 }
 
@@ -56,7 +56,7 @@ const onCloseButtonClick = (
   closeProactiveMessage(proactiveMessageElement)
 }
 
-const closeProactiveMessage = (bubble: HTMLDivElement): void => {
+const closeProactiveMessage = (bubble: Element): void => {
   setRememberCloseInStorage()
   bubble.classList.remove('message-opened')
 }

packages/typebot-js/src/embedTypes/chat/style.css

@@ -30,6 +30,10 @@
   filter: brightness(0.75);
 }
 
+#typebot-bubble > button:focus {
+  outline: none;
+}
+
 #typebot-bubble > button > .icon {
   transition: opacity 500ms ease-out 0s, transform 500ms ease-out 0s;
 }