docs: 📝 Add doc for every block

apps/docs/docs/editor/blocks/bubbles/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Bubbles",
+  "position": 2
+}

apps/docs/docs/editor/blocks/bubbles/embed.mdx

@@ -0,0 +1,25 @@
+---
+sidebar_position: 4
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Embed
+
+The Embed bubble block allows you to display a website or an iframe to your user. You can paste a video URL from many sources including YouTube, Vimeo, and mp4.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/bubbles/embed.png"
+      width="100%"
+      style={{ maxWidth: '600px' }}
+      alt="Embed bubble"
+    />
+  }
+  bot={
+    <video controls width="100%" style={{ maxWidth: '400px' }}>
+      <source src="/img/blocks/bubbles/embed-chat.mp4" type="video/mp4" />
+    </video>
+  }
+/>

apps/docs/docs/editor/blocks/bubbles/image.mdx

@@ -0,0 +1,25 @@
+---
+sidebar_position: 2
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Image
+
+The Image bubble block allows you to display an image to your user. You can upload an image, paste a URL or choose a GIF from the Giphy native integration.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/bubbles/image.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Image bubble"
+    />
+  }
+  bot={
+    <video controls width="100%" style={{ maxWidth: '400px' }}>
+      <source src="/img/blocks/bubbles/image-chat.mp4" type="video/mp4" />
+    </video>
+  }
+/>

apps/docs/docs/editor/blocks/bubbles/text.mdx

@@ -0,0 +1,28 @@
+---
+sidebar_position: 1
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Text
+
+The Text bubble block allows you to display a simple text bubble to your user. They can be chained and it will create a smooth animation:
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/bubbles/3-text-bubbles.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Text bubbles"
+    />
+  }
+  bot={
+    <video controls width="100%" style={{ maxWidth: '600px' }}>
+      <source
+        src="/img/blocks/bubbles/3-text-bubbles-chat.mp4"
+        type="video/mp4"
+      />
+    </video>
+  }
+/>

apps/docs/docs/editor/blocks/bubbles/video.mdx

@@ -0,0 +1,25 @@
+---
+sidebar_position: 3
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Video
+
+The Video bubble block allows you to display a video to your user. You can paste a video URL from many sources including YouTube, Vimeo, and mp4.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/bubbles/video.png"
+      alt="Video bubble"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+    />
+  }
+  bot={
+    <video controls width="100%" style={{ maxWidth: '500px' }}>
+      <source src="/img/blocks/bubbles/video-chat.mp4" type="video/mp4" />
+    </video>
+  }
+/>

apps/docs/docs/editor/blocks/inputs/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Inputs",
+  "position": 2
+}

apps/docs/docs/editor/blocks/inputs/buttons.mdx

@@ -0,0 +1,55 @@
+---
+sidebar_position: 7
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Buttons
+
+The Buttons input block allows you to offer your user predefined choices, either single choice options or multiple choices
+
+## Single choice
+
+Single choice input allows you to directly split your flow depending on what the user selects by linking any choice to a specific path in your flow.
+
+Link the "Default" item to determine the default path independent of what the user chooses.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/single-choice-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Single choice in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/single-choice-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Single choice in bot"
+    />
+  }
+/>
+
+## Multiple choices
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/multiple-choices-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Multiple choices in flow"
+    />
+  }
+  bot={
+    <video controls width="100%" style={{ maxWidth: '400px' }}>
+      <source
+        src="/img/blocks/inputs/multiple-choices-bot.mp4"
+        type="video/mp4"
+      />
+    </video>
+  }
+/>

apps/docs/docs/editor/blocks/inputs/date.mdx

@@ -0,0 +1,37 @@
+---
+sidebar_position: 5
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Date
+
+The Date input block allows you to ask your user for a date. You can ask for a specific date or range and include time:
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/date-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Date input in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/date-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Date input in bot"
+    />
+  }
+/>
+
+The input will use the native date picker depending on the device and browser used to answer the bot. For example on Firefox it looks like this:
+
+<img
+  src="/img/blocks/inputs/date-native-picker.png"
+  width="100%"
+  style={{ maxWidth: '500px' }}
+  alt="Date native picker"
+/>

apps/docs/docs/editor/blocks/inputs/email.mdx

@@ -0,0 +1,32 @@
+---
+sidebar_position: 3
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Email
+
+The Email input block allows you to ask your user for an email. It will check if it is properly formatted.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/email-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Email input in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/email-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Email input in bot"
+    />
+  }
+/>
+
+The retry message will be displayed whenever Typebot detected that the email is not properly formatted.
+
+It won't check if the email address is **valid**. To do that, you will have to trigger a [Webhook block](/editor/blocks/integrations/webhook) and call an email validation service API.

apps/docs/docs/editor/blocks/inputs/file-upload.mdx

@@ -0,0 +1,32 @@
+---
+sidebar_position: 10
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# File upload
+
+The File upload input block allows you to collect files from your user.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/file-upload-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="File upload input in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/file-upload-bot.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="File upload in bot"
+    />
+  }
+/>
+
+The placeholder accepts [HTML](https://en.wikipedia.org/wiki/HTML).
+
+Note that there is a 10MB fixed limit per file.

apps/docs/docs/editor/blocks/inputs/number.mdx

@@ -0,0 +1,28 @@
+---
+sidebar_position: 2
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Number
+
+The Number input block allows you to ask your user for a number. You can configure a minimum, a maximum and a step:
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/number-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Number input in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/number-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Number input in bot"
+    />
+  }
+/>

apps/docs/docs/editor/blocks/inputs/payment.mdx

@@ -0,0 +1,55 @@
+---
+sidebar_position: 8
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Payment
+
+The Payment input block allows you to collect payment. You first need to add your Stripe:
+
+## Connect Stripe account
+
+After clicking on `Select an account > Connect new`, a configuration popup appears:
+
+<img
+  src="/img/blocks/inputs/configure-stripe.png"
+  width="100%"
+  style={{ maxWidth: '800px' }}
+  alt="Single choice in flow"
+/>
+
+- Account name could be anything you'd like it's not something that has to come from Stripe.
+- Test keys can be found here: https://dashboard.stripe.com/test/apikeys
+- Live keys can be found here: https://dashboard.stripe.com/apikeys
+
+Test keys will be used in the preview for testing purposes. Live keys will be used in the published bot.
+
+If you'd still like to still use the test keys in the published bot you just need to also fill in the test keys into the live keys inputs.
+
+## Input configuration
+
+Once you have a Stripe account, you can select it and configure your input:
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/payment-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Payment in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/payment-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Payment in bot"
+    />
+  }
+/>
+
+Make sure to enable any payment method you'd like to appear in your Stripe dashboard at this URL: https://dashboard.stripe.com/settings/payment_methods.
+
+This is where you can enable Cards, Apple Pay, Google Pay, Alipay, WeChat Pay etc.

apps/docs/docs/editor/blocks/inputs/phone-number.mdx

@@ -0,0 +1,28 @@
+---
+sidebar_position: 6
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Phone number
+
+The Phone number input block allows you to ask your user for a phone number and make sure it is properly formatted. It will also make sure that the number is stored in a consistent format. You can choose the default country code or leave it to international:
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/phone-number-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Phone number input in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/phone-number-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Phone number input in bot"
+    />
+  }
+/>

apps/docs/docs/editor/blocks/inputs/rating.mdx

@@ -0,0 +1,57 @@
+---
+sidebar_position: 9
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Rating
+
+The Rating input block allows you to ask your user for a rating.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/rating-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Rating in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/rating-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Rating in bot"
+    />
+  }
+/>
+
+The rating input is very customizable, you can set a custom range, numbers or a custom icon, and bottom labels.
+
+## NPS
+
+You could for example configure it so that it collects the Net promoter score:
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/nps-flow.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="NPS configuration"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/nps-bot.png"
+      width="100%"
+      style={{ maxWidth: '600px' }}
+      alt="NPS in bot"
+    />
+  }
+/>
+
+## Custom icon
+
+To insert a custom icon, you'll need to insert SVG content. It should start with `<svg>` and end with `</svg>`. You can find great open-source icons on [Feather](https://feathericons.com/)

apps/docs/docs/editor/blocks/inputs/text.mdx

@@ -0,0 +1,55 @@
+---
+sidebar_position: 1
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Text
+
+The Text input block allows you to ask your user for a text answer.
+
+## Short text input
+
+By default the text input is expecting a short answer:
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/short-text-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Short text input in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/short-text-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Short text input in bot"
+    />
+  }
+/>
+
+## Long text input
+
+You can also ask your user for a longer text answer by enabling it in the input options:
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/long-text-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Long text input in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/long-text-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Long text input in bot"
+    />
+  }
+/>

apps/docs/docs/editor/blocks/inputs/website.mdx

@@ -0,0 +1,32 @@
+---
+sidebar_position: 4
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Website
+
+The Website input block allows you to ask your user for a URL. It will check if it is properly formatted.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/inputs/website-flow.png"
+      width="100%"
+      style={{ maxWidth: '500px' }}
+      alt="Website input in flow"
+    />
+  }
+  bot={
+    <img
+      src="/img/blocks/inputs/website-bot.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Website input in bot"
+    />
+  }
+/>
+
+The retry message will be displayed whenever Typebot detected that the email is not properly formatted.
+
+It won't check if the email address is **valid**. To do that, you will have to trigger a [Webhook block](/editor/blocks/integrations/webhook) and call an email validation service API.

apps/docs/docs/editor/blocks/integrations/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Integrations",
-  "position": 2
+  "position": 4
 }

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

@@ -1,14 +1,25 @@
-import { YoutubeEmbed } from '../../src/js/YoutubeEmbed.jsx'
+---
+sidebar_position: 4
+---
 
-# Email
+import { YoutubeEmbed } from '../../../../src/js/YoutubeEmbed.jsx'
+
+# Send email
 
 If you want to receive an email notification each time a user completes the bot or if you want to send a recap to the user, the Email block is made for you:
 
-<img src="/img/integrations/email.png" width="400" alt="Email block example" />
+<img
+  src="/img/blocks/integrations/email.png"
+  width="400"
+  alt="Email block example"
+/>
 
-By default, the email will be sent from notifications@typebot.io with a default content based on what your new lead has replied. It will look like this:
+By default, the email will be sent from notifications@typebot.io with default content based on what your new lead has replied. It will look like this:
 
-<img src="/img/integrations/default-email.png" alt="Email block example" />
+<img
+  src="/img/blocks/integrations/default-email.png"
+  alt="Email block example"
+/>
 
 You can choose to use your own email (SMTP) account, using the "From:" dropdown and filling in your credentials.
 You can also customize the email content with your own text/HTML.

apps/docs/docs/editor/blocks/integrations/ga.md

@@ -0,0 +1,13 @@
+---
+sidebar_position: 2
+---
+
+# Google Analytics
+
+The Google Analytics integration block allows you to track a Google Analytics event at a given moment in your flow.
+
+<img
+  src="/img/blocks/integrations/ga.png"
+  width="600"
+  alt="Google Analytics block"
+/>

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

@@ -1,4 +1,8 @@
-import { YoutubeEmbed } from '../../src/js/YoutubeEmbed.jsx'
+---
+sidebar_position: 1
+---
+
+import { YoutubeEmbed } from '../../../../src/js/YoutubeEmbed.jsx'
 
 # Google Sheets
 

apps/docs/docs/editor/blocks/integrations/pabbly.md

@@ -0,0 +1,19 @@
+---
+sidebar_position: 6
+---
+
+# Pabbly Connect
+
+The Pabbly Connect integration block allows you to trigger a workflow at a given moment in your flow.
+
+1. Insert a Pabbly Connect block where you want to trigger the workflow:
+
+<img
+    src="/img/blocks/integrations/pabbly-connect.png"
+    width="600"
+    alt="Pabbly Connect block"
+  />
+
+2. Follow the instructions on Pabbly Connect
+3. It should give you a URL that you need to paste into the block configuration.
+4. Pabbly Connect block should be properly configured.

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

@@ -1,4 +1,8 @@
-# Webhook
+---
+sidebar_position: 3
+---
+
+# Webhook / API Request
 
 The Webhook block allows you to either:
 
@@ -11,7 +15,7 @@ Your 3rd party service (Make.com, Zapier, etc) is giving you a Webhook URL.
 
 You only have to paste this URL in the Webhook block and click on "Test the request". By default the 3rd party service will receive a snapshot of what the bot could send.
 
-<img src="/img/integrations/webhook/simple-post.png" width="600" alt="Simple Webhook POST" />
+<img src="/img/blocks/integrations/webhook/simple-post.png" width="600" alt="Simple Webhook POST" />
 
 You can also decide to customize the request sent to the 3rd party service.
 
@@ -29,19 +33,19 @@ From the documentation, I know that by calling this specific URL: http://www.omd
 
 What I need in my case is instead of inserting "Star Wars", I'd like to insert a Typebot variable:
 
-<img src="/img/integrations/webhook/variable-url.png" width="600" alt="Variable in URL" />
+<img src="/img/blocks/integrations/webhook/variable-url.png" width="600" alt="Variable in URL" />
 
 Then, we can set a test value for our variable (it will replace the variable with this value only for the "Test the request" button):
 
-<img src="/img/integrations/webhook/variable-test-value.png" width="300" alt="Variable in URL" />
+<img src="/img/blocks/integrations/webhook/variable-test-value.png" width="300" alt="Variable in URL" />
 
 Hit the "Test the request" button and then we can save the result in multiple variables:
 
-<img src="/img/integrations/webhook/save-in-variable.png" width="400" alt="Variable in URL" />
+<img src="/img/blocks/integrations/webhook/save-in-variable.png" width="400" alt="Variable in URL" />
 
 Then we can use these variables to display dynamic content in the next bubbles:
 
-<img src="/img/integrations/webhook/preview.png" width="600" alt="Variable in URL" />
+<img src="/img/blocks/integrations/webhook/preview.png" width="600" alt="Variable in URL" />
 
 Possibilities are endless when it comes to API calls, you can litteraly call any API and fetch any data you want.
 

apps/docs/docs/editor/blocks/integrations/zapier.md

@@ -0,0 +1,19 @@
+---
+sidebar_position: 5
+---
+
+# Zapier
+
+The Zapier integration block allows you to trigger a zap at a given moment in your flow.
+
+1. Insert a Zapier block where you want to trigger the Zap:
+
+<img
+    src="/img/blocks/integrations/zapier.png"
+    width="600"
+    alt="Zapier block"
+  />
+
+2. Follow the instructions on Zapier to create and enable your Zap.
+
+3. Zapier block should be properly configured.

apps/docs/docs/editor/blocks/logic/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Logic",
+  "position": 3
+}

apps/docs/docs/editor/blocks/logic/code.md

@@ -2,9 +2,9 @@
 
 The "Code" block allows you to execute Javascript code. If you want to set a variable value with Javascript, use the [Set variable block](./set-variable) instead.
 
-**It doesn't allow you to create custom visual block**
+**It doesn't allow you to create a custom visual block**
 
-<img src="/img/blocks/code.png" width="600" alt="Code block"/>
+<img src="/img/blocks/logic/code.png" width="600" alt="Code block"/>
 
 ## Examples
 
@@ -28,7 +28,7 @@ return new Promise((res) => setTimeout(res, 3000))
 postMessage('hello there!', '*')
 ```
 
-Then on your parent website you could listen for those messages:
+Then on your parent website, you could listen for those messages:
 
 ```js
 addEventListener('message', ({ data }) => console.log(data))

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

@@ -1,10 +1,14 @@
-import { YoutubeEmbed } from '../../../src/js/YoutubeEmbed.jsx'
+---
+sidebar_position: 2
+---
+
+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" />
+<img src="/img/blocks/logic/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.".
 
@@ -18,6 +22,6 @@ A condition can contain different comparisons that are evaluated in order and li
 
 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" />
+<img src="/img/blocks/logic/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/blocks/logic/redirect.mdx

@@ -0,0 +1,18 @@
+---
+sidebar_position: 3
+---
+
+# Redirect
+
+The Redirect logic block allows you to redirect your user to a given URL either on the current tab or in a new tab.
+
+<img
+  src="/img/blocks/logic/redirect.png"
+  width="100%"
+  style={{ maxWidth: '600px' }}
+  alt="Redirect logic block"
+/>
+
+:::caution
+Some browser will block a redirect in a new tab by default and display a message that says "A popup has been blocked, would you like to open it?". To never stumble upon this issue, a redirect on the current page is preferable.
+:::

apps/docs/docs/editor/blocks/logic/set-variable.md

@@ -1,8 +1,12 @@
+---
+sidebar_position: 1
+---
+
 # Set variable
 
 The "Set variable" block allows you to set a particular value to a variable.
 
-<img src="/img/blocks/set-variable.png" width="600" alt="Set variable"/>
+<img src="/img/blocks/logic/set-variable.png" width="600" alt="Set variable"/>
 
 This value can be any kind of plain text but also **Javascript code**.
 
@@ -44,6 +48,5 @@ window.location.href
 
 :::caution
 It will not give you the parent URL if you embed the bot on your site.
-
-A more bullet proof option is to pass the URL as a hidden variable in the embed code options. You can find an example [here](../../embed/html-javascript#additional-configuration).
+A more bulletproof option is to pass the URL as a hidden variable in the embed code options. You can find an example [here](/embed/html-javascript#additional-configuration).
 :::

apps/docs/docs/editor/blocks/logic/typebot-link.mdx

@@ -0,0 +1,16 @@
+---
+sidebar_position: 5
+---
+
+# Link to typebot
+
+The typebot link logic block allows you to go into another typebot flow. This ultimately helps keep your flows clean and be able to reuse a flow in multiple places.
+
+<img
+  src="/img/blocks/logic/link.png"
+  width="100%"
+  style={{ maxWidth: '600px' }}
+  alt="Link to typebot logic block"
+/>
+
+Variables are shared by default, you just need them to make sure they are present in the variables dropdown on both flows.

apps/docs/docs/editor/blocks/overview.mdx

@@ -0,0 +1,51 @@
+---
+sidebar_position: 1
+---
+
+# Overview
+
+Blocks are the atomic building blocks of a typebot chat. You can chain any blocks together to create complexe conversation flows. They are grouped into sub-categories to make it easier to find the right block for your needs:
+
+## Bubbles
+
+Bubble blocks are used to show bubbles that can be used to display information to the user.
+
+<img
+  src="/img/blocks/bubbles.png"
+  width="100%"
+  style={{ maxWidth: '300px' }}
+  alt="Bubble blocks"
+/>
+
+## Inputs
+
+Input blocks are used to ask the user for input. It will stop the conversation and for the user to provide input.
+
+<img
+  src="/img/blocks/inputs.png"
+  width="100%"
+  style={{ maxWidth: '300px' }}
+  alt="Input blocks"
+/>
+
+## Logic
+
+Logic blocks are used to perform background operations. They are not visible to the users.
+
+<img
+  src="/img/blocks/logic.png"
+  width="100%"
+  style={{ maxWidth: '300px' }}
+  alt="Logic blocks"
+/>
+
+## Integrations
+
+Integration blocks are used to trigger external services operations.
+
+<img
+  src="/img/blocks/integrations.png"
+  width="100%"
+  style={{ maxWidth: '300px' }}
+  alt="Integration blocks"
+/>

apps/docs/docs/embed/wordpress.md

@@ -35,7 +35,7 @@ you need to set a fixed `height` in pixel (`500px` or `600px` is usually a great
 
 ### Popup & Bubble
 
-Fields are self explanatory.
+Fields are self explanatory. To open the popup or the bubble when a button in your site is clicked you can use the [Javascript commands](/embed/html-javascript#open-or-close-a-popup).
 
 #### Pages to include separated by a comma
 

apps/docs/package.json

@@ -15,9 +15,9 @@
     "update-search": "docker run -it --rm --env-file=.env -e \"CONFIG=$(cat docsearch-scrapper-config.json | jq -r tostring)\" algolia/docsearch-scraper"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.17",
-    "@docusaurus/preset-classic": "2.0.0-beta.17",
-    "@docusaurus/theme-search-algolia": "^2.0.0-beta.17",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/preset-classic": "2.0.0-beta.21",
+    "@docusaurus/theme-search-algolia": "^2.0.0-beta.21",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",

apps/docs/src/css/custom.css

@@ -20,6 +20,7 @@ h4 {
 
 img {
   border-radius: 0.5rem;
+  margin-bottom: 1rem;
 }
 
 .docusaurus-highlight-code-line {
@@ -55,3 +56,23 @@ details {
   text-decoration: none !important;
   margin-bottom: 10px;
 }
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.arrow-icon {
+  margin: 0 10px;
+}
+
+@media only screen and (max-width: 600px) {
+  .flex {
+    flex-direction: column;
+  }
+
+  .arrow-icon {
+    margin: 10px 0;
+    transform: rotate(90deg);
+  }
+}

apps/docs/src/js/FlowToBot.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export const FlowToBot = ({ flow, bot }) => (
+  <div className="flex">
+    {flow}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="50"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="arrow-icon"
+    >
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+      <polyline points="12 5 19 12 12 19"></polyline>
+    </svg>
+    {bot}
+  </div>
+)