docs: 📝 Condition block

apps/docs/docs/editor/blocks/condition.mdx

@@ -0,0 +1,23 @@
+import { YoutubeEmbed } from '../../../src/js/YoutubeEmbed.jsx'
+
+# Condition
+
+The Condition block allows you to split your flow in two based on a condition.
+
+<img src="/img/blocks/condition.png" width="500" alt="Set variable" />
+
+☝️ This can be translated to: "If 'Score' is greater than 20 then go to this path. Otherwise, go to the other path.".
+
+A condition can contain different comparisons that are evaluated in order and linked with a logical operator: 'AND' or 'OR'.
+
+## 3 minutes video overview
+
+<YoutubeEmbed videoId="47KyLHzdpnY" />
+
+## Advanced
+
+For more complex use cases you can stack conditions on top of each other:
+
+<img src="/img/blocks/condition-2.png" width="500" alt="Set variable" />
+
+☝️ This can be translated to: "If 'Age' is greater than 50 then go to this path. Else, if 'Age' is greater than 20 then go to this path. Otherwise, got to the other path".

apps/docs/docs/editor/variables.md → apps/docs/docs/editor/variables.mdx

@@ -1,17 +1,20 @@
+import { YoutubeEmbed } from '../../src/js/YoutubeEmbed.jsx'
+
 # Variables
 
 Variables are placeholders for content that you can then use anywhere in the Typebot. It's a very important concept to understand to truly create a customized experience for the user.
 
 ## Save an answer in a variable
 
 You can tell your input step to save the answer into a variable and reuse then in a further bubble for example:
-<img src="/img/variables/question.png" width="800" alt="Iframe preview"/>
+
+<img src="/img/variables/question.png" width="800" alt="Iframe preview" />
 
 ## Advanced concepts
 
 Here is a quick video that showcase advanced concepts about variables:
 
-<iframe width="900" height="500" src="https://www.youtube.com/embed/o715Tjv1ijI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<YoutubeEmbed videoId="o715Tjv1ijI" />
 
 ### Prefilled variables
 
@@ -42,8 +45,12 @@ These are simply variables that are declared in the bot flow but aren't displaye
 
 These can be simply declared with "Set variable" steps:
 
-<img src="/img/variables/declaring.png" width="300" alt="Iframe preview"/>
+<img src="/img/variables/declaring.png" width="300" alt="Iframe preview" />
 
 Then the values will be available on the Results page in specific columns:
 
-<img src="/img/variables/hiddenVariablesResults.png" width="500" alt="Iframe preview"/>
+<img
+  src="/img/variables/hiddenVariablesResults.png"
+  width="500"
+  alt="Iframe preview"
+/>

apps/docs/docs/get-started/overview.mdx

@@ -0,0 +1,11 @@
+---
+sidebar_position: 2
+---
+
+import { YoutubeEmbed } from '../../src/js/YoutubeEmbed.jsx'
+
+# Overview
+
+The best way to understand the basic principles of Typebot is by watching the "Get started" video series:
+
+<YoutubeEmbed videoId="https://www.youtube.com/embed/videoseries?list=PLHpyDlgo4x7NUjF-L5VaYfBPQ03uzf5l3" />

apps/docs/docs/integrations/google-sheets.mdx

@@ -0,0 +1,7 @@
+import { YoutubeEmbed } from '../../src/js/YoutubeEmbed.jsx'
+
+# Google Sheets
+
+With the Google Sheets integration step, you can inject, update or get data from Google Spreadsheets. For an overview of how it works check out this video
+
+<YoutubeEmbed videoId="UjlZvlqg6mA" />

apps/docs/src/js/YoutubeEmbed.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export const YoutubeEmbed = ({ videoId }) => (
+  <iframe
+    width="100%"
+    height="500"
+    src={
+      videoId.startsWith('https')
+        ? videoId
+        : `https://www.youtube.com/embed/${videoId}`
+    }
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen
+    style={{ borderRadius: '0.5rem' }}
+  />
+)