📝 (webflow) Add bind commands to button instructions

This commit is contained in:
Baptiste Arnaud
2023-05-17 10:00:25 +02:00
parent 8b84a7d8b9
commit c451ba7784
6 changed files with 83 additions and 23 deletions

View File

@@ -32,7 +32,7 @@ export const WebflowBubbleInstructions = () => {
onThemeChange={setTheme}
/>
<Text>
Add an <Code>embed</Code> element from the <Code>components</Code>{' '}
Add an <Code>Embed</Code> element from the <Code>components</Code>{' '}
section and paste this code:
</Text>
<JavascriptBubbleSnippet

View File

@@ -2,29 +2,39 @@ import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react'
import { useState } from 'react'
import { PopupSettings } from '../../../settings/PopupSettings'
import { JavascriptPopupSnippet } from '../../Javascript/JavascriptPopupSnippet'
import { TextLink } from '@/components/TextLink'
export const WebflowPopupInstructions = () => {
const [inputValue, setInputValue] = useState<number>()
return (
<OrderedList spacing={4} pl={5}>
<ListItem>
Press <Code>A</Code> to open the <Code>Add elements</Code> panel
</ListItem>
<ListItem>
<Stack spacing={4}>
<PopupSettings
onUpdateSettings={(settings) =>
setInputValue(settings.autoShowDelay)
}
/>
<Text>
Add an <Code>embed</Code> element from the <Code>components</Code>{' '}
section and paste this code:
</Text>
<JavascriptPopupSnippet autoShowDelay={inputValue} />
</Stack>
</ListItem>
</OrderedList>
<>
<OrderedList spacing={4} pl={5}>
<ListItem>
Press <Code>A</Code> to open the <Code>Add elements</Code> panel
</ListItem>
<ListItem>
<Stack spacing={4}>
<PopupSettings
onUpdateSettings={(settings) =>
setInputValue(settings.autoShowDelay)
}
/>
<Text>
Add an <Code>Embed</Code> element from the <Code>components</Code>{' '}
section and paste this code:
</Text>
<JavascriptPopupSnippet autoShowDelay={inputValue} />
</Stack>
</ListItem>
</OrderedList>
<Text fontSize="sm" colorScheme="gray" pl="5">
Check out the{' '}
<TextLink href="https://docs.typebot.io/embed/webflow#popup" isExternal>
Webflow embed documentation
</TextLink>{' '}
for more options.
</Text>
</>
)
}

View File

@@ -9,7 +9,7 @@ export const WebflowStandardInstructions = () => (
<ListItem>
<Stack spacing={4}>
<Text>
Add an <Code>embed</Code> element from the <Code>components</Code>{' '}
Add an <Code>Embed</Code> element from the <Code>components</Code>{' '}
section and paste this code:
</Text>
<JavascriptStandardSnippet />

View File

@@ -30,15 +30,15 @@ export const PopupSettings = ({ onUpdateSettings, ...props }: Props) => {
<Heading size="sm">Popup settings</Heading>
<HStack pl={4}>
<p>Auto show</p>
<Text flexShrink={0}>Auto show</Text>
<Switch
isChecked={isEnabled}
onChange={(e) => setIsEnabled(e.target.checked)}
/>
{isEnabled && (
<>
<Text>after</Text>
<NumberInput
label="After"
size="sm"
w="70px"
defaultValue={inputValue}