diff --git a/apps/landing-page/components/Homepage/RealTimeResults.tsx b/apps/landing-page/components/Homepage/RealTimeResults.tsx
index 50f841637..dc209ed3a 100644
--- a/apps/landing-page/components/Homepage/RealTimeResults.tsx
+++ b/apps/landing-page/components/Homepage/RealTimeResults.tsx
@@ -1,6 +1,7 @@
import { Flex, Stack, Heading, Text, Button, VStack } from '@chakra-ui/react'
import { Standard } from '@typebot.io/react'
import { ArrowRight } from 'assets/icons/ArrowRight'
+import { HandDrawnArrow } from 'assets/illustrations/HandDrawnArrow'
import { PublicTypebot, Typebot } from 'models'
import Link from 'next/link'
import React, { useEffect, useRef, useState } from 'react'
@@ -32,9 +33,8 @@ export const RealTimeResults = () => {
}
const handleAnswer = ({ blockId }: { blockId: string }) => {
- if ([nameBlockId, messageBlockId].includes(blockId)) {
- refreshIframeContent()
- }
+ if ([nameBlockId, messageBlockId].includes(blockId))
+ setTimeout(refreshIframeContent, 1000)
}
return (
@@ -110,6 +110,23 @@ export const RealTimeResults = () => {
backgroundColor: 'white',
}}
/>
+
+
+ It's a real Airtable view!
+
+
+
diff --git a/apps/landing-page/public/typebots/realtime-airtable.json b/apps/landing-page/public/typebots/realtime-airtable.json
new file mode 100644
index 000000000..1204b4e87
--- /dev/null
+++ b/apps/landing-page/public/typebots/realtime-airtable.json
@@ -0,0 +1,329 @@
+{
+ "id": "cl0saxjo1000009l7c4brqlo4",
+ "createdAt": "2022-03-15T15:41:00.241Z",
+ "updatedAt": "2022-03-15T17:32:29.840Z",
+ "name": "My typebot",
+ "publishedTypebotId": "pioizXgk6U9Xtz1BdyjPFy",
+ "folderId": null,
+ "groups": [
+ {
+ "id": "dpg9fjkvZs2zhNDrXavZw2",
+ "blocks": [
+ {
+ "id": "4Ez8hEpERMo48FQcH4ny8F",
+ "type": "start",
+ "label": "Start",
+ "groupId": "dpg9fjkvZs2zhNDrXavZw2",
+ "outgoingEdgeId": "hRuNVikDAguMkxd6sRgQ7b"
+ }
+ ],
+ "title": "Start",
+ "graphCoordinates": { "x": 0, "y": 0 }
+ },
+ {
+ "id": "nrFcoNFtGcGJNifcjiEFya",
+ "blocks": [
+ {
+ "id": "sjigBF5rKat4BForNiMfPwb",
+ "type": "text",
+ "groupId": "nrFcoNFtGcGJNifcjiEFya",
+ "content": {
+ "html": "
As you answer this chat, you'll see your result in the real Airtable spreadsheet
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ {
+ "text": "As you answer this chat, you'll see your result in the real Airtable spreadsheet"
+ }
+ ]
+ }
+ ],
+ "plainText": "As you answer this chat, you'll see your result in the real Airtable spreadsheet"
+ }
+ },
+ {
+ "id": "sb8bz4NhtWF7zRLrfvDnXNY",
+ "type": "text",
+ "groupId": "nrFcoNFtGcGJNifcjiEFya",
+ "content": {
+ "html": "You can think of it as a guestbook 😂
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ { "text": "You can think of it as a guestbook 😂" }
+ ]
+ }
+ ],
+ "plainText": "You can think of it as a guestbook 😂"
+ }
+ },
+ {
+ "id": "scF3dKaGTm68y9rHSKVJVtr",
+ "type": "text",
+ "groupId": "nrFcoNFtGcGJNifcjiEFya",
+ "content": {
+ "html": "Ready?
",
+ "richText": [{ "type": "p", "children": [{ "text": "Ready?" }] }],
+ "plainText": "Ready?"
+ }
+ },
+ {
+ "id": "su4yR8LMVu311nKJsSj3u6q",
+ "type": "choice input",
+ "items": [
+ {
+ "id": "ewb7uVGHNHEKmgbKoLiZA6",
+ "type": 0,
+ "blockId": "su4yR8LMVu311nKJsSj3u6q",
+ "content": "Yeah!"
+ }
+ ],
+ "groupId": "nrFcoNFtGcGJNifcjiEFya",
+ "options": { "buttonLabel": "Send", "isMultipleChoice": false },
+ "outgoingEdgeId": "5CjxPmqfthouJL71zCWW5X"
+ }
+ ],
+ "title": "Block #1",
+ "graphCoordinates": { "x": 1, "y": 165 }
+ },
+ {
+ "id": "9mz6QbFyQB1uMggt9YbweU",
+ "blocks": [
+ {
+ "id": "spuZqdVh1q7kHWb9gghki7q",
+ "type": "text",
+ "groupId": "9mz6QbFyQB1uMggt9YbweU",
+ "content": {
+ "html": "If you have anything to say...
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [{ "text": "If you have anything to say..." }]
+ }
+ ],
+ "plainText": "If you have anything to say..."
+ }
+ },
+ {
+ "id": "sqvXpT1YXE3Htp6BCPvVGv3",
+ "type": "text input",
+ "groupId": "9mz6QbFyQB1uMggt9YbweU",
+ "options": {
+ "isLong": true,
+ "labels": {
+ "button": "Send",
+ "placeholder": "Type your answer..."
+ },
+ "variableId": "v6NeJkZ8fSEjMVUA9D51u5k"
+ }
+ },
+ {
+ "id": "sti9ca1hQgmQLUgghCLqDrx",
+ "type": "Webhook",
+ "groupId": "9mz6QbFyQB1uMggt9YbweU",
+ "options": {
+ "isCustomBody": true,
+ "isAdvancedConfig": true,
+ "variablesForTest": [
+ {
+ "id": "6zpYk7SNpknQQ3pMq3VdaJ",
+ "variableId": "v6NeJkZ8fSEjMVUA9D51u5k",
+ "value": "Hello les amis"
+ },
+ {
+ "id": "2RArRZu1683GvM9cYedJm6",
+ "variableId": "mkMg6BRLLJM69LcSo4DFLc",
+ "value": "recy234r8oNCFTxm7"
+ }
+ ],
+ "responseVariableMapping": []
+ },
+ "webhookId": "cl0se2gnu00002e69s26z118c"
+ },
+ {
+ "id": "s5sGoeApf3QASX1bbPMve5q",
+ "groupId": "9mz6QbFyQB1uMggt9YbweU",
+ "type": "Code",
+ "options": {
+ "name": "Code snippet",
+ "content": "postMessage({from: \"typebot\"}, \"*\")"
+ },
+ "outgoingEdgeId": "tiFY1tFr1u5CjGrbziEtc9"
+ }
+ ],
+ "title": "Block #3",
+ "graphCoordinates": { "x": 660, "y": 159 }
+ },
+ {
+ "id": "dypuPQjb1q55tQavVzZv4e",
+ "blocks": [
+ {
+ "id": "shRqQncqJb6xsKxXV9SEQsF",
+ "type": "image",
+ "groupId": "dypuPQjb1q55tQavVzZv4e",
+ "content": {
+ "url": "https://media1.giphy.com/media/l0K42u9hCg0x6XbLa/giphy.gif?cid=fe3852a3rvjsmcutyv6whx7s390gvj80b3e2rftqav11gnve&rid=giphy.gif&ct=g"
+ }
+ },
+ {
+ "id": "s4mTU7p3Q32L2Zv6C713NAU",
+ "type": "text",
+ "groupId": "dypuPQjb1q55tQavVzZv4e",
+ "content": {
+ "html": "Cheers!
",
+ "richText": [{ "type": "p", "children": [{ "text": "Cheers!" }] }],
+ "plainText": "Cheers!"
+ }
+ }
+ ],
+ "title": "Block #4",
+ "graphCoordinates": { "x": 985, "y": 149 }
+ },
+ {
+ "id": "m299Kw31LhXpxZLNNb7WT5",
+ "blocks": [
+ {
+ "id": "smR7LG3mAEdkxh79aBiwbkp",
+ "type": "text",
+ "groupId": "m299Kw31LhXpxZLNNb7WT5",
+ "content": {
+ "html": "What's your name?
",
+ "richText": [
+ { "type": "p", "children": [{ "text": "What's your name?" }] }
+ ],
+ "plainText": "What's your name?"
+ }
+ },
+ {
+ "id": "shuUtMDMw9P4iAHbz7B5SqJ",
+ "type": "text input",
+ "groupId": "m299Kw31LhXpxZLNNb7WT5",
+ "options": {
+ "isLong": false,
+ "labels": { "button": "Send", "placeholder": "Type your name..." },
+ "variableId": "fTRLkn4FVe83Ev9snHosfL"
+ }
+ },
+ {
+ "id": "siZ9BsYqTZ1BCF42kLNY33G",
+ "type": "Webhook",
+ "groupId": "m299Kw31LhXpxZLNNb7WT5",
+ "options": {
+ "isCustomBody": true,
+ "isAdvancedConfig": true,
+ "variablesForTest": [
+ {
+ "id": "39P65YyjMhqwCWz55R5rCK",
+ "value": "Name",
+ "variableId": "fTRLkn4FVe83Ev9snHosfL"
+ },
+ {
+ "id": "fb5AXuzd65UqbnmrcfZj9i",
+ "value": "2022-03-15T16:31:44.973Z",
+ "variableId": "s65Gqu75c9mq9nbjN84D1S"
+ }
+ ],
+ "responseVariableMapping": [
+ {
+ "id": "dpAEp1bhXyGAAJBYkt6sAK",
+ "bodyPath": "data.records[0].id",
+ "variableId": "mkMg6BRLLJM69LcSo4DFLc"
+ }
+ ]
+ },
+ "webhookId": "cl0sco2i000002e69chfunoi0"
+ },
+ {
+ "id": "ssHNtWrqhDcJNUDqd3oLj6r",
+ "groupId": "m299Kw31LhXpxZLNNb7WT5",
+ "type": "Code",
+ "options": {
+ "name": "Code snippet",
+ "content": "postMessage({from: \"typebot\"}, \"*\")"
+ },
+ "outgoingEdgeId": "oHDLXGgNtGU4n4Br6QDnyB"
+ }
+ ],
+ "title": "Block #5",
+ "graphCoordinates": { "x": 335, "y": 158 }
+ }
+ ],
+ "variables": [
+ { "id": "fTRLkn4FVe83Ev9snHosfL", "name": "Name" },
+ { "id": "hVKa5kBxCrKHr2zSwa27k1", "name": "Email" },
+ { "id": "v6NeJkZ8fSEjMVUA9D51u5k", "name": "Message" },
+ { "id": "p9MgewxfYHHARsp13uvc9d", "name": "Chat ID" },
+ { "id": "s65Gqu75c9mq9nbjN84D1S", "name": "Date" },
+ { "id": "mkMg6BRLLJM69LcSo4DFLc", "name": "Airtable ID" }
+ ],
+ "edges": [
+ {
+ "id": "hRuNVikDAguMkxd6sRgQ7b",
+ "to": { "groupId": "nrFcoNFtGcGJNifcjiEFya" },
+ "from": {
+ "blockId": "4Ez8hEpERMo48FQcH4ny8F",
+ "groupId": "dpg9fjkvZs2zhNDrXavZw2"
+ }
+ },
+ {
+ "id": "5CjxPmqfthouJL71zCWW5X",
+ "to": { "groupId": "m299Kw31LhXpxZLNNb7WT5" },
+ "from": {
+ "blockId": "su4yR8LMVu311nKJsSj3u6q",
+ "groupId": "nrFcoNFtGcGJNifcjiEFya"
+ }
+ },
+ {
+ "from": {
+ "groupId": "m299Kw31LhXpxZLNNb7WT5",
+ "blockId": "ssHNtWrqhDcJNUDqd3oLj6r"
+ },
+ "to": { "groupId": "9mz6QbFyQB1uMggt9YbweU" },
+ "id": "oHDLXGgNtGU4n4Br6QDnyB"
+ },
+ {
+ "from": {
+ "groupId": "9mz6QbFyQB1uMggt9YbweU",
+ "blockId": "s5sGoeApf3QASX1bbPMve5q"
+ },
+ "to": { "groupId": "dypuPQjb1q55tQavVzZv4e" },
+ "id": "tiFY1tFr1u5CjGrbziEtc9"
+ }
+ ],
+ "theme": {
+ "chat": {
+ "inputs": {
+ "color": "#ffffff",
+ "backgroundColor": "#1e293b",
+ "placeholderColor": "#9095A0"
+ },
+ "buttons": { "color": "#ffffff", "backgroundColor": "#1a5fff" },
+ "hostBubbles": { "color": "#ffffff", "backgroundColor": "#1e293b" },
+ "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" },
+ "hostAvatar": {
+ "isEnabled": true,
+ "url": "https://s3.eu-west-3.amazonaws.com/typebot/public/typebots/cl0saxjo1000009l7c4brqlo4/me-square.png"
+ }
+ },
+ "general": {
+ "font": "Open Sans",
+ "background": { "type": "Color", "content": "#171923" }
+ },
+ "customCss": ".typebot-button {box-shadow: inset 0 1px 0 0 rgb(255 255 255/0.2)}"
+ },
+ "settings": {
+ "general": {
+ "isBrandingEnabled": false,
+ "isInputPrefillEnabled": true,
+ "isNewResultOnRefreshEnabled": false
+ },
+ "metadata": {
+ "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+ },
+ "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
+ },
+ "publicId": "my-typebot-4brqlo4",
+ "customDomain": null
+}