From c55973fac0ae3c799ad86ffa60349c4216c11ce3 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Tue, 4 Jun 2024 18:25:46 +0200
Subject: [PATCH] :children_crossing: (onboarding) Introduce new onboarding
 floating videos mechanism

---
 apps/builder/src/components/icons.tsx         |  17 ++
 .../editor/components/BoardMenuButton.tsx     |  10 +-
 .../features/editor/components/EditorPage.tsx |   5 +-
 .../editor/components/GettingStartedModal.tsx | 174 ------------------
 .../editor/components/TypebotHeader.tsx       |   2 +-
 .../folders/components/CreateBotButton.tsx    |   4 +-
 .../folders/components/FolderContent.tsx      |   1 -
 .../nodes/block/SettingsHoverBar.tsx          |  26 ++-
 .../nodes/block/SettingsPopoverContent.tsx    |  73 +++++---
 .../components/OnboardingPage.tsx             |   2 +-
 .../VideoOnboardingFloatingWindow.tsx         |  68 +++++++
 .../components/VideoOnboardingPopover.tsx     |  76 ++++++++
 .../onboarding/components/YoutubeIframe.tsx   |  60 ++++++
 apps/builder/src/features/onboarding/data.ts  |  32 ++++
 .../onboarding/helpers/hasOnboardingVideo.ts  |  13 ++
 .../hooks/useOnboardingDisclosure.ts          |  65 +++++++
 .../components/CreateNewTypebotButtons.tsx    |  12 --
 apps/builder/src/pages/onboarding.tsx         |   2 +-
 packages/forge/core/types.ts                  |   4 +
 19 files changed, 412 insertions(+), 234 deletions(-)
 delete mode 100644 apps/builder/src/features/editor/components/GettingStartedModal.tsx
 rename apps/builder/src/features/{auth => onboarding}/components/OnboardingPage.tsx (99%)
 create mode 100644 apps/builder/src/features/onboarding/components/VideoOnboardingFloatingWindow.tsx
 create mode 100644 apps/builder/src/features/onboarding/components/VideoOnboardingPopover.tsx
 create mode 100644 apps/builder/src/features/onboarding/components/YoutubeIframe.tsx
 create mode 100644 apps/builder/src/features/onboarding/data.ts
 create mode 100644 apps/builder/src/features/onboarding/helpers/hasOnboardingVideo.ts
 create mode 100644 apps/builder/src/features/onboarding/hooks/useOnboardingDisclosure.ts

diff --git a/apps/builder/src/components/icons.tsx b/apps/builder/src/components/icons.tsx
index 89938d9afc..e9a1990e92 100644
--- a/apps/builder/src/components/icons.tsx
+++ b/apps/builder/src/components/icons.tsx
@@ -678,3 +678,20 @@ export const BracesIcon = (props: IconProps) => (
     <path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" />
   </Icon>
 )
+
+export const VideoPopoverIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 21 21" {...featherIconsBaseProps} {...props}>
+    <path
+      d="M6.9 18.0079C8.80858 18.9869 11.0041 19.2521 13.0909 18.7556C15.1777 18.2592 17.0186 17.0337 18.2818 15.3C19.545 13.5664 20.1474 11.4386 19.9806 9.30002C19.8137 7.16147 18.8886 5.15283 17.3718 3.63605C15.855 2.11928 13.8464 1.19411 11.7078 1.02728C9.56929 0.860441 7.44147 1.46291 5.70782 2.72611C3.97417 3.98931 2.74869 5.83017 2.25222 7.91697C1.75575 10.0038 2.02094 12.1993 3 14.1079L1 20.0079L6.9 18.0079Z"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 6L15 10L9 14V6Z"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Icon>
+)
diff --git a/apps/builder/src/features/editor/components/BoardMenuButton.tsx b/apps/builder/src/features/editor/components/BoardMenuButton.tsx
index cc83822108..b5e47c2666 100644
--- a/apps/builder/src/features/editor/components/BoardMenuButton.tsx
+++ b/apps/builder/src/features/editor/components/BoardMenuButton.tsx
@@ -18,27 +18,19 @@ import {
   SettingsIcon,
 } from '@/components/icons'
 import { useTypebot } from '../providers/TypebotProvider'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { EditorSettingsModal } from './EditorSettingsModal'
 import { parseDefaultPublicId } from '@/features/publish/helpers/parseDefaultPublicId'
 import { useTranslate } from '@tolgee/react'
-import { useUser } from '@/features/account/hooks/useUser'
-import { useRouter } from 'next/router'
 import { RightPanel, useEditor } from '../providers/EditorProvider'
 
 export const BoardMenuButton = (props: StackProps) => {
-  const { query } = useRouter()
   const { typebot, currentUserMode } = useTypebot()
-  const { user } = useUser()
   const [isDownloading, setIsDownloading] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { t } = useTranslate()
   const { setRightPanel } = useEditor()
 
-  useEffect(() => {
-    if (user && !user.graphNavigation && !query.isFirstBot) onOpen()
-  }, [onOpen, query.isFirstBot, user, user?.graphNavigation])
-
   const downloadFlow = () => {
     assert(typebot)
     setIsDownloading(true)
diff --git a/apps/builder/src/features/editor/components/EditorPage.tsx b/apps/builder/src/features/editor/components/EditorPage.tsx
index 514a3dd2ff..80c03c63af 100644
--- a/apps/builder/src/features/editor/components/EditorPage.tsx
+++ b/apps/builder/src/features/editor/components/EditorPage.tsx
@@ -8,7 +8,6 @@ import {
 import { useTypebot } from '../providers/TypebotProvider'
 import { BlocksSideBar } from './BlocksSideBar'
 import { BoardMenuButton } from './BoardMenuButton'
-import { GettingStartedModal } from './GettingStartedModal'
 import { PreviewDrawer } from '@/features/preview/components/PreviewDrawer'
 import { TypebotHeader } from './TypebotHeader'
 import { Graph } from '@/features/graph/components/Graph'
@@ -19,6 +18,7 @@ import { TypebotNotFoundPage } from './TypebotNotFoundPage'
 import { SuspectedTypebotBanner } from './SuspectedTypebotBanner'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { VariablesDrawer } from '@/features/preview/components/VariablesDrawer'
+import { VideoOnboardingFloatingWindow } from '@/features/onboarding/components/VideoOnboardingFloatingWindow'
 
 export const EditorPage = () => {
   const { typebot, currentUserMode, is404 } = useTypebot()
@@ -32,11 +32,12 @@ export const EditorPage = () => {
   const isSuspicious = typebot?.riskLevel === 100 && !workspace?.isVerified
 
   if (is404) return <TypebotNotFoundPage />
+
   return (
     <EditorProvider>
       <Seo title={typebot?.name ? `${typebot.name} | Editor` : 'Editor'} />
       <Flex overflow="clip" h="100vh" flexDir="column" id="editor-container">
-        <GettingStartedModal />
+        <VideoOnboardingFloatingWindow type="editor" />
         {isSuspicious && <SuspectedTypebotBanner typebotId={typebot.id} />}
         <TypebotHeader />
         <Flex
diff --git a/apps/builder/src/features/editor/components/GettingStartedModal.tsx b/apps/builder/src/features/editor/components/GettingStartedModal.tsx
deleted file mode 100644
index bff55140d2..0000000000
--- a/apps/builder/src/features/editor/components/GettingStartedModal.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import {
-  useDisclosure,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalCloseButton,
-  ModalBody,
-  Stack,
-  Heading,
-  List,
-  ListItem,
-  Text,
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  HStack,
-  Flex,
-} from '@chakra-ui/react'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { useTranslate } from '@tolgee/react'
-
-export const GettingStartedModal = () => {
-  const { t } = useTranslate()
-  const { query } = useRouter()
-  const { isOpen, onOpen, onClose } = useDisclosure()
-
-  useEffect(() => {
-    if (query.isFirstBot) onOpen()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} size="xl">
-      <ModalOverlay />
-      <ModalContent>
-        <ModalCloseButton />
-        <ModalBody as={Stack} spacing="8" py="10">
-          <Stack spacing={4}>
-            <Heading fontSize="xl">
-              {t('editor.gettingStartedModal.editorBasics.heading')}
-            </Heading>
-            <List spacing={4}>
-              <HStack as={ListItem}>
-                <Flex
-                  bgColor="blue.500"
-                  rounded="full"
-                  boxSize="25px"
-                  justify="center"
-                  align="center"
-                  color="white"
-                  fontWeight="bold"
-                  flexShrink={0}
-                  fontSize="13px"
-                >
-                  1
-                </Flex>
-                <Text>
-                  {t('editor.gettingStartedModal.editorBasics.list.one.label')}
-                </Text>
-              </HStack>
-              <HStack as={ListItem}>
-                <Flex
-                  bgColor="blue.500"
-                  rounded="full"
-                  boxSize="25px"
-                  fontSize="13px"
-                  justify="center"
-                  align="center"
-                  color="white"
-                  fontWeight="bold"
-                  flexShrink={0}
-                >
-                  2
-                </Flex>
-                <Text>
-                  {t('editor.gettingStartedModal.editorBasics.list.two.label')}
-                </Text>
-              </HStack>
-              <HStack as={ListItem}>
-                <Flex
-                  bgColor="blue.500"
-                  rounded="full"
-                  boxSize="25px"
-                  justify="center"
-                  align="center"
-                  color="white"
-                  fontWeight="bold"
-                  flexShrink={0}
-                  fontSize="13px"
-                >
-                  3
-                </Flex>
-                <Text>
-                  {t(
-                    'editor.gettingStartedModal.editorBasics.list.three.label'
-                  )}
-                </Text>
-              </HStack>
-              <HStack as={ListItem}>
-                <Flex
-                  bgColor="blue.500"
-                  rounded="full"
-                  boxSize="25px"
-                  justify="center"
-                  align="center"
-                  color="white"
-                  fontWeight="bold"
-                  flexShrink={0}
-                  fontSize="13px"
-                >
-                  4
-                </Flex>
-                <Text>
-                  {t('editor.gettingStartedModal.editorBasics.list.four.label')}
-                </Text>
-              </HStack>
-            </List>
-          </Stack>
-
-          <Text>{t('editor.gettingStartedModal.editorBasics.list.label')}</Text>
-          <Stack spacing={4}>
-            <Heading fontSize="xl">
-              {t('editor.gettingStartedModal.seeAction.label')} ({`<`}{' '}
-              {t('editor.gettingStartedModal.seeAction.time')})
-            </Heading>
-            <iframe
-              width="100%"
-              height="315"
-              src="https://www.youtube.com/embed/jp3ggg_42-M"
-              title="YouTube video player"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-              style={{ borderRadius: '0.5rem', border: 'none' }}
-            />
-            <Accordion allowToggle>
-              <AccordionItem>
-                <AccordionButton>
-                  <Box flex="1" textAlign="left">
-                    {t('editor.gettingStartedModal.seeAction.item.label')}
-                  </Box>
-                  <AccordionIcon />
-                </AccordionButton>
-                <AccordionPanel py={10} as={Stack} spacing="10">
-                  <iframe
-                    width="100%"
-                    height="315"
-                    src="https://www.youtube.com/embed/6BudIC4GYNk"
-                    title="YouTube video player"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowFullScreen
-                    style={{ borderRadius: '0.5rem', border: 'none' }}
-                  />
-                  <iframe
-                    width="100%"
-                    height="315"
-                    src="https://www.youtube.com/embed/ZuyDwFLRbfQ"
-                    title="YouTube video player"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowFullScreen
-                    style={{ borderRadius: '0.5rem', border: 'none' }}
-                  />
-                </AccordionPanel>
-              </AccordionItem>
-            </Accordion>
-          </Stack>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  )
-}
diff --git a/apps/builder/src/features/editor/components/TypebotHeader.tsx b/apps/builder/src/features/editor/components/TypebotHeader.tsx
index 548c8fb1be..fb6e216239 100644
--- a/apps/builder/src/features/editor/components/TypebotHeader.tsx
+++ b/apps/builder/src/features/editor/components/TypebotHeader.tsx
@@ -60,7 +60,7 @@ export const TypebotHeader = () => {
       justify="center"
       align="center"
       h={`${headerHeight}px`}
-      zIndex={100}
+      zIndex={1}
       pos="relative"
       bgColor={headerBgColor}
       flexShrink={0}
diff --git a/apps/builder/src/features/folders/components/CreateBotButton.tsx b/apps/builder/src/features/folders/components/CreateBotButton.tsx
index ee9a05f3be..d0ad6fdcaf 100644
--- a/apps/builder/src/features/folders/components/CreateBotButton.tsx
+++ b/apps/builder/src/features/folders/components/CreateBotButton.tsx
@@ -8,9 +8,8 @@ import { useTypebotDnd } from '../TypebotDndProvider'
 
 export const CreateBotButton = ({
   folderId,
-  isFirstBot,
   ...props
-}: { folderId?: string; isFirstBot: boolean } & ButtonProps) => {
+}: { folderId?: string } & ButtonProps) => {
   const { t } = useTranslate()
   const router = useRouter()
   const { draggedTypebot } = useTypebotDnd()
@@ -18,7 +17,6 @@ export const CreateBotButton = ({
   const handleClick = () =>
     router.push(
       `/typebots/create?${stringify({
-        isFirstBot: !isFirstBot ? undefined : isFirstBot,
         folderId,
       })}`
     )
diff --git a/apps/builder/src/features/folders/components/FolderContent.tsx b/apps/builder/src/features/folders/components/FolderContent.tsx
index 7a67d67bca..6352c1d007 100644
--- a/apps/builder/src/features/folders/components/FolderContent.tsx
+++ b/apps/builder/src/features/folders/components/FolderContent.tsx
@@ -187,7 +187,6 @@ export const FolderContent = ({ folder }: Props) => {
               <CreateBotButton
                 folderId={folder?.id}
                 isLoading={isTypebotLoading}
-                isFirstBot={typebots?.length === 0 && folder === null}
               />
             )}
             {isFolderLoading && <ButtonSkeleton />}
diff --git a/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx b/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx
index 686313c550..bfa4ea1b67 100644
--- a/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx
+++ b/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx
@@ -8,17 +8,26 @@ import {
 } from '@chakra-ui/react'
 import { BlockWithOptions } from '@typebot.io/schemas'
 import { getHelpDocUrl } from '@/features/graph/helpers/getHelpDocUrl'
-import { useForgedBlock } from '@/features/forge/hooks/useForgedBlock'
 import { useTranslate } from '@tolgee/react'
+import { VideoOnboardingPopover } from '@/features/onboarding/components/VideoOnboardingPopover'
+import { forgedBlocks } from '@typebot.io/forge-repository/definitions'
 
 type Props = {
   blockType: BlockWithOptions['type']
+  blockDef?: (typeof forgedBlocks)[keyof typeof forgedBlocks]
+  isVideoOnboardingItemDisplayed: boolean
   onExpandClick: () => void
+  onVideoOnboardingClick: () => void
 }
 
-export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
+export const SettingsHoverBar = ({
+  blockType,
+  blockDef,
+  isVideoOnboardingItemDisplayed,
+  onExpandClick,
+  onVideoOnboardingClick,
+}: Props) => {
   const { t } = useTranslate()
-  const { blockDef } = useForgedBlock(blockType)
   const helpDocUrl = getHelpDocUrl(blockType, blockDef)
   return (
     <HStack
@@ -43,6 +52,10 @@ export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
           as={Link}
           leftIcon={<BuoyIcon />}
           borderLeftRadius="none"
+          borderRightRadius={
+            isVideoOnboardingItemDisplayed ? 'none' : undefined
+          }
+          borderRightWidth={isVideoOnboardingItemDisplayed ? '1px' : undefined}
           size="xs"
           variant="ghost"
           href={helpDocUrl}
@@ -51,6 +64,13 @@ export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
           {t('help')}
         </Button>
       )}
+      {isVideoOnboardingItemDisplayed && (
+        <VideoOnboardingPopover.TriggerIconButton
+          onClick={onVideoOnboardingClick}
+          size="xs"
+          borderLeftRadius="none"
+        />
+      )}
     </HStack>
   )
 }
diff --git a/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx b/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
index f27bf33da6..b6922f7193 100644
--- a/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
+++ b/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
@@ -45,6 +45,9 @@ import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integr
 import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
 import { ForgedBlockSettings } from '../../../../forge/components/ForgedBlockSettings'
 import { OpenAISettings } from '@/features/blocks/integrations/openai/components/OpenAISettings'
+import { useForgedBlock } from '@/features/forge/hooks/useForgedBlock'
+import { VideoOnboardingPopover } from '@/features/onboarding/components/VideoOnboardingPopover'
+import { hasOnboardingVideo } from '@/features/onboarding/helpers/hasOnboardingVideo'
 
 type Props = {
   block: BlockWithOptions
@@ -56,6 +59,7 @@ type Props = {
 export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
   const [isHovering, setIsHovering] = useState(false)
   const arrowColor = useColorModeValue('white', 'gray.800')
+  const { blockDef } = useForgedBlock(props.block.type)
   const ref = useRef<HTMLDivElement | null>(null)
   const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
 
@@ -63,39 +67,54 @@ export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
     e.stopPropagation()
   }
   useEventListener('wheel', handleMouseWheel, ref.current)
+
   return (
     <Portal>
       <PopoverContent onMouseDown={handleMouseDown} pos="relative">
         <PopoverArrow bgColor={arrowColor} />
-        <PopoverBody
-          py="3"
-          overflowY="auto"
-          maxH="400px"
-          ref={ref}
-          shadow="lg"
-          onMouseEnter={() => setIsHovering(true)}
-          onMouseLeave={() => setIsHovering(false)}
+
+        <VideoOnboardingPopover.Root
+          type={props.block.type}
+          blockDef={blockDef}
         >
-          <Stack spacing={3}>
-            <Flex
-              w="full"
-              pos="absolute"
-              top="-56px"
-              height="64px"
-              right={0}
-              justifyContent="flex-end"
-              align="center"
+          {({ onToggle }) => (
+            <PopoverBody
+              py="3"
+              overflowY="auto"
+              maxH="400px"
+              ref={ref}
+              shadow="lg"
+              onMouseEnter={() => setIsHovering(true)}
+              onMouseLeave={() => setIsHovering(false)}
             >
-              <SlideFade in={isHovering} unmountOnExit>
-                <SettingsHoverBar
-                  onExpandClick={onExpandClick}
-                  blockType={props.block.type}
-                />
-              </SlideFade>
-            </Flex>
-            <BlockSettings {...props} />
-          </Stack>
-        </PopoverBody>
+              <Stack spacing={3}>
+                <Flex
+                  w="full"
+                  pos="absolute"
+                  top="-56px"
+                  height="64px"
+                  right={0}
+                  justifyContent="flex-end"
+                  align="center"
+                >
+                  <SlideFade in={isHovering} unmountOnExit>
+                    <SettingsHoverBar
+                      onExpandClick={onExpandClick}
+                      onVideoOnboardingClick={onToggle}
+                      blockType={props.block.type}
+                      blockDef={blockDef}
+                      isVideoOnboardingItemDisplayed={hasOnboardingVideo({
+                        blockType: props.block.type,
+                        blockDef,
+                      })}
+                    />
+                  </SlideFade>
+                </Flex>
+                <BlockSettings {...props} />
+              </Stack>
+            </PopoverBody>
+          )}
+        </VideoOnboardingPopover.Root>
       </PopoverContent>
     </Portal>
   )
diff --git a/apps/builder/src/features/auth/components/OnboardingPage.tsx b/apps/builder/src/features/onboarding/components/OnboardingPage.tsx
similarity index 99%
rename from apps/builder/src/features/auth/components/OnboardingPage.tsx
rename to apps/builder/src/features/onboarding/components/OnboardingPage.tsx
index be63e38dae..99b27494dc 100644
--- a/apps/builder/src/features/auth/components/OnboardingPage.tsx
+++ b/apps/builder/src/features/onboarding/components/OnboardingPage.tsx
@@ -102,7 +102,7 @@ export const OnboardingPage = () => {
     setTimeout(() => {
       replace({
         pathname: '/typebots',
-        query: { ...query, isFirstBot: true },
+        query: { ...query },
       })
     }, 2000)
   }
diff --git a/apps/builder/src/features/onboarding/components/VideoOnboardingFloatingWindow.tsx b/apps/builder/src/features/onboarding/components/VideoOnboardingFloatingWindow.tsx
new file mode 100644
index 0000000000..119b1fa7fe
--- /dev/null
+++ b/apps/builder/src/features/onboarding/components/VideoOnboardingFloatingWindow.tsx
@@ -0,0 +1,68 @@
+import { CloseIcon } from '@/components/icons'
+import { useUser } from '@/features/account/hooks/useUser'
+import {
+  IconButton,
+  SlideFade,
+  Flex,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { useOnboardingDisclosure } from '../hooks/useOnboardingDisclosure'
+import { onboardingVideos } from '../data'
+import { YoutubeIframe } from './YoutubeIframe'
+
+type Props = {
+  type: keyof typeof onboardingVideos
+}
+
+export const VideoOnboardingFloatingWindow = ({ type }: Props) => {
+  const { user, updateUser } = useUser()
+  const { isOpen, onClose } = useOnboardingDisclosure({
+    key: type,
+    user,
+    updateUser,
+    defaultOpenDelay: 1000,
+    blockDef: undefined,
+  })
+  const bgColor = useColorModeValue('white', 'gray.900')
+  const closeButtonColorScheme = useColorModeValue('blackAlpha', 'gray')
+
+  if (!onboardingVideos[type]) return null
+
+  return (
+    <SlideFade
+      in={isOpen}
+      offsetY="20px"
+      style={{
+        position: 'fixed',
+        bottom: '18px',
+        right: '18px',
+        zIndex: 42,
+      }}
+      unmountOnExit
+    >
+      <Flex
+        p="5"
+        bgColor={bgColor}
+        borderWidth="1px"
+        shadow="xl"
+        rounded="md"
+        aspectRatio="1.5"
+        w="600px"
+      >
+        <YoutubeIframe id={onboardingVideos[type]!.youtubeId} />
+
+        <IconButton
+          icon={<CloseIcon />}
+          aria-label={'Close'}
+          pos="absolute"
+          top="-3"
+          right="-3"
+          colorScheme={closeButtonColorScheme}
+          size="sm"
+          rounded="full"
+          onClick={onClose}
+        />
+      </Flex>
+    </SlideFade>
+  )
+}
diff --git a/apps/builder/src/features/onboarding/components/VideoOnboardingPopover.tsx b/apps/builder/src/features/onboarding/components/VideoOnboardingPopover.tsx
new file mode 100644
index 0000000000..ec0de7886c
--- /dev/null
+++ b/apps/builder/src/features/onboarding/components/VideoOnboardingPopover.tsx
@@ -0,0 +1,76 @@
+import { CloseIcon, VideoPopoverIcon } from '@/components/icons'
+import {
+  PopoverContent,
+  PopoverArrow,
+  PopoverBody,
+  IconButton,
+  Popover,
+  PopoverTrigger,
+  IconButtonProps,
+} from '@chakra-ui/react'
+import { useOnboardingDisclosure } from '../hooks/useOnboardingDisclosure'
+import { onboardingVideos } from '../data'
+import { useUser } from '@/features/account/hooks/useUser'
+import { ForgedBlockDefinition } from '@typebot.io/forge-repository/types'
+import { YoutubeIframe } from './YoutubeIframe'
+
+type Props = {
+  type: keyof typeof onboardingVideos
+  defaultIsOpen?: boolean
+  blockDef?: ForgedBlockDefinition
+  children: ({ onToggle }: { onToggle: () => void }) => JSX.Element
+}
+
+const Root = ({ type, blockDef, children }: Props) => {
+  const { user, updateUser } = useUser()
+  const youtubeId =
+    onboardingVideos[type]?.youtubeId ?? blockDef?.onboarding?.youtubeId
+  const { isOpen, onClose, onToggle } = useOnboardingDisclosure({
+    key: type,
+    updateUser,
+    user,
+    blockDef,
+  })
+
+  if (!youtubeId) return children({ onToggle })
+
+  return (
+    <Popover isOpen={isOpen} placement="right" isLazy>
+      <PopoverTrigger>{children({ onToggle })}</PopoverTrigger>
+
+      <PopoverContent aspectRatio="1.5" width="640px">
+        <PopoverArrow />
+        <PopoverBody h="full" p="5">
+          <YoutubeIframe id={youtubeId} />
+          <IconButton
+            icon={<CloseIcon />}
+            aria-label={'Close'}
+            pos="absolute"
+            top="-3"
+            right="-3"
+            colorScheme="blackAlpha"
+            size="sm"
+            rounded="full"
+            onClick={onClose}
+          />
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+const TriggerIconButton = (props: Omit<IconButtonProps, 'aria-label'>) => (
+  <IconButton
+    size="sm"
+    icon={<VideoPopoverIcon />}
+    aria-label={'Open Bubbles help video'}
+    variant="ghost"
+    colorScheme="blue"
+    {...props}
+  />
+)
+
+export const VideoOnboardingPopover = {
+  Root,
+  TriggerIconButton,
+}
diff --git a/apps/builder/src/features/onboarding/components/YoutubeIframe.tsx b/apps/builder/src/features/onboarding/components/YoutubeIframe.tsx
new file mode 100644
index 0000000000..463ec30902
--- /dev/null
+++ b/apps/builder/src/features/onboarding/components/YoutubeIframe.tsx
@@ -0,0 +1,60 @@
+import { chakra } from '@chakra-ui/react'
+import { useCallback, useEffect } from 'react'
+
+declare const window: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  YT:
+    | undefined
+    | {
+        Player: new (
+          id: string,
+          options: { events: { onReady: () => void } }
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ) => any
+        loaded: boolean
+      }
+  onYouTubeIframeAPIReady: () => void
+}
+
+type Props = {
+  id: string
+}
+
+export const YoutubeIframe = ({ id }: Props) => {
+  const initPlayer = useCallback(() => {
+    if (!window.YT) return
+    const player = new window.YT.Player(id, {
+      events: {
+        onReady: () => {
+          player.setPlaybackRate(1.2)
+          player.setPlaybackQuality('')
+        },
+      },
+    })
+  }, [id])
+
+  useEffect(() => {
+    if (window.YT?.loaded) initPlayer()
+    initYoutubeIframeApi()
+    window.onYouTubeIframeAPIReady = initPlayer
+  }, [initPlayer])
+
+  return (
+    <chakra.iframe
+      id={id}
+      src={`https://www.youtube.com/embed/${id}?autoplay=1&enablejsapi=1`}
+      allowFullScreen
+      allow="autoplay; fullscreen; picture-in-picture"
+      boxSize="full"
+      rounded="md"
+    />
+  )
+}
+
+const initYoutubeIframeApi = () => {
+  if (document.getElementById('youtube-iframe-api')) return
+  const tag = document.createElement('script')
+  tag.src = 'https://www.youtube.com/iframe_api'
+  tag.id = 'youtube-iframe-api'
+  document.head.appendChild(tag)
+}
diff --git a/apps/builder/src/features/onboarding/data.ts b/apps/builder/src/features/onboarding/data.ts
new file mode 100644
index 0000000000..80cecbc5e8
--- /dev/null
+++ b/apps/builder/src/features/onboarding/data.ts
@@ -0,0 +1,32 @@
+import { Block } from '@typebot.io/schemas'
+import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integrations/constants'
+
+type Feature = 'editor' | Block['type']
+
+export const onboardingVideos: Partial<
+  Record<
+    Feature,
+    | {
+        key: string
+        youtubeId: string
+        deployedAt: Date
+      }
+    | undefined
+  >
+> = {
+  editor: {
+    key: 'editor',
+    youtubeId: 'jp3ggg_42-M',
+    deployedAt: new Date('2024-06-04'),
+  },
+  [IntegrationBlockType.ZAPIER]: {
+    key: IntegrationBlockType.ZAPIER,
+    youtubeId: '2ZskGItI_Zo',
+    deployedAt: new Date('2024-06-04'),
+  },
+  [IntegrationBlockType.MAKE_COM]: {
+    key: IntegrationBlockType.MAKE_COM,
+    youtubeId: 'V-y1Orys_kY',
+    deployedAt: new Date('2024-06-04'),
+  },
+}
diff --git a/apps/builder/src/features/onboarding/helpers/hasOnboardingVideo.ts b/apps/builder/src/features/onboarding/helpers/hasOnboardingVideo.ts
new file mode 100644
index 0000000000..72edbe5d05
--- /dev/null
+++ b/apps/builder/src/features/onboarding/helpers/hasOnboardingVideo.ts
@@ -0,0 +1,13 @@
+import { ForgedBlockDefinition } from '@typebot.io/forge-repository/types'
+import { Block } from '@typebot.io/schemas'
+import { onboardingVideos } from '../data'
+import { isDefined } from '@typebot.io/lib/utils'
+
+type Props = {
+  blockType: Block['type']
+  blockDef?: ForgedBlockDefinition
+}
+export const hasOnboardingVideo = ({ blockType, blockDef }: Props) =>
+  isDefined(
+    blockDef?.onboarding?.youtubeId ?? onboardingVideos[blockType]?.youtubeId
+  )
diff --git a/apps/builder/src/features/onboarding/hooks/useOnboardingDisclosure.ts b/apps/builder/src/features/onboarding/hooks/useOnboardingDisclosure.ts
new file mode 100644
index 0000000000..45fd6a63e4
--- /dev/null
+++ b/apps/builder/src/features/onboarding/hooks/useOnboardingDisclosure.ts
@@ -0,0 +1,65 @@
+import { useDisclosure } from '@chakra-ui/react'
+import { onboardingVideos } from '../data'
+import { User } from '@typebot.io/schemas'
+import { useEffect, useState } from 'react'
+import { ForgedBlockDefinition } from '@typebot.io/forge-repository/types'
+
+type Props = {
+  key?: keyof typeof onboardingVideos
+  updateUser: (data: Partial<User>) => void
+  user?: Pick<User, 'createdAt' | 'displayedInAppNotifications'>
+  defaultOpenDelay?: number
+  blockDef: ForgedBlockDefinition | undefined
+}
+
+export const useOnboardingDisclosure = ({
+  key,
+  updateUser,
+  user,
+  defaultOpenDelay,
+  blockDef,
+}: Props) => {
+  const [isInitialized, setIsInitialized] = useState(false)
+  const { isOpen, onOpen, onClose, onToggle } = useDisclosure({
+    onOpen: () => {
+      if (!user || !key || user.displayedInAppNotifications?.[key]) return
+      updateUser({
+        displayedInAppNotifications: {
+          ...user.displayedInAppNotifications,
+          [key]: true,
+        },
+      })
+    },
+  })
+
+  useEffect(() => {
+    if (isInitialized || !user?.createdAt || !key) return
+    setIsInitialized(true)
+    if (
+      key &&
+      new Date(user.createdAt) >=
+        (onboardingVideos[key]
+          ? onboardingVideos[key]!.deployedAt
+          : blockDef?.onboarding?.deployedAt ?? new Date()) &&
+      user.displayedInAppNotifications?.[key] === undefined
+    ) {
+      if (defaultOpenDelay) {
+        setTimeout(() => {
+          onOpen()
+        }, defaultOpenDelay)
+      } else {
+        onOpen()
+      }
+    }
+  }, [
+    blockDef?.onboarding?.deployedAt,
+    defaultOpenDelay,
+    isInitialized,
+    key,
+    onOpen,
+    user?.createdAt,
+    user?.displayedInAppNotifications,
+  ])
+
+  return { isOpen, onClose, onToggle }
+}
diff --git a/apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx b/apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx
index 1c4ca3c9f5..56fa1cf4fd 100644
--- a/apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx
+++ b/apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx
@@ -42,12 +42,6 @@ export const CreateNewTypebotButtons = () => {
     onSuccess: (data) => {
       router.push({
         pathname: `/typebots/${data.typebot.id}/edit`,
-        query:
-          router.query.isFirstBot === 'true'
-            ? {
-                isFirstBot: 'true',
-              }
-            : {},
       })
     },
     onSettled: () => {
@@ -68,12 +62,6 @@ export const CreateNewTypebotButtons = () => {
     onSuccess: (data) => {
       router.push({
         pathname: `/typebots/${data.typebot.id}/edit`,
-        query:
-          router.query.isFirstBot === 'true'
-            ? {
-                isFirstBot: 'true',
-              }
-            : {},
       })
     },
     onSettled: () => {
diff --git a/apps/builder/src/pages/onboarding.tsx b/apps/builder/src/pages/onboarding.tsx
index 080b1ce5df..99041a49d7 100644
--- a/apps/builder/src/pages/onboarding.tsx
+++ b/apps/builder/src/pages/onboarding.tsx
@@ -1,4 +1,4 @@
-import { OnboardingPage } from '@/features/auth/components/OnboardingPage'
+import { OnboardingPage } from '@/features/onboarding/components/OnboardingPage'
 
 export default function Page() {
   return <OnboardingPage />
diff --git a/packages/forge/core/types.ts b/packages/forge/core/types.ts
index 325a94fcd4..1a7b880569 100644
--- a/packages/forge/core/types.ts
+++ b/packages/forge/core/types.ts
@@ -136,6 +136,10 @@ export type BlockDefinition<
   LightLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element
   DarkLogo?: (props: SVGProps<SVGSVGElement>) => JSX.Element
   docsUrl?: string
+  onboarding?: {
+    deployedAt: Date
+    youtubeId: string
+  }
   auth?: Auth
   options?: Options | undefined
   fetchers?: FetcherDefinition<Auth, Options>[]