⚡ (embed) Add customizable bubble close icon

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/features/bubble/components/BubbleButton.tsx

@@ -66,8 +66,6 @@ export const BubbleButton = (props: Props) => (
           (isSvgSrc(props.customIconSrc) ? '' : ' object-cover rounded-full')
         }
         alt="Bubble button icon"
-        elementtiming={'Bubble button icon'}
-        fetchpriority={'high'}
       />
     </Show>
     <Show when={props.customIconSrc && !isImageSrc(props.customIconSrc)}>
@@ -84,29 +82,71 @@ export const BubbleButton = (props: Props) => (
         {props.customIconSrc}
       </span>
     </Show>
-
+    <Show when={isNotDefined(props.customCloseIconSrc)}>
-    <svg
+      <svg
-      viewBox="0 0 24 24"
+        viewBox="0 0 24 24"
-      style={{
+        style={{
-        fill:
+          fill:
-          props.iconColor ??
+            props.iconColor ??
-          (isLight(props.backgroundColor ?? defaultButtonColor)
+            (isLight(props.backgroundColor ?? defaultButtonColor)
-            ? defaultDarkIconColor
+              ? defaultDarkIconColor
-            : defaultLightIconColor),
+              : defaultLightIconColor),
-      }}
+        }}
-      class={
+        class={
-        `absolute duration-200 transition ` +
+          `absolute duration-200 transition ` +
-        (props.isBotOpened
+          (props.isBotOpened
-          ? 'scale-100 rotate-0 opacity-100'
+            ? 'scale-100 rotate-0 opacity-100'
-          : 'scale-0 -rotate-180 opacity-0') +
+            : 'scale-0 -rotate-180 opacity-0') +
-        (props.size === 'large' ? ' w-9' : ' w-7')
+          (props.size === 'large' ? ' w-9' : ' w-7')
-      }
+        }
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
+        />
+      </svg>
+    </Show>
+    <Show
+      when={props.customCloseIconSrc && isImageSrc(props.customCloseIconSrc)}
     >
-      <path
+      <img
-        fill-rule="evenodd"
+        part="button-icon"
-        clip-rule="evenodd"
+        src={props.customCloseIconSrc}
-        d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
+        class={
+          'duration-200 transition' +
+          (props.isBotOpened
+            ? 'scale-100 rotate-0 opacity-100'
+            : 'scale-0 -rotate-180 opacity-0') +
+          (isSvgSrc(props.customCloseIconSrc)
+            ? props.size === 'large'
+              ? ' w-9 h-9'
+              : ' w-7 h-7'
+            : ' w-[90%] h-[90%]') +
+          (isSvgSrc(props.customCloseIconSrc)
+            ? ''
+            : ' object-cover rounded-full')
+        }
+        alt="Bubble button clost icon"
       />
-    </svg>
+    </Show>
+    <Show
+      when={props.customCloseIconSrc && !isImageSrc(props.customCloseIconSrc)}
+    >
+      <span
+        class={
+          'text-4xl duration-200 transition' +
+          (props.isBotOpened
+            ? 'scale-100 rotate-0 opacity-100'
+            : 'scale-0 -rotate-180 opacity-0')
+        }
+        style={{
+          'font-family':
+            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        }}
+      >
+        {props.customCloseIconSrc}
+      </span>
+    </Show>
   </button>
 )

packages/embeds/js/src/features/bubble/types.ts

@@ -20,6 +20,7 @@ export type ButtonTheme = {
   backgroundColor?: string
   iconColor?: string
   customIconSrc?: string
+  customCloseIconSrc?: string
 }
 
 export type PreviewMessageParams = {

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",