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>`
+}