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

2022-02-10 08:08:58 +01:00
parent c66827b606
commit 276f1c1e90
23 changed files with 1166 additions and 304 deletions
--- a/apps/builder/components/share/integrations/EmbedButton.tsx
+++ b/apps/builder/components/share/integrations/EmbedButton.tsx
@ -21,6 +21,7 @@ import {
  ReactModal,
  NotionModal,
  IframeModal,
+  WixModal,
 } from './modals'

 export type ModalProps = {
@ -82,7 +83,7 @@ export const integrationsList = [
    <EmbedButton
      logo={<WixLogo height={100} width="90px" />}
      label="Wix"
-      Modal={WebflowModal}
+      Modal={WixModal}
      {...props}
    />
  ),
@ -128,7 +129,7 @@ export const integrationsList = [
  ),
  (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
    <EmbedButton
-      logo={<IframeLogo height={100} width={80} />}
+      logo={<IframeLogo height={100} width="70px" />}
      label="Iframe"
      Modal={IframeModal}
      {...props}
@ -136,7 +137,7 @@ export const integrationsList = [
  ),
  (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
    <EmbedButton
-      logo={<OtherLogo height={100} width={80} />}
+      logo={<OtherLogo height={100} width="70px" />}
      label="Other"
      Modal={JavascriptModal}
      {...props}
--- a/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
@ -1,14 +1,27 @@
 import { OrderedList, ListItem, Tag } from '@chakra-ui/react'
+import { ChatEmbedCode } from 'components/share/codeSnippets/Chat/EmbedCode'
+import { ChatEmbedSettings } from 'components/share/codeSnippets/Chat/EmbedSettings'
+import { StandardEmbedWindowSettings } from 'components/share/codeSnippets/Container/EmbedSettings'
+import {
+  parseInitContainerCode,
+  typebotJsHtml,
+} from 'components/share/codeSnippets/params'
+import { PopupEmbedCode } from 'components/share/codeSnippets/Popup/EmbedCode'
+import { PopupEmbedSettings } from 'components/share/codeSnippets/Popup/EmbedSettings'
+import { CodeEditor } from 'components/shared/CodeEditor'
 import { useState } from 'react'
+import { BubbleParams } from 'typebot-js'
+import { ModalProps } from '../../EmbedButton'

 type GtmInstructionsProps = {
  type: 'standard' | 'popup' | 'bubble'
+  publicId: string
 }

-export const GtmInstructions = ({ type }: GtmInstructionsProps) => {
+export const GtmInstructions = ({ type, publicId }: GtmInstructionsProps) => {
  switch (type) {
    case 'standard': {
-      return <StandardInstructions />
+      return <StandardInstructions publicId={publicId} />
    }
    case 'popup': {
      return <PopupInstructions />
@ -19,23 +32,21 @@ export const GtmInstructions = ({ type }: GtmInstructionsProps) => {
  }
 }

-const StandardInstructions = () => {
-  // const [windowSizes, setWindowSizes] = useState({
-  //   height: '100%',
-  //   width: '100%',
-  // })
+const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {
+  const [windowSizes, setWindowSizes] = useState({
+    height: '100%',
+    width: '100%',
+  })

-  // const jsCode = parseInitContainerCode({
-  //   publishId: chatbot?.publishId ?? '',
-  //   backgroundColor: chatbot?.themeColors.chatbotBackground.value,
-  //   customDomain: chatbot?.customDomains[0],
-  // })
-  // const headCode = `${typebotJsHtml}
-  // <script>
-  //   ${jsCode}
-  // </script>`
+  const jsCode = parseInitContainerCode({
+    publishId: publicId,
+  })
+  const headCode = `${typebotJsHtml}
+  <script>
+    ${jsCode}
+  </script>`

-  // const elementCode = `<div id="typebot-container" style="background-color: ${backgroundColor}; height: ${windowSizes.height}; width: ${windowSizes.width}"></div>`
+  const elementCode = `<div id="typebot-container" style="height: ${windowSizes.height}; width: ${windowSizes.width}"></div>`
  return (
    <OrderedList spacing={2} mb={4}>
      <ListItem>
@ -46,16 +57,12 @@ const StandardInstructions = () => {
      </ListItem>
      <ListItem>
        Paste the code below:
-        {/* <CodeEditor
-          code={headCode}
-          mt={2}
-          onCopied={() => sendGtmCopyEvent('standard')}
-        /> */}
+        <CodeEditor value={headCode} mt={2} isReadOnly lang="html" />
      </ListItem>
      <ListItem>
        On your webpage, you need to have an element on which the typebot will
        go. It needs to have the id <Tag>typebot-container</Tag>:
-        {/* <StandardEmbedWindowSettings
+        <StandardEmbedWindowSettings
          my={4}
          onUpdateWindowSettings={(sizes) =>
            setWindowSizes({
@ -64,14 +71,14 @@ const StandardInstructions = () => {
            })
          }
        />
-        <CodeBlock code={elementCode} mt={2} /> */}
+        <CodeEditor value={elementCode} mt={2} isReadOnly lang="html" />
      </ListItem>
    </OrderedList>
  )
 }

 const PopupInstructions = () => {
-  // const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState(0)

  return (
    <OrderedList spacing={2} mb={4}>
@ -83,29 +90,26 @@ const PopupInstructions = () => {
      </ListItem>
      <ListItem>
        Paste the code below:
-        {/* <PopupEmbedSettings
-          mb={4}
+        <PopupEmbedSettings
+          my={4}
          onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
        />
-        <PopupEmbedCode
-          delay={inputValue}
-          onCopied={() => sendGtmCopyEvent('popup')}
-        /> */}
+        <PopupEmbedCode delay={inputValue} />
      </ListItem>
    </OrderedList>
  )
 }

 const BubbleInstructions = () => {
-  // const [inputValues, setInputValues] = useState<
-  //   Pick<BubbleParams, 'proactiveMessage' | 'button'>
-  // >({
-  //   proactiveMessage: undefined,
-  //   button: {
-  //     color: '',
-  //     iconUrl: '',
-  //   },
-  // })
+  const [inputValues, setInputValues] = useState<
+    Pick<BubbleParams, 'proactiveMessage' | 'button'>
+  >({
+    proactiveMessage: undefined,
+    button: {
+      color: '',
+      iconUrl: '',
+    },
+  })

  return (
    <OrderedList spacing={2} mb={4}>
@ -117,14 +121,10 @@ const BubbleInstructions = () => {
      </ListItem>
      <ListItem>
        Paste the code below:
-        {/* <ChatEmbedSettings
+        <ChatEmbedSettings
          onUpdateSettings={(settings) => setInputValues({ ...settings })}
        />
-        <ChatEmbedCode
-          mt={4}
-          {...inputValues}
-          onCopied={() => sendGtmCopyEvent('bubble')}
-        /> */}
+        <ChatEmbedCode my={4} {...inputValues} />
      </ListItem>
    </OrderedList>
  )
--- a/apps/builder/components/share/integrations/modals/GtmModal/index.tsx
+++ b/apps/builder/components/share/integrations/modals/GtmModal/index.tsx
@ -18,7 +18,12 @@ import { capitalize } from 'utils'
 import { PublishFirstInfo } from 'components/shared/Info'
 import { GtmInstructions } from './GtmInstructions'

-export const GtmModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
+export const GtmModal = ({
+  isOpen,
+  onClose,
+  isPublished,
+  publicId,
+}: ModalProps) => {
  const [chosenEmbedType, setChosenEmbedType] = useState<
    'standard' | 'popup' | 'bubble' | undefined
  >()
@ -53,7 +58,7 @@ export const GtmModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
          {!chosenEmbedType ? (
            <ChooseEmbedTypeList onSelectEmbedType={setChosenEmbedType} />
          ) : (
-            <GtmInstructions type={chosenEmbedType} />
+            <GtmInstructions type={chosenEmbedType} publicId={publicId} />
          )}
        </ModalBody>
        <ModalFooter />
--- a/apps/builder/components/share/integrations/modals/IframeModal.tsx
+++ b/apps/builder/components/share/integrations/modals/IframeModal.tsx
@ -9,16 +9,13 @@ import {
  ModalFooter,
  Text,
 } from '@chakra-ui/react'
+import { StandardEmbedWindowSettings } from 'components/share/codeSnippets/Container/EmbedSettings'
+import { IframeEmbedCode } from 'components/share/codeSnippets/Iframe/EmbedCode'
 import { PublishFirstInfo } from 'components/shared/Info'
 import { useState } from 'react'
 import { ModalProps } from '../EmbedButton'

-export const IframeModal = ({
-  isPublished,
-  publicId,
-  isOpen,
-  onClose,
-}: ModalProps) => {
+export const IframeModal = ({ isPublished, isOpen, onClose }: ModalProps) => {
  const [inputValues, setInputValues] = useState({
    heightLabel: '100%',
    widthLabel: '100%',
@ -33,6 +30,12 @@ export const IframeModal = ({
        <ModalBody as={Stack} spacing={4}>
          {!isPublished && <PublishFirstInfo />}
          <Text>Paste this anywhere in your HTML code:</Text>
+          <StandardEmbedWindowSettings
+            onUpdateWindowSettings={(settings) =>
+              setInputValues({ ...settings })
+            }
+          />
+          <IframeEmbedCode {...inputValues} />
        </ModalBody>
        <ModalFooter />
      </ModalContent>
--- a/apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx
@ -1,4 +1,12 @@
 import { Stack, Tag, Text } from '@chakra-ui/react'
+import { ChatEmbedCode } from 'components/share/codeSnippets/Chat/EmbedCode'
+import { ChatEmbedSettings } from 'components/share/codeSnippets/Chat/EmbedSettings'
+import { ContainerEmbedCode } from 'components/share/codeSnippets/Container/EmbedCode'
+import { StandardEmbedWindowSettings } from 'components/share/codeSnippets/Container/EmbedSettings'
+import { PopupEmbedCode } from 'components/share/codeSnippets/Popup/EmbedCode'
+import { PopupEmbedSettings } from 'components/share/codeSnippets/Popup/EmbedSettings'
+import { useState } from 'react'
+import { BubbleParams } from 'typebot-js'

 type JavascriptInstructionsProps = {
  type: 'standard' | 'popup' | 'bubble'
@ -21,75 +29,61 @@ export const JavascriptInstructions = ({
 }

 const StandardInstructions = () => {
-  // const [inputValues, setInputValues] = useState({
-  //   heightLabel: '100%',
-  //   widthLabel: '100%',
-  // })
+  const [inputValues, setInputValues] = useState({
+    heightLabel: '100%',
+    widthLabel: '100%',
+  })

  return (
-    <Stack>
+    <Stack spacing={4}>
      <Text>
        Paste this anywhere in the <Tag>body</Tag>
      </Text>
-      {/* <StandardEmbedWindowSettings
+      <StandardEmbedWindowSettings
        onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
      />
-      <ContainerEmbedCode
-        withStarterVariables={true}
-        {...inputValues}
-        mt={4}
-        onCopied={() => sendJsCopyEvent('standard')}
-      /> */}
+      <ContainerEmbedCode withStarterVariables={true} {...inputValues} mt={4} />
    </Stack>
  )
 }

 const PopupInstructions = () => {
-  // const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState(0)

  return (
-    <Stack>
+    <Stack spacing={4}>
      <Text>
        Paste this anywhere in the <Tag>body</Tag>
      </Text>
-      {/* <StandardEmbedWindowSettings
-        onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
+      <PopupEmbedSettings
+        mb={4}
+        onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
      />
-      <ContainerEmbedCode
-        withStarterVariables={true}
-        {...inputValues}
-        mt={4}
-        onCopied={() => sendJsCopyEvent('standard')}
-      /> */}
+      <PopupEmbedCode delay={inputValue} />
    </Stack>
  )
 }

 const BubbleInstructions = () => {
-  // const [inputValues, setInputValues] = useState<
-  //   Pick<BubbleParams, 'proactiveMessage' | 'button'>
-  // >({
-  //   proactiveMessage: undefined,
-  //   button: {
-  //     color: '',
-  //     iconUrl: '',
-  //   },
-  // })
+  const [inputValues, setInputValues] = useState<
+    Pick<BubbleParams, 'proactiveMessage' | 'button'>
+  >({
+    proactiveMessage: undefined,
+    button: {
+      color: '',
+      iconUrl: '',
+    },
+  })

  return (
-    <Stack>
+    <Stack spacing={4}>
      <Text>
        Paste this anywhere in the <Tag>body</Tag>
      </Text>
-      {/* <StandardEmbedWindowSettings
-        onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
+      <ChatEmbedSettings
+        onUpdateSettings={(settings) => setInputValues({ ...settings })}
      />
-      <ContainerEmbedCode
-        withStarterVariables={true}
-        {...inputValues}
-        mt={4}
-        onCopied={() => sendJsCopyEvent('standard')}
-      /> */}
+      <ChatEmbedCode {...inputValues} />
    </Stack>
  )
 }
--- a/apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx
@ -1,5 +1,15 @@
 import { Stack, Text } from '@chakra-ui/react'
+import { ChatEmbedSettings } from 'components/share/codeSnippets/Chat/EmbedSettings'
+import { StandardEmbedWindowSettings } from 'components/share/codeSnippets/Container/EmbedSettings'
+import { PopupEmbedSettings } from 'components/share/codeSnippets/Popup/EmbedSettings'
+import {
+  ChatReactCode,
+  PopupReactCode,
+  StandardReactDiv,
+} from 'components/share/codeSnippets/ReactCode'
 import { CodeEditor } from 'components/shared/CodeEditor'
+import { useState } from 'react'
+import { BubbleParams } from 'typebot-js'

 type Props = {
  type: 'standard' | 'popup' | 'bubble'
@ -20,58 +30,57 @@ export const ReactInstructions = ({ type }: Props) => {
 }

 const StandardInstructions = () => {
-  // const [inputValues, setInputValues] = useState({
-  //   heightLabel: '100%',
-  //   widthLabel: '100%',
-  // })
+  const [inputValues, setInputValues] = useState({
+    heightLabel: '100%',
+    widthLabel: '100%',
+  })

  return (
    <Stack spacing={4}>
-      {/* <InstallPackageInstruction /> */}
-      {/* <StandardEmbedWindowSettings
+      <InstallPackageInstruction />
+      <StandardEmbedWindowSettings
        onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
-      /> */}
-      {/* <Text>{t('insert-the-typebot-container')}</Text>
-      <StandardReactDiv {...inputValues} /> */}
+      />
+      <Text>Insert the typebot container</Text>
+      <StandardReactDiv {...inputValues} />
    </Stack>
  )
 }

 const PopupInstructions = () => {
-  // const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState(0)

  return (
    <Stack spacing={4}>
-      {/* <InstallPackageInstruction />
+      <InstallPackageInstruction />
      <PopupEmbedSettings
        onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
      />
-      <Text>{t('initialize-the-typebot')}</Text>
-      <PopupReactCode withStarterVariables={true} delay={inputValue} /> */}
+      <Text>Initialize the typebot</Text>
+      <PopupReactCode withStarterVariables={true} delay={inputValue} />
    </Stack>
  )
 }

 const BubbleInstructions = () => {
-  // const { t } = useTranslation()
-  // const [inputValues, setInputValues] = useState<
-  //   Pick<BubbleParams, 'proactiveMessage' | 'button'>
-  // >({
-  //   proactiveMessage: undefined,
-  //   button: {
-  //     color: '',
-  //     iconUrl: '',
-  //   },
-  // })
+  const [inputValues, setInputValues] = useState<
+    Pick<BubbleParams, 'proactiveMessage' | 'button'>
+  >({
+    proactiveMessage: undefined,
+    button: {
+      color: '',
+      iconUrl: '',
+    },
+  })

  return (
    <Stack spacing={4}>
-      {/* <InstallPackageInstruction />
+      <InstallPackageInstruction />
      <ChatEmbedSettings
        onUpdateSettings={(settings) => setInputValues({ ...settings })}
      />
-      <Text>{t('initialize-the-typebot')}</Text>
-      <ChatReactCode withStarterVariables={true} {...inputValues} mt={4} /> */}
+      <Text>Initialize the typebot</Text>
+      <ChatReactCode withStarterVariables={true} {...inputValues} mt={4} />
    </Stack>
  )
 }
--- a/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
@ -1,13 +1,32 @@
 import { OrderedList, ListItem, Tag } from '@chakra-ui/react'
+import { ChatEmbedCode } from 'components/share/codeSnippets/Chat/EmbedCode'
+import { ChatEmbedSettings } from 'components/share/codeSnippets/Chat/EmbedSettings'
+import { StandardEmbedWindowSettings } from 'components/share/codeSnippets/Container/EmbedSettings'
+import {
+  parseInitContainerCode,
+  typebotJsHtml,
+} from 'components/share/codeSnippets/params'
+import { PopupEmbedCode } from 'components/share/codeSnippets/Popup/EmbedCode'
+import { PopupEmbedSettings } from 'components/share/codeSnippets/Popup/EmbedSettings'
+import { CodeEditor } from 'components/shared/CodeEditor'
+import { useState } from 'react'
+import { BubbleParams } from 'typebot-js'
+import { ModalProps } from '../../EmbedButton'
+import parserHtml from 'prettier/parser-html'
+import prettier from 'prettier/standalone'

 type ShopifyInstructionsProps = {
  type: 'standard' | 'popup' | 'bubble'
+  publicId: string
 }

-export const ShopifyInstructions = ({ type }: ShopifyInstructionsProps) => {
+export const ShopifyInstructions = ({
+  type,
+  publicId,
+}: ShopifyInstructionsProps) => {
  switch (type) {
    case 'standard': {
-      return <StandardInstructions />
+      return <StandardInstructions publicId={publicId} />
    }
    case 'popup': {
      return <PopupInstructions />
@ -18,24 +37,30 @@ export const ShopifyInstructions = ({ type }: ShopifyInstructionsProps) => {
  }
 }

-const StandardInstructions = () => {
-  // const backgroundColor = chatbot?.themeColors.siteBackground.value
-  // const [windowSizes, setWindowSizes] = useState({
-  //   height: '100%',
-  //   width: '100%',
-  // })
+const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {
+  const [windowSizes, setWindowSizes] = useState({
+    height: '100%',
+    width: '100%',
+  })

-  // const jsCode = parseInitContainerCode({
-  //   publishId: chatbot?.publishId ?? '',
-  //   customDomain: chatbot?.customDomains[0],
-  //   backgroundColor: chatbot?.themeColors.chatbotBackground.value,
-  // })
-  // const headCode = `${typebotJsHtml}
-  // <script>
-  //   ${jsCode}
-  // </script>`
+  const jsCode = parseInitContainerCode({
+    publishId: publicId,
+  })
+  const headCode = prettier.format(
+    `${typebotJsHtml}<script>${jsCode}</script>`,
+    {
+      parser: 'html',
+      plugins: [parserHtml],
+    }
+  )

-  // const elementCode = `<div id="typebot-container" style="background-color: ${backgroundColor}; height: ${windowSizes.height}; width: ${windowSizes.width}"></div>`
+  const elementCode = prettier.format(
+    `<div id="typebot-container" style="height: ${windowSizes.height}; width: ${windowSizes.width}"></div>`,
+    {
+      parser: 'html',
+      plugins: [parserHtml],
+    }
+  )

  return (
    <OrderedList spacing={2} mb={4}>
@ -46,17 +71,13 @@ const StandardInstructions = () => {
      <ListItem>
        In <Tag>Layout {'>'} theme.liquid</Tag> file, paste this code just
        before the closing <Tag>head</Tag> tag:
-        {/* <CodeBlock
-          code={headCode}
-          mt={2}
-          onCopied={() => sendShopifyCopyEvent('standard')}
-        /> */}
+        <CodeEditor value={headCode} mt={2} lang="html" isReadOnly />
      </ListItem>
      <ListItem>
        Then, you can place an element on which the typebot will go in any file
        in the <Tag>body</Tag> tags. It needs to have the id{' '}
        <Tag>typebot-container</Tag>:
-        {/* <StandardEmbedWindowSettings
+        <StandardEmbedWindowSettings
          my={4}
          onUpdateWindowSettings={(sizes) =>
            setWindowSizes({
@ -65,14 +86,14 @@ const StandardInstructions = () => {
            })
          }
        />
-        <CodeBlock code={elementCode} mt={2} /> */}
+        <CodeEditor value={elementCode} mt={2} lang="html" isReadOnly />
      </ListItem>
    </OrderedList>
  )
 }

 const PopupInstructions = () => {
-  // const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState(0)

  return (
    <OrderedList spacing={2} mb={4}>
@ -83,29 +104,26 @@ const PopupInstructions = () => {
      <ListItem>
        In <Tag>Layout {'>'} theme.liquid</Tag> file, paste this code just
        before the closing <Tag>head</Tag> tag:
-        {/* <PopupEmbedSettings
-            mb={4}
-            onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
-          />
-          <PopupEmbedCode
-            delay={inputValue}
-            onCopied={() => sendShopifyCopyEvent('popup')}
-          /> */}
+        <PopupEmbedSettings
+          my="4"
+          onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+        />
+        <PopupEmbedCode delay={inputValue} />
      </ListItem>
    </OrderedList>
  )
 }

 const BubbleInstructions = () => {
-  // const [inputValues, setInputValues] = useState<
-  //   Pick<BubbleParams, 'proactiveMessage' | 'button'>
-  // >({
-  //   proactiveMessage: undefined,
-  //   button: {
-  //     color: '',
-  //     iconUrl: '',
-  //   },
-  // })
+  const [inputValues, setInputValues] = useState<
+    Pick<BubbleParams, 'proactiveMessage' | 'button'>
+  >({
+    proactiveMessage: undefined,
+    button: {
+      color: '',
+      iconUrl: '',
+    },
+  })

  return (
    <OrderedList spacing={2} mb={4}>
@ -116,14 +134,11 @@ const BubbleInstructions = () => {
      <ListItem>
        In <Tag>Layout {'>'} theme.liquid</Tag> file, paste this code just
        before the closing <Tag>head</Tag> tag:
-        {/* <ChatEmbedSettings
-        onUpdateSettings={(settings) => setInputValues({ ...settings })}
-      />
-      <ChatEmbedCode
-        mt={4}
-        {...inputValues}
-        onCopied={() => sendShopifyCopyEvent('bubble')}
-      /> */}
+        <ChatEmbedSettings
+          my="4"
+          onUpdateSettings={(settings) => setInputValues({ ...settings })}
+        />
+        <ChatEmbedCode mt={4} {...inputValues} />
      </ListItem>
    </OrderedList>
  )
--- a/apps/builder/components/share/integrations/modals/ShopifyModal/index.tsx
+++ b/apps/builder/components/share/integrations/modals/ShopifyModal/index.tsx
@ -18,7 +18,12 @@ import { capitalize } from 'utils'
 import { PublishFirstInfo } from 'components/shared/Info'
 import { ShopifyInstructions } from './ShopifyInstructions'

-export const ShopifyModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
+export const ShopifyModal = ({
+  isOpen,
+  onClose,
+  isPublished,
+  publicId,
+}: ModalProps) => {
  const [chosenEmbedType, setChosenEmbedType] = useState<
    'standard' | 'popup' | 'bubble' | undefined
  >()
@ -53,7 +58,7 @@ export const ShopifyModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
          {!chosenEmbedType ? (
            <ChooseEmbedTypeList onSelectEmbedType={setChosenEmbedType} />
          ) : (
-            <ShopifyInstructions type={chosenEmbedType} />
+            <ShopifyInstructions type={chosenEmbedType} publicId={publicId} />
          )}
        </ModalBody>
        <ModalFooter />
--- a/apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx
@ -1,4 +1,11 @@
 import { OrderedList, ListItem, Tag, Text, Stack } from '@chakra-ui/react'
+import { ChatEmbedCode } from 'components/share/codeSnippets/Chat/EmbedCode'
+import { ChatEmbedSettings } from 'components/share/codeSnippets/Chat/EmbedSettings'
+import { ContainerEmbedCode } from 'components/share/codeSnippets/Container/EmbedCode'
+import { PopupEmbedCode } from 'components/share/codeSnippets/Popup/EmbedCode'
+import { PopupEmbedSettings } from 'components/share/codeSnippets/Popup/EmbedSettings'
+import { useState } from 'react'
+import { BubbleParams } from 'typebot-js'

 type WebflowInstructionsProps = {
  type: 'standard' | 'popup' | 'bubble'
@ -21,8 +28,22 @@ export const WebflowInstructions = ({ type }: WebflowInstructionsProps) => {
 }

 const StandardInstructions = () => (
-  <Stack>
-    <Text>In the Webflow editor:</Text>
+  <OrderedList spacing={2} mb={4}>
+    <ListItem>
+      Press <Tag>A</Tag> to open the <Tag>Add elements</Tag> panel
+    </ListItem>
+    <ListItem>
+      Add an <Tag>embed</Tag> element from the <Tag>components</Tag>
+      section and paste this code:
+      <ContainerEmbedCode widthLabel="100%" heightLabel="100%" my={4} />
+    </ListItem>
+  </OrderedList>
+)
+
+const PopupInstructions = () => {
+  const [inputValue, setInputValue] = useState(0)
+
+  return (
    <OrderedList spacing={2} mb={4}>
      <ListItem>
        Press <Tag>A</Tag> to open the <Tag>Add elements</Tag> panel
@ -30,78 +51,41 @@ const StandardInstructions = () => (
      <ListItem>
        Add an <Tag>embed</Tag> element from the <Tag>components</Tag>
        section and paste this code:
-        {/* <ContainerEmbedCode
-          widthLabel="100%"
-          heightLabel="100%"
-          mt={4}
-          onCopied={() => sendWebflowCopyEvent('standard')}
-        /> */}
+        <PopupEmbedSettings
+          onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+          my={4}
+        />
+        <PopupEmbedCode delay={inputValue} mt={4} />
      </ListItem>
    </OrderedList>
-  </Stack>
-)
-
-const PopupInstructions = () => {
-  // const [inputValue, setInputValue] = useState(0)
-
-  return (
-    <Stack>
-      <Text>In the Webflow editor</Text>
-      <OrderedList spacing={2} mb={4}>
-        <ListItem>
-          Press <Tag>A</Tag> to open the <Tag>Add elements</Tag> panel
-        </ListItem>
-        <ListItem>
-          Add an <Tag>embed</Tag> element from the <Tag>components</Tag>
-          section and paste this code:
-          {/* <PopupEmbedSettings
-            onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
-            mt={4}
-          />
-          <PopupEmbedCode
-            delay={inputValue}
-            mt={4}
-            onCopied={() => sendWebflowCopyEvent('popup')}
-          /> */}
-        </ListItem>
-      </OrderedList>
-    </Stack>
  )
 }

 const BubbleInstructions = () => {
-  // const [inputValues, setInputValues] = useState<
-  //   Pick<BubbleParams, 'proactiveMessage' | 'button'>
-  // >({
-  //   proactiveMessage: undefined,
-  //   button: {
-  //     color: '',
-  //     iconUrl: '',
-  //   },
-  // })
+  const [inputValues, setInputValues] = useState<
+    Pick<BubbleParams, 'proactiveMessage' | 'button'>
+  >({
+    proactiveMessage: undefined,
+    button: {
+      color: '',
+      iconUrl: '',
+    },
+  })

  return (
-    <Stack>
-      <Text>In the Webflow editor</Text>
-      <OrderedList spacing={2} mb={4}>
-        <ListItem>
-          Press <Tag>A</Tag> to open the <Tag>Add elements</Tag> panel
-        </ListItem>
-        <ListItem>
-          Add an <Tag>embed</Tag> element from the <Tag>components</Tag>
-          section and paste this code:
-          {/* <ChatEmbedSettings
-            onUpdateSettings={(settings) => setInputValues({ ...settings })}
-            mt={4}
-          />
-          <ChatEmbedCode
-            withStarterVariables={true}
-            {...inputValues}
-            mt={4}
-            onCopied={() => sendWebflowCopyEvent('bubble')}
-          /> */}
-        </ListItem>
-      </OrderedList>
-    </Stack>
+    <OrderedList spacing={2} mb={4}>
+      <ListItem>
+        Press <Tag>A</Tag> to open the <Tag>Add elements</Tag> panel
+      </ListItem>
+      <ListItem>
+        Add an <Tag>embed</Tag> element from the <Tag>components</Tag>
+        section and paste this code:
+        <ChatEmbedSettings
+          onUpdateSettings={(settings) => setInputValues({ ...settings })}
+          my={4}
+        />
+        <ChatEmbedCode withStarterVariables={true} {...inputValues} my={4} />
+      </ListItem>
+    </OrderedList>
  )
 }
--- a/apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx
@ -1,5 +1,11 @@
 import { ListItem, OrderedList, Tag } from '@chakra-ui/react'
+import { ChatEmbedCode } from 'components/share/codeSnippets/Chat/EmbedCode'
+import { ChatEmbedSettings } from 'components/share/codeSnippets/Chat/EmbedSettings'
+import { ContainerEmbedCode } from 'components/share/codeSnippets/Container/EmbedCode'
+import { PopupEmbedCode } from 'components/share/codeSnippets/Popup/EmbedCode'
+import { PopupEmbedSettings } from 'components/share/codeSnippets/Popup/EmbedSettings'
 import { useState } from 'react'
+import { BubbleParams } from 'typebot-js'

 type WixInstructionsProps = {
  type: 'standard' | 'popup' | 'bubble'
@ -21,24 +27,23 @@ export const WixInstructions = ({ type }: WixInstructionsProps) => {

 const StandardInstructions = () => {
  return (
-    <>
-      <OrderedList spacing={2} mb={4}>
-        <ListItem>
-          In the Wix Website Editor:
-          <Tag>
-            Add {'>'} Embed {'>'} Embed a Widget
-          </Tag>
-        </ListItem>
-        <ListItem>
-          Click on <Tag>Enter code</Tag> and paste this code:
-        </ListItem>
-      </OrderedList>
-    </>
+    <OrderedList spacing={2} mb={4}>
+      <ListItem>
+        In the Wix Website Editor:
+        <Tag>
+          Add {'>'} Embed {'>'} Embed a Widget
+        </Tag>
+      </ListItem>
+      <ListItem>
+        Click on <Tag>Enter code</Tag> and paste this code:
+      </ListItem>
+      <ContainerEmbedCode widthLabel="100%" heightLabel="100%" />
+    </OrderedList>
  )
 }

 const PopupInstructions = () => {
-  // const [inputValue, setInputValue] = useState(0)
+  const [inputValue, setInputValue] = useState(0)

  return (
    <>
@ -52,45 +57,49 @@ const PopupInstructions = () => {
        <ListItem>
          Click <Tag>+ Add Custom Code</Tag> at the top right.
        </ListItem>
-        <ListItem>Paste this snippet in the code box:</ListItem>
+        <ListItem>
+          Paste this snippet in the code box:
+          <PopupEmbedSettings
+            onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
+            my={4}
+          />
+          <PopupEmbedCode delay={inputValue} />
+        </ListItem>
      </OrderedList>
    </>
  )
 }

 const BubbleInstructions = () => {
-  // const [inputValues, setInputValues] = useState<
-  //   Pick<BubbleParams, 'proactiveMessage' | 'button'>
-  // >({
-  //   proactiveMessage: undefined,
-  //   button: {
-  //     color: '',
-  //     iconUrl: '',
-  //   },
-  // })
+  const [inputValues, setInputValues] = useState<
+    Pick<BubbleParams, 'proactiveMessage' | 'button'>
+  >({
+    proactiveMessage: undefined,
+    button: {
+      color: '',
+      iconUrl: '',
+    },
+  })

  return (
-    <>
-      <OrderedList spacing={2} mb={4}>
-        <ListItem>
-          Go to <Tag>Settings</Tag> in your dashboard on Wix
-        </ListItem>
-        <ListItem>
-          Click on <Tag>Custom Code</Tag> under <Tag>Advanced</Tag>
-        </ListItem>
-        <ListItem>
-          Click <Tag>+ Add Custom Code</Tag> at the top right.
-        </ListItem>
-        <ListItem>Paste this snippet in the code box:</ListItem>
-      </OrderedList>
-      {/* <ChatEmbedSettings
-        onUpdateSettings={(settings) => setInputValues({ ...settings })}
-      />
-      <ChatEmbedCode
-        mt={4}
-        {...inputValues}
-        onCopied={() => sendWixCopyEvent('bubble')}
-      /> */}
-    </>
+    <OrderedList spacing={2} mb={4}>
+      <ListItem>
+        Go to <Tag>Settings</Tag> in your dashboard on Wix
+      </ListItem>
+      <ListItem>
+        Click on <Tag>Custom Code</Tag> under <Tag>Advanced</Tag>
+      </ListItem>
+      <ListItem>
+        Click <Tag>+ Add Custom Code</Tag> at the top right.
+      </ListItem>
+      <ListItem>
+        Paste this snippet in the code box:{' '}
+        <ChatEmbedSettings
+          my="4"
+          onUpdateSettings={(settings) => setInputValues({ ...settings })}
+        />
+        <ChatEmbedCode {...inputValues} />
+      </ListItem>
+    </OrderedList>
  )
 }