🐛 (lp) Fix real time airtable bot

Deleted it a long time ago without noticing 😂
baptisteArno · Mar 14, 2023 · 67cb4b4 · 67cb4b4 · vercel · Mar 14, 2023
1 parent d154c4e
commit 67cb4b4
Show file tree

Hide file tree

Showing 2 changed files with 349 additions and 3 deletions.
diff --git 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',
             }}
           />
+          <Flex
+            top="-60px"
+            right="-30px"
+            pos="absolute"
+            display={{ sm: 'none', xl: 'flex' }}
+          >
+            <Text fontFamily="'Indie Flower'" fontSize="2xl">
+              It&apos;s a real Airtable view!
+            </Text>
+            <HandDrawnArrow
+              transform="rotate(30deg)"
+              boxSize="100px"
+              top="15px"
+              right="-60px"
+              pos="absolute"
+            />
+          </Flex>
         </Stack>
       </Stack>
     </Flex>

diff --git a/apps/landing-page/public/typebots/realtime-airtable.json 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": "<div>As you answer this chat, you&#x27;ll see your result in the real Airtable spreadsheet</div>",
+            "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": "<div>You can think of it as a guestbook 😂</div>",
+            "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": "<div>Ready?</div>",
+            "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": "<div>If you have anything to say...</div>",
+            "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": "<div>Cheers!</div>",
+            "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": "<div>What&#x27;s your name?</div>",
+            "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
+}