docs: 📝 Add doc for every block

baptisteArno · Jun 17, 2022 · 283509e · 283509e · vercel · Jun 18, 2022
1 parent e86d436
commit 283509e
Show file tree

Hide file tree

Showing 92 changed files with 1,996 additions and 708 deletions.
diff --git a/apps/docs/docs/editor/blocks/bubbles/_category_.json b/apps/docs/docs/editor/blocks/bubbles/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Bubbles",
+  "position": 2
+}
diff --git a/apps/docs/docs/editor/blocks/bubbles/embed.mdx b/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>
+  }
+/>
diff --git a/apps/docs/docs/editor/blocks/bubbles/image.mdx b/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>
+  }
+/>
diff --git a/apps/docs/docs/editor/blocks/bubbles/text.mdx b/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>
+  }
+/>
diff --git a/apps/docs/docs/editor/blocks/bubbles/video.mdx b/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>
+  }
+/>
diff --git a/apps/docs/docs/editor/blocks/inputs/_category_.json b/apps/docs/docs/editor/blocks/inputs/_category_.json
@@ -0,0 +1,4 @@
+{
+  "label": "Inputs",
+  "position": 2
+}
diff --git a/apps/docs/docs/editor/blocks/inputs/buttons.mdx b/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>
+  }
+/>
diff --git a/apps/docs/docs/editor/blocks/inputs/date.mdx b/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"
+/>
diff --git a/apps/docs/docs/editor/blocks/inputs/email.mdx b/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.
diff --git a/apps/docs/docs/editor/blocks/inputs/file-upload.mdx b/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.
diff --git a/apps/docs/docs/editor/blocks/inputs/number.mdx b/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"
+    />
+  }
+/>
diff --git a/apps/docs/docs/editor/blocks/inputs/payment.mdx b/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.
diff --git a/apps/docs/docs/editor/blocks/inputs/phone-number.mdx b/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"
+    />
+  }
+/>