docs(share): 📝 Add embed instructions
This commit is contained in:
Baptiste Arnaud
145
apps/builder/components/share/integrations/EmbedButton.tsx
Normal file
145
apps/builder/components/share/integrations/EmbedButton.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
import { Button, useDisclosure, VStack, WrapItem, Text } from '@chakra-ui/react'
|
||||
import {
|
||||
WordpressLogo,
|
||||
ShopifyLogo,
|
||||
WixLogo,
|
||||
GtmLogo,
|
||||
JavascriptLogo,
|
||||
ReactLogo,
|
||||
NotionLogo,
|
||||
WebflowLogo,
|
||||
IframeLogo,
|
||||
OtherLogo,
|
||||
} from 'assets/logos'
|
||||
import React from 'react'
|
||||
import {
|
||||
WordpressModal,
|
||||
ShopifyModal,
|
||||
WebflowModal,
|
||||
GtmModal,
|
||||
JavascriptModal,
|
||||
ReactModal,
|
||||
NotionModal,
|
||||
IframeModal,
|
||||
} from './modals'
|
||||
|
||||
export type ModalProps = {
|
||||
publicId: string
|
||||
isPublished: boolean
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
type EmbedButtonProps = Pick<ModalProps, 'publicId' | 'isPublished'> & {
|
||||
logo: JSX.Element
|
||||
label: string
|
||||
Modal: (props: ModalProps) => JSX.Element
|
||||
}
|
||||
|
||||
export const EmbedButton = ({
|
||||
logo,
|
||||
label,
|
||||
Modal,
|
||||
...modalProps
|
||||
}: EmbedButtonProps) => {
|
||||
const { isOpen, onOpen, onClose } = useDisclosure()
|
||||
return (
|
||||
<WrapItem
|
||||
as={Button}
|
||||
alignItems="center"
|
||||
variant="outline"
|
||||
style={{ width: '225px', height: '270px' }}
|
||||
onClick={onOpen}
|
||||
whiteSpace={'normal'}
|
||||
>
|
||||
<VStack>
|
||||
{logo}
|
||||
<Text>{label}</Text>
|
||||
</VStack>
|
||||
<Modal isOpen={isOpen} onClose={onClose} {...modalProps} />
|
||||
</WrapItem>
|
||||
)
|
||||
}
|
||||
|
||||
export const integrationsList = [
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<WordpressLogo height={100} width="70px" />}
|
||||
label="Wordpress"
|
||||
Modal={WordpressModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<ShopifyLogo height={100} width="65px" />}
|
||||
label="Shopify"
|
||||
Modal={ShopifyModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<WixLogo height={100} width="90px" />}
|
||||
label="Wix"
|
||||
Modal={WebflowModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<GtmLogo height={100} width="70px" />}
|
||||
label="Google Tag Manager"
|
||||
Modal={GtmModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<JavascriptLogo height={100} width="70px" />}
|
||||
label="HTML & Javascript"
|
||||
Modal={JavascriptModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<ReactLogo height={100} width="70px" />}
|
||||
label="React"
|
||||
Modal={ReactModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<NotionLogo height={100} width="60px" />}
|
||||
label="Notion"
|
||||
Modal={NotionModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<WebflowLogo height={100} width="70px" />}
|
||||
label="Webflow"
|
||||
Modal={WebflowModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<IframeLogo height={100} width={80} />}
|
||||
label="Iframe"
|
||||
Modal={IframeModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
(props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
|
||||
<EmbedButton
|
||||
logo={<OtherLogo height={100} width={80} />}
|
||||
label="Other"
|
||||
Modal={JavascriptModal}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
]
|
||||
@ -0,0 +1,155 @@
|
||||
import { HStack, Button, Text, Stack } from '@chakra-ui/react'
|
||||
|
||||
type ChooseEmbedTypeListProps = {
|
||||
onSelectEmbedType: (type: 'standard' | 'popup' | 'bubble') => void
|
||||
disabledTypes?: ('standard' | 'popup' | 'bubble')[]
|
||||
}
|
||||
|
||||
export const ChooseEmbedTypeList = ({
|
||||
onSelectEmbedType,
|
||||
disabledTypes = [],
|
||||
}: ChooseEmbedTypeListProps) => {
|
||||
return (
|
||||
<HStack mx="auto">
|
||||
<Stack
|
||||
as={Button}
|
||||
fontWeight="normal"
|
||||
alignItems="center"
|
||||
variant="outline"
|
||||
colorScheme="gray"
|
||||
style={{ width: '225px', height: '270px' }}
|
||||
onClick={() => onSelectEmbedType('standard')}
|
||||
whiteSpace={'normal'}
|
||||
spacing="6"
|
||||
isDisabled={disabledTypes.includes('standard')}
|
||||
>
|
||||
<StandardEmbedSvg />
|
||||
<Stack>
|
||||
<Text fontSize="lg" fontWeight="semibold">
|
||||
Standard
|
||||
</Text>
|
||||
<Text textColor="gray.500">Embed in a container on your site</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
as={Button}
|
||||
fontWeight="normal"
|
||||
alignItems="center"
|
||||
variant="outline"
|
||||
colorScheme="gray"
|
||||
style={{ width: '225px', height: '270px' }}
|
||||
onClick={() => onSelectEmbedType('popup')}
|
||||
whiteSpace={'normal'}
|
||||
spacing="6"
|
||||
isDisabled={disabledTypes.includes('popup')}
|
||||
>
|
||||
<PopupEmbedSvg />
|
||||
<Stack>
|
||||
<Text fontSize="lg" fontWeight="semibold">
|
||||
Popup
|
||||
</Text>
|
||||
<Text textColor="gray.500">
|
||||
Embed in a popup window on top of your website
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
as={Button}
|
||||
fontWeight="normal"
|
||||
alignItems="center"
|
||||
variant="outline"
|
||||
colorScheme="gray"
|
||||
style={{ width: '225px', height: '270px' }}
|
||||
onClick={() => onSelectEmbedType('bubble')}
|
||||
whiteSpace={'normal'}
|
||||
spacing="6"
|
||||
isDisabled={disabledTypes.includes('bubble')}
|
||||
>
|
||||
<BubbleEmbedSvg />
|
||||
<Stack>
|
||||
<Text fontSize="lg" fontWeight="semibold">
|
||||
Bubble
|
||||
</Text>
|
||||
<Text textColor="gray.500">
|
||||
Embed in a chat bubble on the corner of your site
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</HStack>
|
||||
)
|
||||
}
|
||||
|
||||
const StandardEmbedSvg = () => (
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="100" height="100" rx="5" fill="#0042DA" />
|
||||
<rect x="10" y="28" width="80" height="42" rx="6" fill="#FF8E20" />
|
||||
<circle cx="18" cy="37" r="5" fill="white" />
|
||||
<rect x="24" y="33" width="45" height="8" rx="4" fill="white" />
|
||||
<circle cx="18" cy="61" r="5" fill="white" />
|
||||
<rect x="24" y="57" width="45" height="8" rx="4" fill="white" />
|
||||
<rect x="31" y="45" width="45" height="8" rx="4" fill="white" />
|
||||
<circle cx="82" cy="49" r="5" fill="white" />
|
||||
<rect x="10" y="9" width="80" height="1" rx="0.5" fill="white" />
|
||||
<rect x="10" y="14" width="80" height="1" rx="0.5" fill="white" />
|
||||
<rect x="10" y="19" width="80" height="1" rx="0.5" fill="white" />
|
||||
<rect x="10" y="80" width="80" height="1" rx="0.5" fill="white" />
|
||||
<rect x="10" y="85" width="80" height="1" rx="0.5" fill="white" />
|
||||
<rect x="10" y="90" width="80" height="1" rx="0.5" fill="white" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const PopupEmbedSvg = () => (
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="100" height="100" rx="5" fill="#0042DA" />
|
||||
<rect x="19" y="20" width="63" height="63" rx="6" fill="#FF8E20" />
|
||||
<circle cx="25.7719" cy="33.7719" r="3.77193" fill="white" />
|
||||
<rect x="31" y="30" width="27" height="8" rx="4" fill="white" />
|
||||
<circle
|
||||
r="3.77193"
|
||||
transform="matrix(-1 0 0 1 75.2281 43.7719)"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
width="22"
|
||||
height="8"
|
||||
rx="4"
|
||||
transform="matrix(-1 0 0 1 70 40)"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="31.0527"
|
||||
y="52"
|
||||
width="26.9473"
|
||||
height="7.54386"
|
||||
rx="3.77193"
|
||||
fill="white"
|
||||
/>
|
||||
<circle cx="25.7719" cy="67.7719" r="3.77193" fill="white" />
|
||||
<rect x="31" y="64" width="27" height="8" rx="4" fill="white" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const BubbleEmbedSvg = () => (
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="100" height="100" rx="5" fill="#0042DA" />
|
||||
<circle cx="85.5" cy="85.5" r="7.5" fill="#FF8E20" />
|
||||
</svg>
|
||||
)
|
||||
@ -0,0 +1,131 @@
|
||||
import { OrderedList, ListItem, Tag } from '@chakra-ui/react'
|
||||
import { useState } from 'react'
|
||||
|
||||
type GtmInstructionsProps = {
|
||||
type: 'standard' | 'popup' | 'bubble'
|
||||
}
|
||||
|
||||
export const GtmInstructions = ({ type }: GtmInstructionsProps) => {
|
||||
switch (type) {
|
||||
case 'standard': {
|
||||
return <StandardInstructions />
|
||||
}
|
||||
case 'popup': {
|
||||
return <PopupInstructions />
|
||||
}
|
||||
case 'bubble': {
|
||||
return <BubbleInstructions />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const StandardInstructions = () => {
|
||||
// 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 elementCode = `<div id="typebot-container" style="background-color: ${backgroundColor}; height: ${windowSizes.height}; width: ${windowSizes.width}"></div>`
|
||||
return (
|
||||
<OrderedList spacing={2} mb={4}>
|
||||
<ListItem>
|
||||
On your GTM account dashboard, click on <Tag>Add a new tag</Tag>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Choose Custom <Tag>HTML tag</Tag> type
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Paste the code below:
|
||||
{/* <CodeEditor
|
||||
code={headCode}
|
||||
mt={2}
|
||||
onCopied={() => sendGtmCopyEvent('standard')}
|
||||
/> */}
|
||||
</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
|
||||
my={4}
|
||||
onUpdateWindowSettings={(sizes) =>
|
||||
setWindowSizes({
|
||||
height: sizes.heightLabel,
|
||||
width: sizes.widthLabel,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<CodeBlock code={elementCode} mt={2} /> */}
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
)
|
||||
}
|
||||
|
||||
const PopupInstructions = () => {
|
||||
// const [inputValue, setInputValue] = useState(0)
|
||||
|
||||
return (
|
||||
<OrderedList spacing={2} mb={4}>
|
||||
<ListItem>
|
||||
On your GTM account dashboard, click on <Tag>Add a new tag</Tag>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Choose Custom <Tag>HTML tag</Tag> type
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Paste the code below:
|
||||
{/* <PopupEmbedSettings
|
||||
mb={4}
|
||||
onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
|
||||
/>
|
||||
<PopupEmbedCode
|
||||
delay={inputValue}
|
||||
onCopied={() => sendGtmCopyEvent('popup')}
|
||||
/> */}
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
)
|
||||
}
|
||||
|
||||
const BubbleInstructions = () => {
|
||||
// const [inputValues, setInputValues] = useState<
|
||||
// Pick<BubbleParams, 'proactiveMessage' | 'button'>
|
||||
// >({
|
||||
// proactiveMessage: undefined,
|
||||
// button: {
|
||||
// color: '',
|
||||
// iconUrl: '',
|
||||
// },
|
||||
// })
|
||||
|
||||
return (
|
||||
<OrderedList spacing={2} mb={4}>
|
||||
<ListItem>
|
||||
On your GTM account dashboard, click on <Tag>Add a new tag</Tag>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Choose Custom <Tag>HTML tag</Tag> type
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Paste the code below:
|
||||
{/* <ChatEmbedSettings
|
||||
onUpdateSettings={(settings) => setInputValues({ ...settings })}
|
||||
/>
|
||||
<ChatEmbedCode
|
||||
mt={4}
|
||||
{...inputValues}
|
||||
onCopied={() => sendGtmCopyEvent('bubble')}
|
||||
/> */}
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
IconButton,
|
||||
Heading,
|
||||
HStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { ChevronLeftIcon } from 'assets/icons'
|
||||
import React, { useState } from 'react'
|
||||
import { ModalProps } from '../../EmbedButton'
|
||||
import { ChooseEmbedTypeList } from '../ChooseEmbedTypeList'
|
||||
import { capitalize } from 'utils'
|
||||
import { PublishFirstInfo } from 'components/shared/Info'
|
||||
import { GtmInstructions } from './GtmInstructions'
|
||||
|
||||
export const GtmModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
|
||||
const [chosenEmbedType, setChosenEmbedType] = useState<
|
||||
'standard' | 'popup' | 'bubble' | undefined
|
||||
>()
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={!chosenEmbedType ? '2xl' : 'xl'}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
<HStack>
|
||||
{chosenEmbedType && (
|
||||
<IconButton
|
||||
icon={<ChevronLeftIcon />}
|
||||
aria-label="back"
|
||||
variant="ghost"
|
||||
colorScheme="gray"
|
||||
mr={2}
|
||||
onClick={() => setChosenEmbedType(undefined)}
|
||||
/>
|
||||
)}
|
||||
<Heading size="md">
|
||||
Javascript {chosenEmbedType && `- ${capitalize(chosenEmbedType)}`}
|
||||
</Heading>
|
||||
</HStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{!isPublished && <PublishFirstInfo mb="2" />}
|
||||
{!chosenEmbedType ? (
|
||||
<ChooseEmbedTypeList onSelectEmbedType={setChosenEmbedType} />
|
||||
) : (
|
||||
<GtmInstructions type={chosenEmbedType} />
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
Stack,
|
||||
ModalFooter,
|
||||
Text,
|
||||
} from '@chakra-ui/react'
|
||||
import { PublishFirstInfo } from 'components/shared/Info'
|
||||
import { useState } from 'react'
|
||||
import { ModalProps } from '../EmbedButton'
|
||||
|
||||
export const IframeModal = ({
|
||||
isPublished,
|
||||
publicId,
|
||||
isOpen,
|
||||
onClose,
|
||||
}: ModalProps) => {
|
||||
const [inputValues, setInputValues] = useState({
|
||||
heightLabel: '100%',
|
||||
widthLabel: '100%',
|
||||
})
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} size={'xl'}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Iframe</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody as={Stack} spacing={4}>
|
||||
{!isPublished && <PublishFirstInfo />}
|
||||
<Text>Paste this anywhere in your HTML code:</Text>
|
||||
</ModalBody>
|
||||
<ModalFooter />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
import { Stack, Tag, Text } from '@chakra-ui/react'
|
||||
|
||||
type JavascriptInstructionsProps = {
|
||||
type: 'standard' | 'popup' | 'bubble'
|
||||
}
|
||||
|
||||
export const JavascriptInstructions = ({
|
||||
type,
|
||||
}: JavascriptInstructionsProps) => {
|
||||
switch (type) {
|
||||
case 'standard': {
|
||||
return <StandardInstructions />
|
||||
}
|
||||
case 'popup': {
|
||||
return <PopupInstructions />
|
||||
}
|
||||
case 'bubble': {
|
||||
return <BubbleInstructions />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const StandardInstructions = () => {
|
||||
// const [inputValues, setInputValues] = useState({
|
||||
// heightLabel: '100%',
|
||||
// widthLabel: '100%',
|
||||
// })
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text>
|
||||
Paste this anywhere in the <Tag>body</Tag>
|
||||
</Text>
|
||||
{/* <StandardEmbedWindowSettings
|
||||
onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
|
||||
/>
|
||||
<ContainerEmbedCode
|
||||
withStarterVariables={true}
|
||||
{...inputValues}
|
||||
mt={4}
|
||||
onCopied={() => sendJsCopyEvent('standard')}
|
||||
/> */}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
const PopupInstructions = () => {
|
||||
// const [inputValue, setInputValue] = useState(0)
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text>
|
||||
Paste this anywhere in the <Tag>body</Tag>
|
||||
</Text>
|
||||
{/* <StandardEmbedWindowSettings
|
||||
onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
|
||||
/>
|
||||
<ContainerEmbedCode
|
||||
withStarterVariables={true}
|
||||
{...inputValues}
|
||||
mt={4}
|
||||
onCopied={() => sendJsCopyEvent('standard')}
|
||||
/> */}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
const BubbleInstructions = () => {
|
||||
// const [inputValues, setInputValues] = useState<
|
||||
// Pick<BubbleParams, 'proactiveMessage' | 'button'>
|
||||
// >({
|
||||
// proactiveMessage: undefined,
|
||||
// button: {
|
||||
// color: '',
|
||||
// iconUrl: '',
|
||||
// },
|
||||
// })
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text>
|
||||
Paste this anywhere in the <Tag>body</Tag>
|
||||
</Text>
|
||||
{/* <StandardEmbedWindowSettings
|
||||
onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
|
||||
/>
|
||||
<ContainerEmbedCode
|
||||
withStarterVariables={true}
|
||||
{...inputValues}
|
||||
mt={4}
|
||||
onCopied={() => sendJsCopyEvent('standard')}
|
||||
/> */}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
IconButton,
|
||||
Heading,
|
||||
HStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { ChevronLeftIcon } from 'assets/icons'
|
||||
import React, { useState } from 'react'
|
||||
import { ModalProps } from '../../EmbedButton'
|
||||
import { ChooseEmbedTypeList } from '../ChooseEmbedTypeList'
|
||||
import { capitalize } from 'utils'
|
||||
import { PublishFirstInfo } from 'components/shared/Info'
|
||||
import { JavascriptInstructions } from './JavascriptInstructions'
|
||||
|
||||
export const JavascriptModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
isPublished,
|
||||
}: ModalProps) => {
|
||||
const [chosenEmbedType, setChosenEmbedType] = useState<
|
||||
'standard' | 'popup' | 'bubble' | undefined
|
||||
>()
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={!chosenEmbedType ? '2xl' : 'xl'}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
<HStack>
|
||||
{chosenEmbedType && (
|
||||
<IconButton
|
||||
icon={<ChevronLeftIcon />}
|
||||
aria-label="back"
|
||||
variant="ghost"
|
||||
colorScheme="gray"
|
||||
mr={2}
|
||||
onClick={() => setChosenEmbedType(undefined)}
|
||||
/>
|
||||
)}
|
||||
<Heading size="md">
|
||||
Javascript {chosenEmbedType && `- ${capitalize(chosenEmbedType)}`}
|
||||
</Heading>
|
||||
</HStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{!isPublished && <PublishFirstInfo mb="2" />}
|
||||
{!chosenEmbedType ? (
|
||||
<ChooseEmbedTypeList onSelectEmbedType={setChosenEmbedType} />
|
||||
) : (
|
||||
<JavascriptInstructions type={chosenEmbedType} />
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
Heading,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
OrderedList,
|
||||
ListItem,
|
||||
Tag,
|
||||
InputGroup,
|
||||
Input,
|
||||
InputRightElement,
|
||||
ModalFooter,
|
||||
} from '@chakra-ui/react'
|
||||
import { CopyButton } from 'components/shared/buttons/CopyButton'
|
||||
import { PublishFirstInfo } from 'components/shared/Info'
|
||||
import { ModalProps } from '../EmbedButton'
|
||||
|
||||
export const NotionModal = ({
|
||||
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 && <PublishFirstInfo />}
|
||||
<OrderedList spacing={3}>
|
||||
<ListItem>
|
||||
Type <Tag>/embed</Tag>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
Paste your typebot URL
|
||||
<InputGroup size="md" mt={2}>
|
||||
<Input
|
||||
pr="4.5rem"
|
||||
type={'text'}
|
||||
defaultValue={`https://bot.typebot.io/${publicId}`}
|
||||
/>
|
||||
<InputRightElement width="4.5rem">
|
||||
<CopyButton
|
||||
textToCopy={`https://bot.typebot.io/${publicId}`}
|
||||
/>
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
</ModalBody>
|
||||
<ModalFooter />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,86 @@
|
||||
import { Stack, Text } from '@chakra-ui/react'
|
||||
import { CodeEditor } from 'components/shared/CodeEditor'
|
||||
|
||||
type Props = {
|
||||
type: 'standard' | 'popup' | 'bubble'
|
||||
}
|
||||
|
||||
export const ReactInstructions = ({ type }: Props) => {
|
||||
switch (type) {
|
||||
case 'standard': {
|
||||
return <StandardInstructions />
|
||||
}
|
||||
case 'popup': {
|
||||
return <PopupInstructions />
|
||||
}
|
||||
case 'bubble': {
|
||||
return <BubbleInstructions />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const StandardInstructions = () => {
|
||||
// const [inputValues, setInputValues] = useState({
|
||||
// heightLabel: '100%',
|
||||
// widthLabel: '100%',
|
||||
// })
|
||||
|
||||
return (
|
||||
<Stack spacing={4}>
|
||||
{/* <InstallPackageInstruction /> */}
|
||||
{/* <StandardEmbedWindowSettings
|
||||
onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
|
||||
/> */}
|
||||
{/* <Text>{t('insert-the-typebot-container')}</Text>
|
||||
<StandardReactDiv {...inputValues} /> */}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
const PopupInstructions = () => {
|
||||
// const [inputValue, setInputValue] = useState(0)
|
||||
|
||||
return (
|
||||
<Stack spacing={4}>
|
||||
{/* <InstallPackageInstruction />
|
||||
<PopupEmbedSettings
|
||||
onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
|
||||
/>
|
||||
<Text>{t('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: '',
|
||||
// },
|
||||
// })
|
||||
|
||||
return (
|
||||
<Stack spacing={4}>
|
||||
{/* <InstallPackageInstruction />
|
||||
<ChatEmbedSettings
|
||||
onUpdateSettings={(settings) => setInputValues({ ...settings })}
|
||||
/>
|
||||
<Text>{t('initialize-the-typebot')}</Text>
|
||||
<ChatReactCode withStarterVariables={true} {...inputValues} mt={4} /> */}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
const InstallPackageInstruction = () => {
|
||||
return (
|
||||
<Stack>
|
||||
<Text>Install the package:</Text>
|
||||
<CodeEditor value={`npm install typebot-js`} isReadOnly />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
IconButton,
|
||||
Heading,
|
||||
HStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { ChevronLeftIcon } from 'assets/icons'
|
||||
import React, { useState } from 'react'
|
||||
import { ModalProps } from '../../EmbedButton'
|
||||
import { ChooseEmbedTypeList } from '../ChooseEmbedTypeList'
|
||||
import { capitalize } from 'utils'
|
||||
import { PublishFirstInfo } from 'components/shared/Info'
|
||||
import { ReactInstructions } from './ReactInstructions'
|
||||
|
||||
export const ReactModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
|
||||
const [chosenEmbedType, setChosenEmbedType] = useState<
|
||||
'standard' | 'popup' | 'bubble' | undefined
|
||||
>()
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={!chosenEmbedType ? '2xl' : 'xl'}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
<HStack>
|
||||
{chosenEmbedType && (
|
||||
<IconButton
|
||||
icon={<ChevronLeftIcon />}
|
||||
aria-label="back"
|
||||
variant="ghost"
|
||||
colorScheme="gray"
|
||||
mr={2}
|
||||
onClick={() => setChosenEmbedType(undefined)}
|
||||
/>
|
||||
)}
|
||||
<Heading size="md">
|
||||
React {chosenEmbedType && `- ${capitalize(chosenEmbedType)}`}
|
||||
</Heading>
|
||||
</HStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{!isPublished && <PublishFirstInfo mb="2" />}
|
||||
{!chosenEmbedType ? (
|
||||
<ChooseEmbedTypeList onSelectEmbedType={setChosenEmbedType} />
|
||||
) : (
|
||||
<ReactInstructions type={chosenEmbedType} />
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
import { OrderedList, ListItem, Tag } from '@chakra-ui/react'
|
||||
|
||||
type ShopifyInstructionsProps = {
|
||||
type: 'standard' | 'popup' | 'bubble'
|
||||
}
|
||||
|
||||
export const ShopifyInstructions = ({ type }: ShopifyInstructionsProps) => {
|
||||
switch (type) {
|
||||
case 'standard': {
|
||||
return <StandardInstructions />
|
||||
}
|
||||
case 'popup': {
|
||||
return <PopupInstructions />
|
||||
}
|
||||
case 'bubble': {
|
||||
return <BubbleInstructions />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const StandardInstructions = () => {
|
||||
// const backgroundColor = chatbot?.themeColors.siteBackground.value
|
||||
// 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 elementCode = `<div id="typebot-container" style="background-color: ${backgroundColor}; height: ${windowSizes.height}; width: ${windowSizes.width}"></div>`
|
||||
|
||||
return (
|
||||
<OrderedList spacing={2} mb={4}>
|
||||
<ListItem>
|
||||
On your shop dashboard in the <Tag>Themes</Tag> page, click on{' '}
|
||||
<Tag>Actions {'>'} Edit code</Tag>
|
||||
</ListItem>
|
||||
<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')}
|
||||
/> */}
|
||||
</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
|
||||
my={4}
|
||||
onUpdateWindowSettings={(sizes) =>
|
||||
setWindowSizes({
|
||||
height: sizes.heightLabel,
|
||||
width: sizes.widthLabel,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<CodeBlock code={elementCode} mt={2} /> */}
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
)
|
||||
}
|
||||
|
||||
const PopupInstructions = () => {
|
||||
// const [inputValue, setInputValue] = useState(0)
|
||||
|
||||
return (
|
||||
<OrderedList spacing={2} mb={4}>
|
||||
<ListItem>
|
||||
On your shop dashboard in the <Tag>Themes</Tag> page, click on{' '}
|
||||
<Tag>Actions {'>'} Edit code</Tag>
|
||||
</ListItem>
|
||||
<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')}
|
||||
/> */}
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
)
|
||||
}
|
||||
|
||||
const BubbleInstructions = () => {
|
||||
// const [inputValues, setInputValues] = useState<
|
||||
// Pick<BubbleParams, 'proactiveMessage' | 'button'>
|
||||
// >({
|
||||
// proactiveMessage: undefined,
|
||||
// button: {
|
||||
// color: '',
|
||||
// iconUrl: '',
|
||||
// },
|
||||
// })
|
||||
|
||||
return (
|
||||
<OrderedList spacing={2} mb={4}>
|
||||
<ListItem>
|
||||
On your shop dashboard in the <Tag>Themes</Tag> page, click on{' '}
|
||||
<Tag>Actions {'>'} Edit code</Tag>
|
||||
</ListItem>
|
||||
<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')}
|
||||
/> */}
|
||||
</ListItem>
|
||||
</OrderedList>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
IconButton,
|
||||
Heading,
|
||||
HStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { ChevronLeftIcon } from 'assets/icons'
|
||||
import React, { useState } from 'react'
|
||||
import { ModalProps } from '../../EmbedButton'
|
||||
import { ChooseEmbedTypeList } from '../ChooseEmbedTypeList'
|
||||
import { capitalize } from 'utils'
|
||||
import { PublishFirstInfo } from 'components/shared/Info'
|
||||
import { ShopifyInstructions } from './ShopifyInstructions'
|
||||
|
||||
export const ShopifyModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
|
||||
const [chosenEmbedType, setChosenEmbedType] = useState<
|
||||
'standard' | 'popup' | 'bubble' | undefined
|
||||
>()
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={!chosenEmbedType ? '2xl' : 'xl'}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
<HStack>
|
||||
{chosenEmbedType && (
|
||||
<IconButton
|
||||
icon={<ChevronLeftIcon />}
|
||||
aria-label="back"
|
||||
variant="ghost"
|
||||
colorScheme="gray"
|
||||
mr={2}
|
||||
onClick={() => setChosenEmbedType(undefined)}
|
||||
/>
|
||||
)}
|
||||
<Heading size="md">
|
||||
Shopify {chosenEmbedType && `- ${capitalize(chosenEmbedType)}`}
|
||||
</Heading>
|
||||
</HStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{!isPublished && <PublishFirstInfo mb="2" />}
|
||||
{!chosenEmbedType ? (
|
||||
<ChooseEmbedTypeList onSelectEmbedType={setChosenEmbedType} />
|
||||
) : (
|
||||
<ShopifyInstructions type={chosenEmbedType} />
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
import { OrderedList, ListItem, Tag, Text, Stack } from '@chakra-ui/react'
|
||||
|
||||
type WebflowInstructionsProps = {
|
||||
type: 'standard' | 'popup' | 'bubble'
|
||||
}
|
||||
|
||||
export const WebflowInstructions = ({ type }: WebflowInstructionsProps) => {
|
||||
switch (type) {
|
||||
case 'standard': {
|
||||
return <StandardInstructions />
|
||||
}
|
||||
case 'popup': {
|
||||
return <PopupInstructions />
|
||||
}
|
||||
case 'bubble': {
|
||||
return <BubbleInstructions />
|
||||
}
|
||||
default:
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
|
||||
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%"
|
||||
mt={4}
|
||||
onCopied={() => sendWebflowCopyEvent('standard')}
|
||||
/> */}
|
||||
</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: '',
|
||||
// },
|
||||
// })
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
IconButton,
|
||||
Heading,
|
||||
HStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { ChevronLeftIcon } from 'assets/icons'
|
||||
import React, { useState } from 'react'
|
||||
import { ModalProps } from '../../EmbedButton'
|
||||
import { ChooseEmbedTypeList } from '../ChooseEmbedTypeList'
|
||||
import { capitalize } from 'utils'
|
||||
import { PublishFirstInfo } from 'components/shared/Info'
|
||||
import { WebflowInstructions } from './WebflowInstructions'
|
||||
|
||||
export const WebflowModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
|
||||
const [chosenEmbedType, setChosenEmbedType] = useState<
|
||||
'standard' | 'popup' | 'bubble' | undefined
|
||||
>()
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={!chosenEmbedType ? '2xl' : 'xl'}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
<HStack>
|
||||
{chosenEmbedType && (
|
||||
<IconButton
|
||||
icon={<ChevronLeftIcon />}
|
||||
aria-label="back"
|
||||
variant="ghost"
|
||||
colorScheme="gray"
|
||||
mr={2}
|
||||
onClick={() => setChosenEmbedType(undefined)}
|
||||
/>
|
||||
)}
|
||||
<Heading size="md">
|
||||
Webflow {chosenEmbedType && `- ${capitalize(chosenEmbedType)}`}
|
||||
</Heading>
|
||||
</HStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{!isPublished && <PublishFirstInfo mb="2" />}
|
||||
{!chosenEmbedType ? (
|
||||
<ChooseEmbedTypeList onSelectEmbedType={setChosenEmbedType} />
|
||||
) : (
|
||||
<WebflowInstructions type={chosenEmbedType} />
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
import { ListItem, OrderedList, Tag } from '@chakra-ui/react'
|
||||
import { useState } from 'react'
|
||||
|
||||
type WixInstructionsProps = {
|
||||
type: 'standard' | 'popup' | 'bubble'
|
||||
}
|
||||
|
||||
export const WixInstructions = ({ type }: WixInstructionsProps) => {
|
||||
switch (type) {
|
||||
case 'standard': {
|
||||
return <StandardInstructions />
|
||||
}
|
||||
case 'popup': {
|
||||
return <PopupInstructions />
|
||||
}
|
||||
case 'bubble': {
|
||||
return <BubbleInstructions />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const PopupInstructions = () => {
|
||||
// const [inputValue, setInputValue] = useState(0)
|
||||
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const BubbleInstructions = () => {
|
||||
// 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')}
|
||||
/> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
IconButton,
|
||||
Heading,
|
||||
HStack,
|
||||
} from '@chakra-ui/react'
|
||||
import { ChevronLeftIcon } from 'assets/icons'
|
||||
import React, { useState } from 'react'
|
||||
import { ModalProps } from '../../EmbedButton'
|
||||
import { ChooseEmbedTypeList } from '../ChooseEmbedTypeList'
|
||||
import { WixInstructions } from './WixInstructions'
|
||||
import { capitalize } from 'utils'
|
||||
import { PublishFirstInfo } from 'components/shared/Info'
|
||||
|
||||
export const WixModal = ({ isOpen, onClose, isPublished }: ModalProps) => {
|
||||
const [chosenEmbedType, setChosenEmbedType] = useState<
|
||||
'standard' | 'popup' | 'bubble' | undefined
|
||||
>()
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={!chosenEmbedType ? '2xl' : 'xl'}
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>
|
||||
<HStack>
|
||||
{chosenEmbedType && (
|
||||
<IconButton
|
||||
icon={<ChevronLeftIcon />}
|
||||
aria-label="back"
|
||||
variant="ghost"
|
||||
colorScheme="gray"
|
||||
mr={2}
|
||||
onClick={() => setChosenEmbedType(undefined)}
|
||||
/>
|
||||
)}
|
||||
<Heading size="md">
|
||||
Wix {chosenEmbedType && `- ${capitalize(chosenEmbedType)}`}
|
||||
</Heading>
|
||||
</HStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
{!isPublished && <PublishFirstInfo mb="2" />}
|
||||
{!chosenEmbedType ? (
|
||||
<ChooseEmbedTypeList onSelectEmbedType={setChosenEmbedType} />
|
||||
) : (
|
||||
<WixInstructions type={chosenEmbedType} />
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
export * from './IframeModal'
|
||||
export * from './NotionModal'
|
||||
export * from './WordpressModal'
|
||||
export * from './WixModal'
|
||||
export * from './GtmModal'
|
||||
export * from './React/ReactModal'
|
||||
export * from './Javascript/JavascriptModal'
|
||||
export * from './WebflowModal'
|
||||
export * from './ShopifyModal'
|
||||
Reference in New Issue
Block a user