From b1d30fcb3bd965ab0ca293669fef058f9048708e Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Sat, 9 Apr 2022 09:47:49 -0500 Subject: [PATCH] =?UTF-8?q?docs:=20=F0=9F=93=9D=20Condition=20block?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/docs/docs/editor/blocks/condition.mdx | 23 ++++++++++++++++++ .../editor/{variables.md => variables.mdx} | 15 +++++++++--- apps/docs/docs/get-started/overview.md | 9 ------- apps/docs/docs/get-started/overview.mdx | 11 +++++++++ apps/docs/docs/integrations/google-sheets.md | 5 ---- apps/docs/docs/integrations/google-sheets.mdx | 7 ++++++ apps/docs/src/js/YoutubeEmbed.jsx | 17 +++++++++++++ apps/docs/static/img/blocks/condition-2.png | Bin 0 -> 786452 bytes apps/docs/static/img/blocks/condition.png | Bin 0 -> 750955 bytes 9 files changed, 69 insertions(+), 18 deletions(-) create mode 100644 apps/docs/docs/editor/blocks/condition.mdx rename apps/docs/docs/editor/{variables.md => variables.mdx} (83%) delete mode 100644 apps/docs/docs/get-started/overview.md create mode 100644 apps/docs/docs/get-started/overview.mdx delete mode 100644 apps/docs/docs/integrations/google-sheets.md create mode 100644 apps/docs/docs/integrations/google-sheets.mdx create mode 100644 apps/docs/src/js/YoutubeEmbed.jsx create mode 100644 apps/docs/static/img/blocks/condition-2.png create mode 100644 apps/docs/static/img/blocks/condition.png 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. + +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 + + + +## Advanced + +For more complex use cases you can stack conditions on top of each other: + +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". 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: -Iframe preview + +Iframe preview ## 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: -Iframe preview +Iframe preview Then the values will be available on the Results page in specific columns: -Iframe preview +Iframe preview 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 }) => ( +