diff --git a/apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx b/apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx index 8c519a223..4f0e8667b 100644 --- a/apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx +++ b/apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx @@ -43,8 +43,8 @@ export const NextjsLogo = (props: IconProps) => ( y1="116.5" y2="160.5" > - - + + ( y1="54" y2="106.875" > - - + + diff --git a/apps/docs/docs/embed/commands.md b/apps/docs/docs/embed/commands.md index 7c0c05cb7..4c7a2aa19 100644 --- a/apps/docs/docs/embed/commands.md +++ b/apps/docs/docs/embed/commands.md @@ -8,6 +8,7 @@ Here are the commands you can use to trigger your embedded typebot: - `Typebot.showPreviewMessage()`: Show preview message from the bubble, - `Typebot.hidePreviewMessage()`: Hide preview message from the bubble, - `Typebot.setPrefilledVariables(...)`: Set prefilled variables. +- `Typebot.setInputValue(...)`: Set the value in the currently displayed input. Example: diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json index ec37978a8..b8ed1d446 100644 --- a/packages/embeds/js/package.json +++ b/packages/embeds/js/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/js", - "version": "0.1.0", + "version": "0.1.1", "description": "Javascript library to display typebots on your website", "type": "module", "main": "dist/index.js", diff --git a/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx b/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx index 811ff7ee7..7a70d4013 100644 --- a/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx +++ b/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx @@ -1,9 +1,10 @@ import { ShortTextInput } from '@/components' import { SendButton } from '@/components/SendButton' +import { CommandData } from '@/features/commands/types' import { InputSubmitContent } from '@/types' import { isMobile } from '@/utils/isMobileSignal' import type { EmailInputBlock } from '@typebot.io/schemas' -import { createSignal, onMount } from 'solid-js' +import { createSignal, onCleanup, onMount } from 'solid-js' type Props = { block: EmailInputBlock @@ -30,8 +31,19 @@ export const EmailInput = (props: Props) => { onMount(() => { if (!isMobile() && inputRef) inputRef.focus() + window.addEventListener('message', processIncomingEvent) }) + onCleanup(() => { + window.removeEventListener('message', processIncomingEvent) + }) + + const processIncomingEvent = (event: MessageEvent) => { + const { data } = event + if (!data.isFromTypebot) return + if (data.command === 'setInputValue') setInputValue(data.value) + } + return (
{ onMount(() => { if (!isMobile() && inputRef) inputRef.focus() + window.addEventListener('message', processIncomingEvent) }) + onCleanup(() => { + window.removeEventListener('message', processIncomingEvent) + }) + + const processIncomingEvent = (event: MessageEvent) => { + const { data } = event + if (!data.isFromTypebot) return + if (data.command === 'setInputValue') setInputValue(data.value) + } + return (
{ const matchedCountry = inputValue?.startsWith('+') && inputValue.length > 2 && - phoneCountries.reduce( + phoneCountries.reduce<(typeof phoneCountries)[number] | null>( (matchedCountry, country) => { if ( !country?.dial_code || @@ -87,8 +88,19 @@ export const PhoneInput = (props: PhoneInputProps) => { onMount(() => { if (!isMobile() && inputRef) inputRef.focus() + window.addEventListener('message', processIncomingEvent) }) + onCleanup(() => { + window.removeEventListener('message', processIncomingEvent) + }) + + const processIncomingEvent = (event: MessageEvent) => { + const { data } = event + if (!data.isFromTypebot) return + if (data.command === 'setInputValue') setInputValue(data.value) + } + return (
{ onMount(() => { if (!isMobile() && inputRef) inputRef.focus() + window.addEventListener('message', processIncomingEvent) }) + onCleanup(() => { + window.removeEventListener('message', processIncomingEvent) + }) + + const processIncomingEvent = (event: MessageEvent) => { + const { data } = event + if (!data.isFromTypebot) return + if (data.command === 'setInputValue') setInputValue(data.value) + } + return (
{ onMount(() => { if (!isMobile() && inputRef) inputRef.focus() + window.addEventListener('message', processIncomingEvent) }) + onCleanup(() => { + window.removeEventListener('message', processIncomingEvent) + }) + + const processIncomingEvent = (event: MessageEvent) => { + const { data } = event + if (!data.isFromTypebot) return + if (data.command === 'setInputValue') setInputValue(data.value) + } + return (
} + +export type SetInputValueCommandData = { + command: 'setInputValue' + value: string +} diff --git a/packages/embeds/js/src/features/commands/utils/index.ts b/packages/embeds/js/src/features/commands/utils/index.ts index 7279c89df..e83f60a44 100644 --- a/packages/embeds/js/src/features/commands/utils/index.ts +++ b/packages/embeds/js/src/features/commands/utils/index.ts @@ -4,3 +4,4 @@ export * from './open' export * from './setPrefilledVariables' export * from './showPreviewMessage' export * from './toggle' +export * from './setInputValue' diff --git a/packages/embeds/js/src/features/commands/utils/setInputValue.ts b/packages/embeds/js/src/features/commands/utils/setInputValue.ts new file mode 100644 index 000000000..7a0220d20 --- /dev/null +++ b/packages/embeds/js/src/features/commands/utils/setInputValue.ts @@ -0,0 +1,10 @@ +import { CommandData } from '../types' + +export const setInputValue = (value: string) => { + const message: CommandData = { + isFromTypebot: true, + command: 'setInputValue', + value, + } + window.postMessage(message) +} diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json index 76c6fa856..ba98a08af 100644 --- a/packages/embeds/nextjs/package.json +++ b/packages/embeds/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/nextjs", - "version": "0.1.0", + "version": "0.1.1", "description": "Convenient library to display typebots on your Next.js website", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json index c4c78793c..140ed939e 100644 --- a/packages/embeds/react/package.json +++ b/packages/embeds/react/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/react", - "version": "0.1.0", + "version": "0.1.1", "description": "Convenient library to display typebots on your Next.js website", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/embeds/react/src/stories/bubble.stories.tsx b/packages/embeds/react/src/stories/bubble.stories.tsx index 446293281..cd5821db2 100644 --- a/packages/embeds/react/src/stories/bubble.stories.tsx +++ b/packages/embeds/react/src/stories/bubble.stories.tsx @@ -6,6 +6,7 @@ import { showPreviewMessage, hidePreviewMessage, setPrefilledVariables, + setInputValue, } from '@typebot.io/js' import { useState } from 'react' import { leadGenerationTypebot } from './assets/leadGenerationTypebot' @@ -23,6 +24,7 @@ export const Default = () => { +

Predefined name: