⚡ (pixel) Add skip initialization option

baptisteArno · Jun 28, 2023 · 50fcbfd · 50fcbfd · vercel · Jun 28, 2023
1 parent 033f8f9
commit 50fcbfd
Show file tree

Hide file tree

Showing 12 changed files with 817 additions and 271 deletions.
diff --git a/apps/builder/src/features/blocks/integrations/pixel/components/PixelSettings.tsx b/apps/builder/src/features/blocks/integrations/pixel/components/PixelSettings.tsx
@@ -5,6 +5,7 @@ import { TextLink } from '@/components/TextLink'
 import { TextInput } from '@/components/inputs'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { Select } from '@/components/inputs/Select'
+import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { Stack, Text } from '@chakra-ui/react'
 import { isDefined, isEmpty } from '@typebot.io/lib'
 import {
@@ -25,6 +26,12 @@ type Props = {
 type Item = NonNullable<PixelBlock['options']['params']>[number]
 
 export const PixelSettings = ({ options, onOptionsChange }: Props) => {
+  const updateIsInitSkipped = (isChecked: boolean) =>
+    onOptionsChange({
+      ...options,
+      isInitSkip: isChecked,
+    })
+
   const updatePixelId = (pixelId: string) =>
     onOptionsChange({
       ...options,
@@ -77,6 +84,12 @@ export const PixelSettings = ({ options, onOptionsChange }: Props) => {
         withVariableButton={false}
         placeholder='Pixel ID (e.g. "123456789")'
       />
+      <SwitchWithLabel
+        label={'Skip initialization'}
+        moreInfoContent="Check this if the bot is embedded in your website and the pixel is already initialized."
+        initialValue={options?.isInitSkip ?? false}
+        onCheckChange={updateIsInitSkipped}
+      />
       <SwitchWithRelatedSettings
         label={'Track event'}
         initialValue={isDefined(options?.params)}

diff --git a/apps/docs/docs/editor/blocks/integrations/ga.md b/apps/docs/docs/editor/blocks/integrations/ga.md
@@ -8,10 +8,6 @@ The Google Analytics integration block allows you to track a Google Analytics ev
   alt="Google Analytics block"
 />
 
-:::note
-This block is not executed in Preview mode. To test it, you need to launch the published bot.
-:::
-
 When your flow contains a Google Analytics block, under the hood it:
 
 - Initialize GA and track a "Page view" event on page load.

diff --git a/apps/docs/docs/editor/blocks/integrations/pixel.md b/apps/docs/docs/editor/blocks/integrations/pixel.md
@@ -8,10 +8,6 @@ The Pixel integration block allows you to add a Meta pixel to your bot and track
   alt="Pixel block"
 />
 
-:::note
-This block is not executed in Preview mode. To test it, you need to launch the published bot.
-:::
-
 When your flow contains a pixel block, under the hood it:
 
 - Initialize the pixel and track "PageView" event on page load.

diff --git a/apps/docs/docs/editor/settings.mdx b/apps/docs/docs/editor/settings.mdx
@@ -37,7 +37,7 @@ You can tweak `3000` (3s) to your liking.
 
 In the Metadata section, you can customize how the preview card will look if you share your bot URL on social media for example.
 
-You can also add some custom head code to add third-party scripts like a Facebook pixel for example.
+You can also add some custom head code to add third-party scripts.
 
 ### Google Tag Manager
 

diff --git a/apps/docs/docs/embed/html-javascript.md b/apps/docs/docs/embed/html-javascript.md
@@ -184,6 +184,28 @@ typebot-bubble::part(preview-message) {
 }
 ```
 
+## Callbacks
+
+If you need to trigger events on your parent website when the user interact with the bot, you can use the following callbacks:
+
+```js
+Typebot.initStandard({
+  typebot: 'my-typebot',
+  onNewInputBlock: (inputBlock) => {
+    console.log('New input block displayed', inputBlock.id)
+  },
+  onAnswer: (answer) => {
+    console.log('Answer received', answer.message, answer.blockId)
+  },
+  onInit: () => {
+    console.log('Bot initialized')
+  },
+  onEnd: () => {
+    console.log('Bot ended')
+  },
+})
+```
+
 ## Additional configuration
 
 You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:

diff --git a/apps/docs/openapi/builder/_spec_.json b/apps/docs/openapi/builder/_spec_.json
@@ -3402,6 +3402,170 @@
                                           "webhookId"
                                         ],
                                         "additionalProperties": false
+                                      },
+                                      {
+                                        "type": "object",
+                                        "properties": {
+                                          "id": {
+                                            "type": "string"
+                                          },
+                                          "groupId": {
+                                            "type": "string"
+                                          },
+                                          "outgoingEdgeId": {
+                                            "type": "string"
+                                          },
+                                          "type": {
+                                            "type": "string",
+                                            "enum": [
+                                              "Pixel"
+                                            ]
+                                          },
+                                          "options": {
+                                            "anyOf": [
+                                              {
+                                                "type": "object",
+                                                "properties": {
+                                                  "pixelId": {
+                                                    "type": "string"
+                                                  },
+                                                  "isInitSkip": {
+                                                    "type": "boolean"
+                                                  },
+                                                  "params": {
+                                                    "type": "array",
+                                                    "items": {
+                                                      "type": "object",
+                                                      "properties": {
+                                                        "id": {
+                                                          "type": "string"
+                                                        },
+                                                        "key": {
+                                                          "type": "string"
+                                                        },
+                                                        "value": {}
+                                                      },
+                                                      "required": [
+                                                        "id"
+                                                      ],
+                                                      "additionalProperties": false
+                                                    }
+                                                  },
+                                                  "eventType": {
+                                                    "not": {}
+                                                  }
+                                                },
+                                                "additionalProperties": false
+                                              },
+                                              {
+                                                "type": "object",
+                                                "properties": {
+                                                  "pixelId": {
+                                                    "type": "string"
+                                                  },
+                                                  "isInitSkip": {
+                                                    "type": "boolean"
+                                                  },
+                                                  "params": {
+                                                    "type": "array",
+                                                    "items": {
+                                                      "type": "object",
+                                                      "properties": {
+                                                        "id": {
+                                                          "type": "string"
+                                                        },
+                                                        "key": {
+                                                          "type": "string"
+                                                        },
+                                                        "value": {}
+                                                      },
+                                                      "required": [
+                                                        "id"
+                                                      ],
+                                                      "additionalProperties": false
+                                                    }
+                                                  },
+                                                  "eventType": {
+                                                    "type": "string",
+                                                    "enum": [
+                                                      "Lead",
+                                                      "Contact",
+                                                      "CompleteRegistration",
+                                                      "Schedule",
+                                                      "SubmitApplication",
+                                                      "ViewContent",
+                                                      "AddPaymentInfo",
+                                                      "AddToCart",
+                                                      "AddToWishlist",
+                                                      "CustomizeProduct",
+                                                      "Donate",
+                                                      "FindLocation",
+                                                      "InitiateCheckout",
+                                                      "Purchase",
+                                                      "Search",
+                                                      "StartTrial",
+                                                      "Subscribe"
+                                                    ]
+                                                  }
+                                                },
+                                                "required": [
+                                                  "eventType"
+                                                ],
+                                                "additionalProperties": false
+                                              },
+                                              {
+                                                "type": "object",
+                                                "properties": {
+                                                  "pixelId": {
+                                                    "type": "string"
+                                                  },
+                                                  "isInitSkip": {
+                                                    "type": "boolean"
+                                                  },
+                                                  "params": {
+                                                    "type": "array",
+                                                    "items": {
+                                                      "type": "object",
+                                                      "properties": {
+                                                        "id": {
+                                                          "type": "string"
+                                                        },
+                                                        "key": {
+                                                          "type": "string"
+                                                        },
+                                                        "value": {}
+                                                      },
+                                                      "required": [
+                                                        "id"
+                                                      ],
+                                                      "additionalProperties": false
+                                                    }
+                                                  },
+                                                  "eventType": {
+                                                    "type": "string",
+                                                    "enum": [
+                                                      "Custom"
+                                                    ]
+                                                  },
+                                                  "name": {
+                                                    "type": "string"
+                                                  }
+                                                },
+                                                "required": [
+                                                  "eventType"
+                                                ],
+                                                "additionalProperties": false
+                                              }
+                                            ]
+                                          }
+                                        },
+                                        "required": [
+                                          "id",
+                                          "groupId",
+                                          "type",
+                                          "options"
+                                        ],
+                                        "additionalProperties": false
                                       }
                                     ]
                                   }
@@ -3568,6 +3732,9 @@
               "schema": {
                 "type": "object",
                 "properties": {
+                  "icon": {
+                    "type": "string"
+                  },
                   "name": {
                     "type": "string"
                   }