📝 (webflow) Add bind commands to button instructions

apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx

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

apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowPopupInstructions.tsx

@@ -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>
+      <OrderedList spacing={4} pl={5}>
-        Press <Code>A</Code> to open the <Code>Add elements</Code> panel
+        <ListItem>
-      </ListItem>
+          Press <Code>A</Code> to open the <Code>Add elements</Code> panel
-      <ListItem>
+        </ListItem>
-        <Stack spacing={4}>
+        <ListItem>
-          <PopupSettings
+          <Stack spacing={4}>
-            onUpdateSettings={(settings) =>
+            <PopupSettings
-              setInputValue(settings.autoShowDelay)
+              onUpdateSettings={(settings) =>
-            }
+                setInputValue(settings.autoShowDelay)
-          />
+              }
-          <Text>
+            />
-            Add an <Code>embed</Code> element from the <Code>components</Code>{' '}
+            <Text>
-            section and paste this code:
+              Add an <Code>Embed</Code> element from the <Code>components</Code>{' '}
-          </Text>
+              section and paste this code:
-          <JavascriptPopupSnippet autoShowDelay={inputValue} />
+            </Text>
-        </Stack>
+            <JavascriptPopupSnippet autoShowDelay={inputValue} />
-      </ListItem>
+          </Stack>
-    </OrderedList>
+        </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>
+    </>
   )
 }

apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowStandardInstructions.tsx

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

apps/builder/src/features/publish/components/embeds/settings/PopupSettings.tsx

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

apps/docs/docs/embed/commands.md

@@ -0,0 +1,21 @@
+# Commands
+
+Here are the commands you can use to trigger your embedded typebot:
+
+- `Typebot.open()`: Open popup or bubble
+- `Typebot.close()`: Close popup or bubble
+- `Typebot.toggle()`: Toggle the bubble or popup open/close state,
+- `Typebot.showPreviewMessage()`: Show preview message from the bubble,
+- `Typebot.hidePreviewMessage()`: Hide preview message from the bubble,
+- `Typebot.setPrefilledVariables(...)`: Set prefilled variables.
+
+  Example:
+
+  ```js
+  Typebot.setPrefilledVariables({
+    Name: 'Jhon',
+    Email: 'john@gmail.com',
+  })
+  ```
+
+  For more information, check out the [HTML & Javascript additional configurations](./html-javascript#additional-configuration)

apps/docs/docs/embed/webflow.md

@@ -0,0 +1,29 @@
+# Webflow
+
+Head over to the Share tab of your bot and click on the Webflow button to get the embed instructions of your bot.
+
+## Advanced guides
+
+### Trigger a typebot command on a click of a button
+
+1. Head over to the `Settings` tab of your button and add a dedicated `ID`
+2. In your typebot `Embed` element, insert this code in the existing `<script>` tag. It should look like:
+
+```html
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'
+
+  Typebot.initPopup({
+    typebot: 'my-typebot',
+  })
+
+  document.getElementById('<MY_ID>').addEventListener('click', (event) => {
+    event.preventDefault()
+    Typebot.open()
+  })
+</script>
+```
+
+Make sure to replace `<MY_ID>` with the ID you added on your button element.
+
+In this example we are opening the popup when the button is clicked but you could also use any of the [available commands](./commands).