📝 Add Framer embed instructions

apps/builder/src/features/publish/components/embeds/EmbedButton.tsx

@@ -47,6 +47,8 @@ import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { hasProPerks } from '@/features/billing/helpers/hasProPerks'
 import { LockTag } from '@/features/billing/components/LockTag'
 import { Plan } from '@typebot.io/prisma'
+import { FramerModal } from './modals/FramerModal'
+import { FramerLogo } from './logos/FramerLogo'
 
 export type ModalProps = {
   publicId: string
@@ -210,6 +212,14 @@ export const integrationsList = [
       {...props}
     />
   ),
+  (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
+    <EmbedButton
+      logo={<FramerLogo height={100} width="60px" />}
+      label="Framer"
+      modal={(modalProps) => <FramerModal {...modalProps} {...props} />}
+      {...props}
+    />
+  ),
   (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
     <EmbedButton
       logo={

apps/builder/src/features/publish/components/embeds/logos/FramerLogo.tsx

@@ -0,0 +1,12 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const FramerLogo = (props: IconProps) => (
+  <Icon
+    fill="#000000"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M4 0h16v8h-8zM4 8h8l8 8H4zM4 16h8v8z" />
+  </Icon>
+)

apps/builder/src/features/publish/components/embeds/modals/FramerModal/FramerModal.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { ModalProps } from '../../EmbedButton'
+import { EmbedModal } from '../../EmbedModal'
+import { isDefined } from '@udecode/plate-common'
+import { FramerInstructions } from './instructions/FramerInstructions'
+
+export const FramerModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
+  const [selectedEmbedType, setSelectedEmbedType] = useState<
+    'standard' | 'popup' | 'bubble' | undefined
+  >()
+
+  return (
+    <EmbedModal
+      titlePrefix="Framer"
+      isOpen={isOpen}
+      onClose={onClose}
+      isPublished={isPublished}
+      onSelectEmbedType={setSelectedEmbedType}
+      selectedEmbedType={selectedEmbedType}
+    >
+      {isDefined(selectedEmbedType) && (
+        <FramerInstructions type={selectedEmbedType} />
+      )}
+    </EmbedModal>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/FramerModal/index.ts

@@ -0,0 +1 @@
+export * from './FramerModal'

apps/builder/src/features/publish/components/embeds/modals/FramerModal/instructions/FramerBubbleInstructions.tsx

@@ -0,0 +1,63 @@
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react'
+import { BubbleProps } from '@typebot.io/nextjs'
+import { useState } from 'react'
+import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
+import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'
+import { JavascriptBubbleSnippet } from '../../Javascript/JavascriptBubbleSnippet'
+import { TextLink } from '@/components/TextLink'
+
+export const FramerBubbleInstructions = () => {
+  const { typebot } = useTypebot()
+
+  const [theme, setTheme] = useState<BubbleProps['theme']>(
+    parseDefaultBubbleTheme(typebot)
+  )
+  const [previewMessage, setPreviewMessage] =
+    useState<BubbleProps['previewMessage']>()
+
+  return (
+    <>
+      <OrderedList spacing={4} pl={5}>
+        <ListItem>
+          Head over to the <Code>Site Settings</Code> {'>'} <Code>General</Code>{' '}
+          {'>'} <Code>Custom Code</Code> section
+        </ListItem>
+        <ListItem>
+          <Stack spacing={4}>
+            <BubbleSettings
+              previewMessage={previewMessage}
+              defaultPreviewMessageAvatar={
+                typebot?.theme.chat?.hostAvatar?.url ?? ''
+              }
+              theme={theme}
+              onPreviewMessageChange={setPreviewMessage}
+              onThemeChange={setTheme}
+            />
+            <Text>
+              Paste this in the{' '}
+              <Code>
+                End of {'<'}body{'>'} tag
+              </Code>{' '}
+              input:
+            </Text>
+            <JavascriptBubbleSnippet
+              theme={theme}
+              previewMessage={previewMessage}
+            />
+          </Stack>
+        </ListItem>
+      </OrderedList>
+      <Text fontSize="sm" colorScheme="gray" pl="5">
+        Check out the{' '}
+        <TextLink
+          href="https://www.framer.com/academy/lessons/custom-code"
+          isExternal
+        >
+          Custom Code Framer doc
+        </TextLink>{' '}
+        for more information.
+      </Text>
+    </>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/FramerModal/instructions/FramerInstructions.tsx

@@ -0,0 +1,21 @@
+import { FramerBubbleInstructions } from './FramerBubbleInstructions'
+import { FramerPopupInstructions } from './FramerPopupInstructions'
+import { FramerStandardInstructions } from './FramerStandardInstructions'
+
+type Props = {
+  type: 'standard' | 'popup' | 'bubble'
+}
+
+export const FramerInstructions = ({ type }: Props) => {
+  switch (type) {
+    case 'standard': {
+      return <FramerStandardInstructions />
+    }
+    case 'popup': {
+      return <FramerPopupInstructions />
+    }
+    case 'bubble': {
+      return <FramerBubbleInstructions />
+    }
+  }
+}

apps/builder/src/features/publish/components/embeds/modals/FramerModal/instructions/FramerPopupInstructions.tsx

@@ -0,0 +1,47 @@
+import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react'
+import { useState } from 'react'
+import { PopupSettings } from '../../../settings/PopupSettings'
+import { JavascriptPopupSnippet } from '../../Javascript/JavascriptPopupSnippet'
+import { TextLink } from '@/components/TextLink'
+
+export const FramerPopupInstructions = () => {
+  const [inputValue, setInputValue] = useState<number>()
+
+  return (
+    <>
+      <OrderedList spacing={4} pl={5}>
+        <ListItem>
+          Head over to the <Code>Site Settings</Code> {'>'} <Code>General</Code>{' '}
+          {'>'} <Code>Custom Code</Code> section
+        </ListItem>
+        <ListItem>
+          <Stack spacing={4}>
+            <PopupSettings
+              onUpdateSettings={(settings) =>
+                setInputValue(settings.autoShowDelay)
+              }
+            />
+            <Text>
+              Paste this in the{' '}
+              <Code>
+                End of {'<'}body{'>'} tag
+              </Code>{' '}
+              input:
+            </Text>
+            <JavascriptPopupSnippet autoShowDelay={inputValue} />
+          </Stack>
+        </ListItem>
+      </OrderedList>
+      <Text fontSize="sm" colorScheme="gray" pl="5">
+        Check out the{' '}
+        <TextLink
+          href="https://www.framer.com/academy/lessons/custom-code"
+          isExternal
+        >
+          Custom Code Framer doc
+        </TextLink>{' '}
+        for more information.
+      </Text>
+    </>
+  )
+}

apps/builder/src/features/publish/components/embeds/modals/FramerModal/instructions/FramerStandardInstructions.tsx

@@ -0,0 +1,19 @@
+import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react'
+import { JavascriptStandardSnippet } from '../../Javascript/JavascriptStandardSnippet'
+
+export const FramerStandardInstructions = () => (
+  <OrderedList spacing={4} pl={5}>
+    <ListItem>
+      Press <Code>A</Code> to open the <Code>Add elements</Code> panel
+    </ListItem>
+    <ListItem>
+      <Stack spacing={4}>
+        <Text>
+          Add an <Code>Embed</Code> element from the <Code>components</Code>{' '}
+          section and paste this code:
+        </Text>
+        <JavascriptStandardSnippet />
+      </Stack>
+    </ListItem>
+  </OrderedList>
+)