diff --git a/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx b/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
index 2dfa53ba4..4f41cdd97 100644
--- a/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
+++ b/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
@@ -7,7 +7,7 @@ import { PopupParams } from 'typebot-js'
import { parseInitPopupCode, typebotJsHtml } from '../params'
type PopupEmbedCodeProps = {
- delay: number
+ delay?: number
withStarterVariables?: boolean
onCopied?: () => void
}
diff --git a/apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx b/apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx
index 1345eddb0..aba424bcc 100644
--- a/apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx
+++ b/apps/builder/components/share/codeSnippets/Popup/EmbedSettings.tsx
@@ -8,6 +8,8 @@ import {
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
+ Switch,
+ HStack,
} from '@chakra-ui/react'
import { useState, useEffect } from 'react'
import { PopupParams } from 'typebot-js'
@@ -19,14 +21,15 @@ export const PopupEmbedSettings = ({
onUpdateSettings,
...props
}: PopupEmbedSettingsProps & StackProps) => {
+ const [isEnabled, setIsEnabled] = useState(false)
const [inputValue, setInputValue] = useState(0)
useEffect(() => {
onUpdateSettings({
- delay: inputValue * 1000,
+ delay: isEnabled ? inputValue * 1000 : undefined,
})
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [inputValue])
+ }, [inputValue, isEnabled])
return (
@@ -37,18 +40,27 @@ export const PopupEmbedSettings = ({
- Appearance delay
- setInputValue(val)}
- value={inputValue}
- min={0}
- >
-
-
-
-
-
-
+
+ Appearance delay
+ setIsEnabled(e.target.checked)}
+ />
+
+
+ {isEnabled && (
+ setInputValue(val)}
+ value={inputValue}
+ min={0}
+ >
+
+
+
+
+
+
+ )}
)
diff --git a/apps/builder/components/share/codeSnippets/params.ts b/apps/builder/components/share/codeSnippets/params.ts
index 73da88f74..10f5675cb 100644
--- a/apps/builder/components/share/codeSnippets/params.ts
+++ b/apps/builder/components/share/codeSnippets/params.ts
@@ -7,6 +7,7 @@ import {
} from 'typebot-js'
import parserBabel from 'prettier/parser-babel'
import prettier from 'prettier/standalone'
+import { isDefined } from 'utils'
const parseStringParam = (fieldName: string, fieldValue?: string) =>
fieldValue ? `${fieldName}: "${fieldValue}",` : ``
@@ -14,7 +15,7 @@ const parseStringParam = (fieldName: string, fieldValue?: string) =>
const parseNonStringParam = (
fieldName: string,
fieldValue?: number | boolean
-) => (fieldValue ? `${fieldName}: ${fieldValue},` : ``)
+) => (isDefined(fieldValue) ? `${fieldName}: ${fieldValue},` : ``)
const parseCustomDomain = (domain?: string): string =>
parseStringParam('customDomain', domain)
diff --git a/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx b/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
index 8434c0b6c..1ddc2e9ac 100644
--- a/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
@@ -81,7 +81,7 @@ const StandardInstructions = ({ publicId }: Pick) => {
}
const PopupInstructions = () => {
- const [inputValue, setInputValue] = useState(0)
+ const [inputValue, setInputValue] = useState()
return (
@@ -95,7 +95,7 @@ const PopupInstructions = () => {
Paste the code below:
setInputValue(settings.delay ?? 0)}
+ onUpdateSettings={(settings) => setInputValue(settings.delay)}
/>
diff --git a/apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx b/apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx
index a1bf98fda..0b4b1a3af 100644
--- a/apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/Javascript/JavascriptInstructions.tsx
@@ -48,7 +48,7 @@ const StandardInstructions = () => {
}
const PopupInstructions = () => {
- const [inputValue, setInputValue] = useState(0)
+ const [inputValue, setInputValue] = useState()
return (
@@ -57,7 +57,7 @@ const PopupInstructions = () => {
setInputValue(settings.delay ?? 0)}
+ onUpdateSettings={(settings) => setInputValue(settings.delay)}
/>
diff --git a/apps/builder/components/share/integrations/modals/NotionModal.tsx b/apps/builder/components/share/integrations/modals/NotionModal.tsx
index 2e025e07c..c1960946c 100644
--- a/apps/builder/components/share/integrations/modals/NotionModal.tsx
+++ b/apps/builder/components/share/integrations/modals/NotionModal.tsx
@@ -33,7 +33,7 @@ export const NotionModal = ({
- {!isPublished && }
+ {!isPublished && }
Type /embed
diff --git a/apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx b/apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx
index c078c78d3..850a48fa9 100644
--- a/apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/React/ReactInstructions.tsx
@@ -48,13 +48,13 @@ const StandardInstructions = () => {
}
const PopupInstructions = () => {
- const [inputValue, setInputValue] = useState(0)
+ const [inputValue, setInputValue] = useState()
return (
setInputValue(settings.delay ?? 0)}
+ onUpdateSettings={(settings) => setInputValue(settings.delay)}
/>
Initialize the typebot
diff --git a/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx b/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
index 311eee1bf..7f774fbec 100644
--- a/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
@@ -96,7 +96,7 @@ const StandardInstructions = ({ publicId }: Pick) => {
}
const PopupInstructions = () => {
- const [inputValue, setInputValue] = useState(0)
+ const [inputValue, setInputValue] = useState()
return (
@@ -109,7 +109,7 @@ const PopupInstructions = () => {
before the closing head tag:
setInputValue(settings.delay ?? 0)}
+ onUpdateSettings={(settings) => setInputValue(settings.delay)}
/>
diff --git a/apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx b/apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx
index 9a5c8ab18..a9bd4b0a6 100644
--- a/apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/WebflowModal/WebflowInstructions.tsx
@@ -41,7 +41,7 @@ const StandardInstructions = () => (
)
const PopupInstructions = () => {
- const [inputValue, setInputValue] = useState(0)
+ const [inputValue, setInputValue] = useState()
return (
@@ -52,7 +52,7 @@ const PopupInstructions = () => {
Add an embed element from the components
section and paste this code:
setInputValue(settings.delay ?? 0)}
+ onUpdateSettings={(settings) => setInputValue(settings.delay)}
my={4}
/>
diff --git a/apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx b/apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx
index ecd610ef6..0d5afc0d0 100644
--- a/apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/WixModal/WixInstructions.tsx
@@ -43,7 +43,7 @@ const StandardInstructions = () => {
}
const PopupInstructions = () => {
- const [inputValue, setInputValue] = useState(0)
+ const [inputValue, setInputValue] = useState()
return (
<>
@@ -60,7 +60,7 @@ const PopupInstructions = () => {
Paste this snippet in the code box:
setInputValue(settings.delay ?? 0)}
+ onUpdateSettings={(settings) => setInputValue(settings.delay)}
my={4}
/>