docs(share): 📝 Add embed instructions

apps/builder/components/share/integrations/modals/WordpressModal.tsx

@@ -0,0 +1,66 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  Heading,
+  ModalCloseButton,
+  ModalBody,
+  OrderedList,
+  ListItem,
+  InputGroup,
+  Input,
+  InputRightElement,
+  ModalFooter,
+  Link,
+} from '@chakra-ui/react'
+import { ExternalLinkIcon } from 'assets/icons'
+import { CopyButton } from 'components/shared/buttons/CopyButton'
+import { PublishFirstInfo } from 'components/shared/Info'
+import { ModalProps } from '../EmbedButton'
+
+export const WordpressModal = ({
+  publicId,
+  isPublished,
+  isOpen,
+  onClose,
+}: ModalProps): JSX.Element => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Heading size="md">WordPress</Heading>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          {!isPublished && <PublishFirstInfo mb="2" />}
+          <OrderedList spacing={3}>
+            <ListItem>
+              Install{' '}
+              <Link
+                href="https://wordpress.org/plugins/typebot/"
+                isExternal
+                color="blue.500"
+              >
+                the official Typebot WordPress plugin
+                <ExternalLinkIcon mx="2px" />
+              </Link>
+            </ListItem>
+            <ListItem>
+              Copy your typebot ID
+              <InputGroup size="md" mt={2}>
+                <Input pr="4.5rem" type={'text'} defaultValue={publicId} />
+                <InputRightElement width="4.5rem">
+                  <CopyButton textToCopy={publicId} />
+                </InputRightElement>
+              </InputGroup>
+            </ListItem>
+            <ListItem>Complete the setup in your Wordpress interface</ListItem>
+          </OrderedList>
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}