docs: 📝 Add doc for every block

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

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

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

@@ -0,0 +1,25 @@
+---
+sidebar_position: 4
+---
+
+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/blocks/integrations/email.png"
+  width="400"
+  alt="Email block example"
+/>
+
+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/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

@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+---
+
+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/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

@@ -0,0 +1,52 @@
+---
+sidebar_position: 3
+---
+
+# Webhook / API Request
+
+The Webhook block allows you to either:
+
+- Call a Webhook URL of a 3rd party service to send information from the bot.
+- Make an API request to a 3rd party service to fetch information and use it in the bot.
+
+## Call a Webhook URL
+
+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/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.
+
+## Make an API request and fetch data
+
+This gets more technical as you'll need to know more about HTTP request parameters.
+
+Lots of services offer an API. They also, most likely have an API documentation. Depending on the parameters you are giving the Webhook block, it should return different info from the 3rd party service.
+
+### Example: fetch movie information
+
+Let's create a bot that ask for a movie and retrieve its informations (By sending an HTTP request to the [OMDB API](http://www.omdbapi.com/)).
+
+From the documentation, I know that by calling this specific URL: http://www.omdbapi.com/?t=Star%20Wars&apikey=1eb4670b, it will search for "Star Wars" movie information and return JSON data.
+
+What I need in my case is instead of inserting "Star Wars", I'd like to insert a Typebot variable:
+
+<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/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/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/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.
+
+Feel free to ask the [community](https://www.facebook.com/groups/typebot) for help if you struggle setting up a Webhook block.

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.