blsmedia/bot
2
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-02-10 08:08:58 +01:00
parent c66827b606
commit 276f1c1e90
23 changed files with 1166 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
View File

@ -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>
)

9
apps/builder/components/share/integrations/modals/GtmModal/index.tsx
View File

@ -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 />

15
apps/builder/components/share/integrations/modals/IframeModal.tsx
View File

@ -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>

74
apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx
View File

@ -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>
)
}

61
apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx
View File

@ -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>
)
}

117
apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
View File

@ -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>
)

9
apps/builder/components/share/integrations/modals/ShopifyModal/index.tsx
View File

@ -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 />

118
apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx
View File

@ -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>
)
}

101
apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx
View File

@ -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>
)
}