📝 Add analytics doc

apps/docs/breaking-changes.mdx

@@ -2,6 +2,8 @@
 title: Breaking changes
 ---
 
+import { LoomVideo } from '/snippets/loom-video.mdx'
+
 ## Typebot v6
 
 - List variables now don't automatically display the last item when inserted into a bubble. It was too "magical". Now you can leverage the inline code feature to easily get the last element of a list:
@@ -16,22 +18,4 @@ title: Breaking changes
 
 - `Message sequence` option in the OpenAI block was removed because it was also too "magical" and it. Now I've introduced the `Dialogue` option. For more information:
 
-  <div
-    style={{
-      position: 'relative',
-      paddingBottom: '64.5933014354067%',
-      height: 0,
-    }}
-  >
-    <iframe
-      src="https://www.loom.com/embed/df5d64dd01ca47daa5b7acd18b05a725?sid=e6df2f5b-643c-4175-8351-03e1726b2749"
-      allowFullScreen
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-      }}
-    />
-  </div>
+  <LoomVideo id="df5d64dd01ca47daa5b7acd18b05a725" />

apps/docs/contribute/guides/create-block.mdx

@@ -3,6 +3,8 @@ title: Create a new block
 icon: screwdriver-wrench
 ---
 
+import { LoomVideo } from '/snippets/loom-video.mdx'
+
 <Frame style={{ maxWidth: '400px' }}>
   <img
     src="/images/contribute/forging-robot.png"
@@ -36,24 +38,6 @@ Make sure to check out other blocks implementations in the [packages/forge/block
 
 ## Live tutorials
 
-<div
-  style={{
-    position: 'relative',
-    paddingBottom: '64.63195691202873%',
-    height: 0,
-  }}
->
-  <iframe
-    src="https://www.loom.com/embed/c49ced0c2c394751b860458b7eb904a4?sid=58e36bc9-f715-434c-b85c-e5acf6c96454"
-    allowFullScreen
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-    }}
-  ></iframe>
-</div>
+<LoomVideo id="c49ced0c2c394751b860458b7eb904a4" />
 
 Make sure to join our [Discord community](https://typebot.io/discord) to participate to these weekly office hours.

apps/docs/contribute/the-forge/cli.mdx

@@ -2,26 +2,10 @@
 title: CLI
 ---
 
+import { LoomVideo } from '/snippets/loom-video.mdx'
+
 The CLI allows you to bootstrap a new block, creating all the necessary files and folders to get started.
 
 It asks you a few questions about your block, and then creates the files and folders for you.
 
-<div
-  style={{
-    position: 'relative',
-    paddingBottom: '64.63195691202873%',
-    height: 0,
-  }}
->
-  <iframe
-    src="https://www.loom.com/embed/5773d3a1b3eb4613bd373612f84fde31?sid=ba9fb00c-0ca6-4a7c-a4c1-5abb6e54cdec"
-    allowFullScreen
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-    }}
-  ></iframe>
-</div>
+<LoomVideo id="5773d3a1b3eb4613bd373612f84fde31" />

apps/docs/editor/blocks/integrations/openai.mdx

@@ -2,6 +2,8 @@
 title: OpenAI
 ---
 
+import { LoomVideo } from '/snippets/loom-video.mdx'
+
 ## Create chat completion
 
 With the OpenAI block, you can create a chat completion based on your user queries and display the answer back to your typebot.
@@ -39,26 +41,7 @@ This action allows you to transform a text input into an audio URL that you can
 The generated audio URLs are temporary and expire after 7 days. If you need to store them, make sure to download them before they expire.
 :::
 
-<div
-  style={{
-    position: 'relative',
-    paddingBottom: '64.5933014354067%',
-    height: 0,
-  }}
->
-  <iframe
-    src="https://www.loom.com/embed/ccca6cbf16ed4d01b513836775db06a3?sid=22a54baa-000b-435a-b770-bfaf32bfe453"
-    allowFullScreen
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      marginBottom: '1rem',
-    }}
-  />
-</div>
+<LoomVideo id="ccca6cbf16ed4d01b513836775db06a3" />
 
 ## Using Multiple Open AI Blocks: Tips and Tricks
 
@@ -68,25 +51,7 @@ I explain that streaming messages is not possible when they are prefixed or suff
 
 I also demonstrate how formatting can be affected by the presence of text before a message. Watch this video to learn how to optimize your use of multiple Open AI blocks.
 
-<div
-  style={{
-    position: 'relative',
-    paddingBottom: '64.63195691202873%',
-    height: 0,
-  }}
->
-  <iframe
-    src="https://www.loom.com/embed/35dc8af6b9244762acc4a5acf275fb43?sid=3723aa59-13ac-49f2-a95b-5608807ac76d"
-    allowFullScreen
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-    }}
-  ></iframe>
-</div>
+<LoomVideo id="35dc8af6b9244762acc4a5acf275fb43" />
 
 ## Troobleshooting
 

apps/docs/editor/blocks/integrations/webhook.mdx

@@ -2,6 +2,8 @@
 title: Webhook / API Request
 ---
 
+import { LoomVideo } from '/snippets/loom-video.mdx'
+
 The Webhook block allows you to either:
 
 - Call a Webhook URL of a 3rd party service to send information from the bot.
@@ -45,25 +47,7 @@ This video provides a step-by-step guide to successfully configure webhook block
 
 I demonstrate how to configure the webhook block, including the URL, method, and custom body. I also show you how to test the webhook call and save the newly created employee ID. Finally, I explain how to implement the find employee by ID endpoint and map the employee name to a variable.
 
-<div
-  style={{
-    position: 'relative',
-    paddingBottom: '64.5933014354067%',
-    height: 0,
-  }}
->
-  <iframe
-    src="https://www.loom.com/embed/d9aef6a37e0c43759b31be7d69c4dd6d?sid=2a24096c-9e2a-48da-aa2a-61a89877afe7"
-    allowFullScreen
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-    }}
-  />
-</div>
+<LoomVideo id="d9aef6a37e0c43759b31be7d69c4dd6d" />
 
 ### Example: fetch movie information
 

apps/docs/guides/utm-in-results.mdx

@@ -2,6 +2,8 @@
 title: Forward UTM parameters to a typebot
 ---
 
+import { LoomVideo } from '/snippets/loom-video.mdx'
+
 The UTM parameter name should be listed in the Variables dropdown of your flow you can create it on any variable dropdown. Then, if your typebot is launched with the declared UTM parameter. It should appear in the Results tab.
 
 Once you have saved the UTM values into variables like `utm_source` and `utm_value`. You can build a redirect URL in a [Redirect block](../editor/blocks/logic/redirect) with the same UTMs like this:
@@ -10,21 +12,4 @@ Once you have saved the UTM values into variables like `utm_source` and `utm_val
 https://redirect-site.com?utm_source={{utm_source}}&utm_value={{utm_value}}
 ```
 
-<div
-  style={{
-    position: 'relative',
-    paddingBottom: '64.5933014354067%',
-    height: 0,
-  }}
->
-  <iframe
-    src="https://www.loom.com/embed/9b6cb65aff0a485e9e021b42310b207c?sid=2c61af7c-6aef-443e-b63e-941a079f2031"
-    style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-    }}
-  />
-</div>
+<LoomVideo id="9b6cb65aff0a485e9e021b42310b207c" />

apps/docs/mint.json

@@ -188,7 +188,7 @@
     },
     {
       "group": "Results",
-      "pages": ["results/overview"]
+      "pages": ["results/overview", "results/analytics"]
     },
     {
       "group": "Guides",

apps/docs/results/analytics.mdx

@@ -0,0 +1,10 @@
+---
+title: Analytics
+icon: chart-simple
+---
+
+import { LoomVideo } from '/snippets/loom-video.mdx'
+
+<LoomVideo id="324114378c2043ed801508b68a15287c" />
+
+The in-depth analytics help you identify user drop-off points and gain insights into user behavior so that you can incrementally improve your chat conversion rate.

apps/docs/snippets/loom-video.mdx

@@ -0,0 +1,21 @@
+export const LoomVideo = ({ id }) => (
+  <div
+    style={{
+      position: 'relative',
+      paddingBottom: '64.63195691202873%',
+      height: 0,
+    }}
+  >
+    <iframe
+      src={`https://www.loom.com/embed/${id}`}
+      allowFullScreen
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+      }}
+    ></iframe>
+  </div>
+)