Simple flow

Let's now create a new simple chat flow.

  • On the chatflows page you need to click "Create new chatbot flow" button

  • Enter the name and description of your flow

  • Click on the name of the newly created chat flow

  • Now you should see the chat flow editor with a single action in it

Each chat flow should start with some starting point. It can be a Command or a Trigger. If you design a chat flow for Telegram, you should add some Commands. At least you should have /start command in your flow. The commands are organized to the Telegram bot menu

Commands are not required if you design the flow for a live chat. But if you have commands they also will be organized to the bot menu, similarly to Telegram.

Now we are designing the flow for the live chat, so we can remove the /start command.

Let's add a new starting point to our flow. It should be a trigger.

Now we have added "Before start new thread" trigger. That trigger will fire if the conversation thread is not started. So, when the user visits the website, the trigger will fire. This trigger will be fired once per conversation.

Ok, let's now create the first message and connect it to our trigger. Let it be a greeting message, like "Hello there!"

Now let's connect our trigger to our greeting message. To do so, you need to drag the grey circle near "Next step" label of Event trigger to Message action. Please note that the source action should not be selected at the moment you connecting it to the other action.

Now let's add another Message action. Let it say "How can I help you?" or "How can I assist you today?". Want to cover both of them? Use Spintex syntax. So instead of use a single fixed text you can enter it in following format:

{variant 1|variant 2|variant 3|...}

In the case of Spintex syntax, our system will select the text randomly. It's a very nice option to diversify the bot messages.

So, in our case we will add a following action:

Ok, that's great! Now let's add some buttons.

At this moment we have two types of buttons:

  • regular buttons - these buttons displays at the bottom of the chat window. These buttons will persist until you manually remove them in some chat flow action.

  • inline buttons - these buttons displays at the bottom of the message they attached to.

Please note, that regular buttons have the same effect as the user inputs the title of the button manually to the chatbox input field. So if you have a regular button with the title "Give me more details" the result of clicking that button will be the same as if the user enters the title of that button into the chatbox input field. Given the above, you cannot have two buttons with the same title on the same chat screen.

Inline buttons can be two types:

  • flow action - you can run the flow action by clicking the button.

  • URL - just opens a URL in new tab. This button can't be linked to another flow action.

Ok, let's add some inline buttons to our flow:

The "More about features" button has "Flow action" type, so we can link it to another action later.

The "Pricing" button it's a URL button, so it just opens a target URL.

Ok, that's nice. Now we can add some messages to link them to "More about features button"

Handling user input

Now as we have a very basic flow ready, let's add some more interesting features.

So let's add the possibility to invite a chat agent to a conversation. Let's add a new button "Contact support" into our message:

You mabe want to collect the visitor email address before starting the conversation with the visitor. Well, you can do that. So let's create a new message action that will also handle user input.

Ok, now we can add the message that appears if user enter non-email value and connect it to "Message is invalid"

Now let's create steps to invite chat agent. First we need to tell the user that entered email is accepted and also we need to tell user that he need to enter a message to chat agent. After that step we need to add Invite agent action. And finally we can add a message that fires when chat agent leaves the chat. So you can see all the above in next screenshot:

As a final step you need to connect your newly created flow to the live chat widget. Please follow this atricle to do that.

Last updated