diff --git a/apps/docs/docs/editor/blocks/condition.mdx b/apps/docs/docs/editor/blocks/condition.mdx
new file mode 100644
index 000000000..09525247a
--- /dev/null
+++ b/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.
+
+
+
+☝️ 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
+
+
+
+## Advanced
+
+For more complex use cases you can stack conditions on top of each other:
+
+
+
+☝️ 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".
diff --git a/apps/docs/docs/editor/variables.md b/apps/docs/docs/editor/variables.mdx
similarity index 83%
rename from apps/docs/docs/editor/variables.md
rename to apps/docs/docs/editor/variables.mdx
index 269f0ea9d..1f9cdb08d 100644
--- a/apps/docs/docs/editor/variables.md
+++ b/apps/docs/docs/editor/variables.mdx
@@ -1,3 +1,5 @@
+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.
@@ -5,13 +7,14 @@ Variables are placeholders for content that you can then use anywhere in the Typ
## 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:
-
+
+
## Advanced concepts
Here is a quick video that showcase advanced concepts about variables:
-
+
### 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:
-
+
Then the values will be available on the Results page in specific columns:
-
+
diff --git a/apps/docs/docs/get-started/overview.md b/apps/docs/docs/get-started/overview.md
deleted file mode 100644
index 445245755..000000000
--- a/apps/docs/docs/get-started/overview.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-sidebar_position: 2
----
-
-# Overview
-
-The best way to understand the basic principles of Typebot is by watching the "Get started" video series:
-
-
diff --git a/apps/docs/docs/get-started/overview.mdx b/apps/docs/docs/get-started/overview.mdx
new file mode 100644
index 000000000..258dfcaab
--- /dev/null
+++ b/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:
+
+
diff --git a/apps/docs/docs/integrations/google-sheets.md b/apps/docs/docs/integrations/google-sheets.md
deleted file mode 100644
index 4930d4480..000000000
--- a/apps/docs/docs/integrations/google-sheets.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# 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
-
-
diff --git a/apps/docs/docs/integrations/google-sheets.mdx b/apps/docs/docs/integrations/google-sheets.mdx
new file mode 100644
index 000000000..b299b9c7e
--- /dev/null
+++ b/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
+
+
diff --git a/apps/docs/src/js/YoutubeEmbed.jsx b/apps/docs/src/js/YoutubeEmbed.jsx
new file mode 100644
index 000000000..2720d3b9c
--- /dev/null
+++ b/apps/docs/src/js/YoutubeEmbed.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+export const YoutubeEmbed = ({ videoId }) => (
+
+)
diff --git a/apps/docs/static/img/blocks/condition-2.png b/apps/docs/static/img/blocks/condition-2.png
new file mode 100644
index 000000000..6a801ab97
Binary files /dev/null and b/apps/docs/static/img/blocks/condition-2.png differ
diff --git a/apps/docs/static/img/blocks/condition.png b/apps/docs/static/img/blocks/condition.png
new file mode 100644
index 000000000..65715966f
Binary files /dev/null and b/apps/docs/static/img/blocks/condition.png differ
+
+☝️ 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
+
+
+
+☝️ 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".
diff --git a/apps/docs/docs/editor/variables.md b/apps/docs/docs/editor/variables.mdx
similarity index 83%
rename from apps/docs/docs/editor/variables.md
rename to apps/docs/docs/editor/variables.mdx
index 269f0ea9d..1f9cdb08d 100644
--- a/apps/docs/docs/editor/variables.md
+++ b/apps/docs/docs/editor/variables.mdx
@@ -1,3 +1,5 @@
+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.
@@ -5,13 +7,14 @@ Variables are placeholders for content that you can then use anywhere in the Typ
## 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:
-
+
+
+
+