docs(share): 📝 Add code blocks in embed instructions

apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx

@@ -0,0 +1,34 @@
+import { FlexProps } from '@chakra-ui/layout'
+import { CodeEditor } from 'components/shared/CodeEditor'
+import { useTypebot } from 'contexts/TypebotContext'
+import parserHtml from 'prettier/parser-html'
+import prettier from 'prettier/standalone'
+import { PopupParams } from 'typebot-js'
+import { parseInitPopupCode, typebotJsHtml } from '../params'
+
+type PopupEmbedCodeProps = {
+  delay: number
+  withStarterVariables?: boolean
+  onCopied?: () => void
+}
+
+export const PopupEmbedCode = ({ delay }: PopupEmbedCodeProps & FlexProps) => {
+  const { typebot } = useTypebot()
+  const snippet = prettier.format(
+    createSnippet({
+      publishId: typebot?.publicId ?? '',
+      delay,
+    }),
+    {
+      parser: 'html',
+      plugins: [parserHtml],
+    }
+  )
+  return <CodeEditor value={snippet} lang="html" isReadOnly />
+}
+
+const createSnippet = (params: PopupParams): string => {
+  const jsCode = parseInitPopupCode(params)
+  return `${typebotJsHtml}
+  <script>${jsCode}</script>`
+}

apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx

@@ -0,0 +1,55 @@
+import {
+  StackProps,
+  Stack,
+  Flex,
+  Heading,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from '@chakra-ui/react'
+import { useState, useEffect } from 'react'
+import { PopupParams } from 'typebot-js'
+
+type PopupEmbedSettingsProps = {
+  onUpdateSettings: (windowSettings: Pick<PopupParams, 'delay'>) => void
+}
+export const PopupEmbedSettings = ({
+  onUpdateSettings,
+  ...props
+}: PopupEmbedSettingsProps & StackProps) => {
+  const [inputValue, setInputValue] = useState(0)
+
+  useEffect(() => {
+    onUpdateSettings({
+      delay: inputValue * 1000,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue])
+
+  return (
+    <Stack {...props}>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Heading fontSize="md" fontWeight="semibold">
+          Popup settings
+        </Heading>
+      </Flex>
+
+      <Flex justify="space-between" align="center" mb="2">
+        <p>Appearance delay</p>
+        <NumberInput
+          onChange={(_, val) => setInputValue(val)}
+          value={inputValue}
+          min={0}
+        >
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </Flex>
+    </Stack>
+  )
+}