📝 (embed) Add FlutterFlow embed instructions

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

@@ -35,6 +35,8 @@ import { ScriptModal } from './modals/Script/ScriptModal'
 import { CodeIcon } from '@/components/icons'
 import { ApiModal } from './modals/ApiModal'
 import { ScriptIcon } from '@/features/blocks/logic/script/components/ScriptIcon'
+import { FlutterFlowLogo } from './logos/FlutterFlowLogo'
+import { FlutterFlowModal } from './modals/FlutterFlowModal'
 
 export type ModalProps = {
   publicId: string
@@ -147,6 +149,14 @@ export const integrationsList = [
       {...props}
     />
   ),
+  (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
+    <EmbedButton
+      logo={<FlutterFlowLogo height={100} width="60px" />}
+      label="FlutterFlow"
+      Modal={FlutterFlowModal}
+      {...props}
+    />
+  ),
   (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
     <EmbedButton
       logo={

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

@@ -0,0 +1,19 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const FlutterFlowLogo = (props: IconProps) => (
+  <Icon
+    width="67"
+    height="68"
+    viewBox="0 0 67 68"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M60.6347 0C62.6766 0 64.5668 1.10496 65.5244 2.90118C66.4419 4.6217 66.403 6.64918 65.4227 8.33205L65.3893 8.38864L56.7972 22.7617C55.8256 24.387 54.0715 25.4014 52.1968 25.423L52.1356 25.4234L42.3241 25.4233L46.4021 34.7593L46.4183 34.7867L46.4434 34.8308C47.4038 36.5666 47.3804 38.6304 46.3844 40.3403L46.3509 40.3972L37.7588 54.7702C36.7872 56.3955 35.0332 57.4099 33.1585 57.4315L33.0973 57.4319L21.0549 57.4318L12.3978 66.5627L12.3814 66.5797C11.5668 67.4078 10.4661 67.8698 9.31846 67.8698C9.03158 67.8698 8.74452 67.8408 8.46053 67.7829C7.06066 67.4971 5.89759 66.5365 5.33774 65.2117L5.32195 65.1739L0.766133 54.7156L0.742168 54.6755L0.717276 54.6324C0.713141 54.625 0.708936 54.6175 0.704544 54.6095C-0.255836 52.8739 -0.232574 50.8101 0.763263 49.1001L0.796818 49.0432L9.13021 35.1029L2.98975 21.0452L3.10227 20.9879L3.10057 20.9794C2.84075 19.6863 3.0499 18.3378 3.71716 17.1567L3.75401 17.0925L3.78807 17.0347L12.3802 2.66159C13.3519 1.03641 15.106 0.0219807 16.9806 0H17.0418H60.6347ZM15.5195 57.3226L6.39039 57.3224L9.0717 63.525L9.07829 63.5415C9.12274 63.6526 9.19463 63.7134 9.30164 63.7354C9.39709 63.7551 9.47432 63.7348 9.54736 63.6682L9.56013 63.6558L15.5195 57.3226ZM41.6168 35.9985H14.0216C13.9912 35.9985 13.9607 35.9995 13.9303 36.0016L13.9219 36.0022L21.4883 53.3099H33.0959C33.5731 53.3099 34.0327 53.0544 34.2941 52.6441L34.3148 52.6105L42.9193 38.2287C43.176 37.7997 43.2044 37.3019 43.001 36.854C42.7665 36.3375 42.2221 35.9985 41.6168 35.9985ZM11.1531 39.5525L4.32399 51.0629C4.05225 51.5211 4.0365 52.0576 4.27984 52.5298L4.30565 52.5778L4.3194 52.6013L4.34697 52.6464L4.40158 52.7276L4.46255 52.8069L4.52088 52.8735L4.531 52.8843L4.57045 52.9243L4.60472 52.9569C4.81954 53.1519 5.08509 53.2709 5.37798 53.3015L5.44378 53.3071L5.48188 53.3091L5.53015 53.3099H17.1171L11.1531 39.5525ZM9.35736 25.4512L12.3566 32.3299L12.4151 32.3099C12.933 32.1366 13.4746 32.0427 14.022 32.0341L14.1042 32.0335L40.8529 32.0334L37.9829 25.4513L9.35736 25.4512ZM60.5585 4.01257H32.8649L40.4335 21.3239H52.037C52.515 21.3239 52.975 21.0683 53.2365 20.6578L53.2573 20.6242L61.8623 6.24261C62.1189 5.81371 62.1473 5.31633 61.9441 4.8688C61.7144 4.36289 61.1876 4.02709 60.5971 4.01303L60.5585 4.01257ZM28.6254 4.01257H17.0861C16.6116 4.01257 16.1539 4.26756 15.8936 4.67744L15.8729 4.71101L7.29049 19.0929C7.03426 19.5222 7.00595 20.0207 7.20912 20.4692C7.43797 20.9746 7.96188 21.3095 8.54887 21.3235L8.58723 21.3239H36.1742L28.6254 4.01257Z"
+      fill="#4B39EF"
+    />
+  </Icon>
+)

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

@@ -0,0 +1,75 @@
+import { AlertInfo } from '@/components/AlertInfo'
+import { CopyButton } from '@/components/CopyButton'
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  Heading,
+  ModalCloseButton,
+  ModalBody,
+  OrderedList,
+  ListItem,
+  Code,
+  InputGroup,
+  Input,
+  InputRightElement,
+  ModalFooter,
+  Text,
+  Stack,
+} from '@chakra-ui/react'
+import { env, getViewerUrl } from '@typebot.io/lib'
+import { ModalProps } from '../EmbedButton'
+
+export const FlutterFlowModal = ({
+  isPublished,
+  publicId,
+  isOpen,
+  onClose,
+}: ModalProps): JSX.Element => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Heading size="md">Notion</Heading>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          {!isPublished && (
+            <AlertInfo mb="4">You need to publish your bot first.</AlertInfo>
+          )}
+          <OrderedList spacing={4}>
+            <ListItem>
+              Insert a <Code>WebView</Code> element
+            </ListItem>
+            <ListItem>
+              <Stack>
+                <Text>
+                  As the <Code>Webview URL</Code>, paste your typebot URL
+                </Text>
+                <InputGroup size="sm">
+                  <Input
+                    type={'text'}
+                    defaultValue={`${
+                      env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
+                    }/${publicId}`}
+                  />
+                  <InputRightElement width="60px">
+                    <CopyButton
+                      size="sm"
+                      textToCopy={`${
+                        env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
+                      }/${publicId}`}
+                    />
+                  </InputRightElement>
+                </InputGroup>
+              </Stack>
+            </ListItem>
+          </OrderedList>
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}