💄 (js) Make sure lite badge can't be hidden

packages/js/package.json

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

packages/js/src/assets/immutable.css

@@ -0,0 +1,26 @@
+.lite-badge {
+  position: absolute !important;
+  padding: 4px 8px !important;
+  background-color: white !important;
+  z-index: 50 !important;
+  border-radius: 4px !important;
+  color: rgb(17 24 39) !important;
+  gap: 8px !important;
+  font-size: 14px !important;
+  line-height: 20px !important;
+  font-weight: 600 !important;
+  border-width: 1px !important;
+  /* Make sure the badge is always displayed */
+  opacity: 1 !important;
+  visibility: visible !important;
+  display: flex !important;
+  top: auto !important;
+  right: auto !important;
+  left: auto !important;
+  bottom: 20px !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+.lite-badge:hover {
+  background-color: #f7f8ff !important;
+}

packages/js/src/components/Bot.tsx

@@ -11,6 +11,7 @@ import {
   setResultInSession,
 } from '@/utils/sessionStorage'
 import { setCssVariablesValue } from '@/utils/setCssVariablesValue'
+import immutableCss from '../assets/immutable.css'
 
 export type BotProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -100,6 +101,7 @@ export const Bot = (props: BotProps & { class?: string }) => {
   return (
     <>
       <style>{customCss()}</style>
+      <style>{immutableCss}</style>
       <Show when={error()} keyed>
         {(error) => <ErrorMessage error={error} />}
       </Show>

packages/js/src/components/LiteBadge.tsx

@@ -1,4 +1,5 @@
 import { onCleanup, onMount } from 'solid-js'
+import { TypebotLogo } from './icons/TypebotLogo'
 
 type Props = {
   botContainer: HTMLDivElement | undefined
@@ -11,8 +12,14 @@ export const LiteBadge = (props: Props) => {
   const appendBadgeIfNecessary = (mutations: MutationRecord[]) => {
     mutations.forEach((mutation) => {
       mutation.removedNodes.forEach((removedNode) => {
-        if ('id' in removedNode && liteBadge && removedNode.id == 'lite-badge')
+        if (
+          'id' in removedNode &&
+          liteBadge &&
+          removedNode.id == 'lite-badge'
+        ) {
+          console.log("Sorry, you can't remove the brand 😅")
           props.botContainer?.append(liteBadge)
+        }
       })
     })
   }
@@ -36,11 +43,11 @@ export const LiteBadge = (props: Props) => {
       href={'https://www.typebot.io/?utm_source=litebadge'}
       target="_blank"
       rel="noopener noreferrer"
-      class="absolute py-1 px-2 bg-white z-50 rounded shadow-md lite-badge text-gray-900"
-      style={{ bottom: '20px', display: 'block' }}
+      class="lite-badge"
       id="lite-badge"
     >
-      Made with <span class="text-blue-500">Typebot</span>.
+      <TypebotLogo />
+      <span>Made with Typebot</span>
     </a>
   )
 }

packages/js/src/components/icons/TypebotLogo.tsx

@@ -0,0 +1,37 @@
+export const TypebotLogo = () => {
+  return (
+    <svg viewBox="0 0 800 800" width={16}>
+      <rect width="800" height="800" rx="80" fill="#0042DA" />
+      <rect
+        x="650"
+        y="293"
+        width="85.4704"
+        height="384.617"
+        rx="20"
+        transform="rotate(90 650 293)"
+        fill="#FF8E20"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M192.735 378.47C216.337 378.47 235.47 359.337 235.47 335.735C235.47 312.133 216.337 293 192.735 293C169.133 293 150 312.133 150 335.735C150 359.337 169.133 378.47 192.735 378.47Z"
+        fill="#FF8E20"
+      />
+      <rect
+        x="150"
+        y="506.677"
+        width="85.4704"
+        height="384.617"
+        rx="20"
+        transform="rotate(-90 150 506.677)"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M607.265 421.206C583.663 421.206 564.53 440.34 564.53 463.942C564.53 487.544 583.663 506.677 607.265 506.677C630.867 506.677 650 487.544 650 463.942C650 440.34 630.867 421.206 607.265 421.206Z"
+        fill="white"
+      />
+    </svg>
+  )
+}

packages/react/package.json

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