⚡ (embed) Add customizable bubble close icon

baptisteArno · Jul 25, 2023 · c8bc659 · c8bc659 · vercel · Jul 25, 2023
1 parent b171b39
commit c8bc659
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 27 deletions.
diff --git a/packages/embeds/js/package.json b/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",

diff --git a/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx b/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>
-
-    <svg
-      viewBox="0 0 24 24"
-      style={{
-        fill:
-          props.iconColor ??
-          (isLight(props.backgroundColor ?? defaultButtonColor)
-            ? defaultDarkIconColor
-            : defaultLightIconColor),
-      }}
-      class={
-        `absolute duration-200 transition ` +
-        (props.isBotOpened
-          ? 'scale-100 rotate-0 opacity-100'
-          : 'scale-0 -rotate-180 opacity-0') +
-        (props.size === 'large' ? ' w-9' : ' w-7')
-      }
+    <Show when={isNotDefined(props.customCloseIconSrc)}>
+      <svg
+        viewBox="0 0 24 24"
+        style={{
+          fill:
+            props.iconColor ??
+            (isLight(props.backgroundColor ?? defaultButtonColor)
+              ? defaultDarkIconColor
+              : defaultLightIconColor),
+        }}
+        class={
+          `absolute duration-200 transition ` +
+          (props.isBotOpened
+            ? 'scale-100 rotate-0 opacity-100'
+            : 'scale-0 -rotate-180 opacity-0') +
+          (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
-        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"
+      <img
+        part="button-icon"
+        src={props.customCloseIconSrc}
+        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>
 )
diff --git a/packages/embeds/js/src/features/bubble/types.ts b/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 = {

diff --git a/packages/embeds/nextjs/package.json b/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",

diff --git a/packages/embeds/react/package.json b/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",