💄 Add backgroundColor theme field for Popup

And use it for the onboarding modal

Closes #375

apps/builder/src/features/dashboard/components/OnboardingModal.tsx

@@ -16,6 +16,7 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
     '/bots/onboarding.json',
     '/bots/onboarding-dark.json'
   )
+  const backgroundColor = useColorModeValue('white', '#171923')
   const { user, updateUser } = useUser()
   const [typebot, setTypebot] = useState<Typebot>()
   const confettiCanvaContainer = useRef<HTMLCanvasElement | null>(null)
@@ -102,6 +103,9 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
           prefilledVariables={{
             Name: user?.name?.split(' ')[0] ?? undefined,
           }}
+          theme={{
+            backgroundColor,
+          }}
           defaultOpen={isNewUser}
           onAnswer={handleNewAnswer}
           onEnd={handleBotEnd}

packages/js/package.json

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

packages/js/src/features/popup/components/Popup.tsx

@@ -122,6 +122,10 @@ export const Popup = (props: PopupProps) => {
           <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <div
               class="relative h-[80vh] transform overflow-hidden rounded-lg text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+              style={{
+                'background-color':
+                  props.theme?.backgroundColor ?? 'transparent',
+              }}
               ref={botContainer}
             >
               <Bot {...botProps} prefilledVariables={prefilledVariables()} />

packages/js/src/features/popup/types.ts

@@ -2,5 +2,6 @@ export type PopupParams = {
   autoShowDelay?: number
   theme?: {
     width?: string
+    backgroundColor?: string
   }
 }

packages/react/package.json

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