# Flow builder overview

{% hint style="info" %}
👍 Please make sure you go through every detail on this page before you start building bots.
{% endhint %}

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FPiUSfo9A6RyCixrbKLvy%2Fflow.0a01bdf5.png?alt=media\&token=0af12f0e-4477-40ec-a7cf-a5dedd6c1315)

#### Flow type

To begin with, you need to create a **flow**. Currently, Primechat provides you with 11 types of flow:

​

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FEIgY2GVhiYkgk1GphtRA%2Fflow_type.6ebfa00c.png?alt=media\&token=64dfa29c-94b1-4246-8cf4-82a1733c7979)

#### ​Sub Flow Type

Flow consists of **sub-flows**. There are three types of sub flow:

| Sub Flow                                                                                                                                                                                                                                                                          | Usage                                 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| <p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FZ6YJzCjo2ScwjRrrfu3a%2Fdownload%20(4).png?alt=media&#x26;token=a2de2892-8ac2-46cf-ad53-cf7aff0ed9d2" alt="" data-size="original"></p><p>​</p> | general sub flow, varies in flow type |
| <p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FNH0nuWi1uiU4RLIQMFCd%2Fdownload%20(5).png?alt=media&#x26;token=663eb999-c5d0-43fe-a5ca-d78cccc25406" alt="" data-size="original"></p><p>​</p> | call / trigger background tasks       |
| <p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2F3pWKh6p47QjlYSXUV4GT%2Fdownload%20(6).png?alt=media&#x26;token=5391bd11-04ed-4774-b825-2006aa6e4f28" alt="" data-size="original"></p><p>​</p> | process repetitive tasks              |

#### Step Type

Sub Flow consists of **steps**. There are 8 types of steps:

| Step                                                                                                                                                                                                                                                                                           | Usage                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| <p>​</p><p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FzMZYgyifPyGCUHbKUe4s%2Fdownload%20(3).png?alt=media&#x26;token=e4210a3a-272c-41a6-b024-f72df4055e31" alt="step" data-size="original"></p><p>​</p>  | display information                                             |
| <p>​</p><p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2F3Hh6pIKnPxTdUPNBJDw7%2Fdownload%20(7).png?alt=media&#x26;token=bb42b771-239d-4656-ac23-e2c2a261277a" alt="step" data-size="original"></p><p>​</p>  | ask question and wait for user input                            |
| <p>​</p><p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FBtk612gmd8IMc2YugxOY%2Fdownload%20(8).png?alt=media&#x26;token=d624f768-2f2d-4c63-b55b-1130533c18d4" alt="step" data-size="original"></p><p>​</p>  | process data and tasks via integrations, APIs, notifications... |
| <p>​</p><p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2F2kzLYXMDZlLb1RVpraqQ%2Fdownload%20(9).png?alt=media&#x26;token=c97002fb-ebfc-4cd7-a24f-9e54333f303c" alt="step" data-size="original"></p><p>​</p>  | go different steps depend on conditions                         |
| <p>​</p><p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FGg7M6yLKjISSG5r7Kepy%2Fdownload%20(10).png?alt=media&#x26;token=2641ad8f-c55a-449b-85de-150867e2fbe3" alt="step" data-size="original"></p><p>​</p> | go different steps depend on probability                        |
| <p>​</p><p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FrCBlxRXkh4TIm6yUKGK0%2Fdownload%20(11).png?alt=media&#x26;token=d14c94a1-4ece-4846-842c-28e7744f8e59" alt="step" data-size="original"></p><p>​</p> | send full email instead of short email notification             |
| <p>​</p><p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FTdSbdXuNIB43v6abMnGj%2Fdownload%20(12).png?alt=media&#x26;token=83d03fea-4a84-4903-9f8a-cea0d17d8cca" alt="step" data-size="original"></p><p>​</p> | jump to a step or sub flow rather than using a line connector   |
| <p><img src="https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FTQ4V6kOt9zT7tN8RyQ2C%2Fdownload%20(13).png?alt=media&#x26;token=815b89e5-3eb9-4c7f-a1d4-1146a686e453" alt="" data-size="original"></p><p>​</p>             | define output for the function flow                             |

{% hint style="info" %}
The differences among different types of flow are **Flow Setup**, **Send Message Step** and **Question Step**. Each channel has its own limitation of message types. For example, you can display a product gallery in Facebook Messenger while the SMS channel doesn't support that.
{% endhint %}

#### Publish Version & Draft Version <a href="#publish-version-draft-version" id="publish-version-draft-version"></a>

Each flow has a Publish Version and a Draft Version.

* > Your bot talks to clients using the publish version.
* > Any editing of steps will be saved automatically to the draft version. you can edit your flow without influencing the bot and test the draft version before you "Publish".

**From Publish Version to Draft Version, 1 way:**

* click "Edit Flow" on the upper left/right corner of the flow to enter the draft version

![](https://1845383182-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0a8LLhirT2ZqXdY3anD6%2Fuploads%2Fh3UnA3ojIp0xSv30TJ9S%2FPrimechat%20ai%20flow%20builder.png?alt=media\&token=2eca7bac-3b2f-4c37-a390-ff368cd2a54e)

{% hint style="info" %}
You must enter the Draft Version before you edit a flow.
{% endhint %}

**From Draft Version to Publish Version, three ways:**

* click "Publish" to save your draft to a new Publish Version
* discard changes and revert to the newest Publish Version
* keep the draft and switch to Publish Version (by doing this, you can have a look at your publish version, and when you click edit and come back, your draft is still here)

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FqYZHM0gDTXrgShbUGAZ3%2Ftempsnip.png?alt=media\&token=22782eca-85f1-4d7d-b690-2a948133f1d1)

{% hint style="info" %}
Don't worry if you accidentally quit during your editing; the system will keep all your modifications in the Draft Version. So when you come back, simply enter Draft Version again, and you can see your modifications remain intact.
{% endhint %}

{% hint style="info" %}
You might want to create a test flow first, then open the test flow side by side when you read the following instructions.
{% endhint %}

After entering a flow, this is what you will see:

![](https://1845383182-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0a8LLhirT2ZqXdY3anD6%2Fuploads%2Fz8s5wZHdt69Edk6GNB68%2Fscreencapture-app-primechat-ai-flow-f47630-2023-10-22-18_44_13.png?alt=media\&token=e191756f-23f8-4a4b-b42d-8f8e469cf3ba)

#### Preview Feature

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FLSfG9DOI7BjCeMIHXFRz%2FCapture.PNG?alt=media\&token=786018e1-76f3-4eac-a22b-0ceae262c007)

{% hint style="info" %}
Please note that the "Preview" feature is not supported in all channels. Channels that currently support "Preview": Web, Facebook, Instagram, Telegram, WhatsApp, Line and Viber.
{% endhint %}

On the left-hand side, there is a sidebar. From top to bottom there are:

| Section      | Usage                                                                                                                                 |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| Flow Builder | build subflows here                                                                                                                   |
| Flows        | manage all your subflows                                                                                                              |
| Analytics    | bot data analysis                                                                                                                     |
| Live Chat    | inbox for all the conversations, make a human reply here                                                                              |
| Bot Users    | manage bot user profile. import, export, search or delete bot users                                                                   |
| Automation   | manage keywords, sequences, triggers and comments                                                                                     |
| Contents     | manage custom fields, tags, OTN, personas, user menus and customer feedback                                                           |
| Tools        | manage error logs, draft version tester, bot admins, widgets, multiple language and shortcuts, Facebook Ads, inbound webhooks         |
| Broadcasts   | send/manage broadcasts                                                                                                                |
| Settings     | (some are owner only) manage bot users limit, Facebook greeting text, chat widget customization, ice breakers and authorized websites |

{% hint style="info" %}
Features in Automation, Contents, Tools and Settings can be different from channel to channel. In Settings, usually, the owner can see all the settings like bot user limit, while admin and member-only see part of them
{% endhint %}

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FQ7qUq3FWXHGbcnPZPf5y%2Ftip1.a27dedcc.gif?alt=media\&token=e62c0743-735e-4fe3-88d7-af0ffbfe0491)

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FvwFsCOANjLRzQkkRcr9g%2Ftip2.a057f4cb.gif?alt=media\&token=d506b2ce-cfe0-4fdb-b714-01ffaa3478c3)

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2Fan51O1fuemimzGfwunYT%2Ftip3.69bd3943.gif?alt=media\&token=6097bd08-f2fb-4f4d-b7e9-393850e737ce)

#### Change Themes

Before you start, you can pick your favourite theme by clicking "Change Theme":

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2Fk9bRJtyqCxG8j52m6ddZ%2Fdownload%20\(38\).png?alt=media\&token=6aabf7df-0f52-4a9a-9703-b06465e7ed91)

choose one of them and "Apply Change".

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FzlgFtyLOOy4OiM5SnmCp%2FCapture.PNG?alt=media\&token=c763d883-fbe0-484e-ae5c-375010236e2e)

PS: jellybean is the most popular&#x20;

<figure><img src="https://1845383182-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0a8LLhirT2ZqXdY3anD6%2Fuploads%2FFtHqAz6oyf4uk6an5AEJ%2FAi%20Chatbot%20Flow%20builder23.PNG?alt=media&#x26;token=bbd44aba-3dca-4ec8-9d6a-01ba3ce6b7bb" alt=""><figcaption></figcaption></figure>

#### Hide Mini-map or Tooltips <a href="#hide-mini-map-or-tooltips" id="hide-mini-map-or-tooltips"></a>

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2Fp9b6cX8lgYYMf3aHzvyP%2Fchange_theme3.369d6b4b.png?alt=media\&token=bf665d28-9fea-491d-8e1e-382fa89855a9)

With the tooltip, you can see description for every feature you see in the flow builder like this:

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FOncr9rFNeiSrIc6LTlsj%2Fchange_theme4.7c9fcd6b.png?alt=media\&token=9d862d8a-16b6-4ec4-a167-9ef3b69d9c2b)

The tooltip includes a title, description, image, video link and documentation link. It is friendly to new users. For users who are already familiar with the system, you can choose to disable the tooltip by clicking the "Hide Flow Tooltips" option.

#### Basic Operations to Build Flows <a href="#basic-operations-to-build-flows" id="basic-operations-to-build-flows"></a>

Click on a step to edit it, and "Edit Panel" will show next to the sidebar.

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FRbfDSJ5wpLezqZbDPXPS%2Fworkspace1.f2c327b9.png?alt=media\&token=bff56e83-d110-44ee-ae94-d6bc686d6cb0)

Click the step name to edit it. You can choose the next step at the bottom of the edit panel or drag connectors from the circle to the tile of another step.

#### Connect Steps: <a href="#connect-steps" id="connect-steps"></a>

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FLtQkRPpxxIFwDIJId5jP%2Fworkspace2.7ae21c04.png?alt=media\&token=4a688278-aea4-43e3-bf57-fd6a66ea17cf)

Create a new step or choose an existing one to be the next step. For dragging connectors, see below:

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FsIvujLGfvuruK0kSntrj%2Fconnect_step1.83458edd.gif?alt=media\&token=0dfb71a0-51e8-493f-aad8-81db1d5f9e26)

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FJwowMhAG7YB6BFLjsbhL%2Fconnect_step2.f19da962.gif?alt=media\&token=75059f43-7d6b-4c53-89f7-8804714013de)

{% hint style="info" %}
When you choose an existing next step, a line will be connected from the current step to the next. Too many lines can be messy, get a Goto step to help you organize! In a Goto step, you can nominate the next step without creating a line connector.
{% endhint %}

#### Select Multiple Steps (Move to Canvas/Sub Flow) <a href="#select-multiple-steps-move-to-canvas-sub-flow" id="select-multiple-steps-move-to-canvas-sub-flow"></a>

We've just learned how to move the builder by clicking and dragging. For selecting multiple steps, it's a bit similar. Hold the **Shift** key, then click and drag to cover the steps you would like to select:

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FJ0UdXoxWdReci44lSJWt%2Fselect_steps1.aa273864.gif?alt=media\&token=e3395ab9-a676-4442-99a9-683dd69d9bc2)

Alternatively, ctrl + click them one by one:

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2FXU1cTYlQ2DddI7rSF6TY%2Fselect_steps2.0b0ad2ad.gif?alt=media\&token=7d7705cb-777a-44c3-b7a2-2088bb7cd4d0)

The selected step has a green border. After selecting multiple steps, click "Create New Canvas" to organize these steps in a canvas box or move them to an existing subflow. To **delete** multiple steps, hit the "delete" button on your keyboard after choosing several steps:

![](https://289455019-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRaLazqQDW4JMiGe2iyKg%2Fuploads%2Fk5wxhnhfwlSHBDPrMLsP%2Fdelete_steps.9455f5d0.gif?alt=media\&token=e6a39932-357f-402b-86a2-990d8b9eba24)

{% hint style="info" %}
Delete on Mac\
On a Mac OS computer, hold **fn** and hit **Delete** to remove steps. Or use the "**Delete Selected"** button in the editing panel.
{% endhint %}

**The green start point is the entrance of a subflow. It can't be moved to other subflows or deleted even if you include it in a group of steps.**

### Copy and Paste Steps <a href="#copy-and-paste-steps" id="copy-and-paste-steps"></a>

After you select a step or multiple steps, use **Ctrl + C** to copy and **Ctrl + V** to paste it to:

* different subflows in the same bot/flow
* different bots/flows but the same channels (associate custom fields will be created automatically)
* different channels (unsupported features will be removed)

{% hint style="info" %}
Please note that you can only paste ONCE. Copy again for another paste. This is to prevent bulk pasting which can quickly blow up the flow.
{% endhint %}

That's all about it for Flow Builder Overview!! 🎉 Try building your first flow now. 😎