What is Flow Studio?

...

When should you use Flow Studio?

• Any time you are building decision tree style conversational dialogs. Situations, where this might be the case, include: , defining assessments, modeling care protocols, and in general, needing to define deterministic logic to handle the conversational flow.

• If you are trying to manage a conversational state, you should use Flow Studio

In contrast, Experience Designer should be used when needing to integrate with third-party systems, write functions, or extend the base capabilities of Flow Studio.

Both systems, Flow Studio, and Experience Designer , work together. Flow Studio is used to define the conversational decision trees. Experience Designer hosts the execution. From a programming standpoint, this is similar to the separation of data and code. Flow Studio allows you to define the busines business logic as data, while Experience Designer hosts the execution of the logic. The Experience Designer can intercept a user intent and switch flows that are being executed.

Getting started

1. Login to Experience Manager

2. Select a project.

3. In From the project side navigation menu, select Create > Agents > Flow Studio.
   

   Image RemovedImage Added

Creating a new flow

1. Select a flow in the list of flows or click Add (+) from the Flow Studio listing page or click Create a Flow button to add a new flow.
   

   Image RemovedImage Added

2. Enter a Title and Description in the Add a New Flow dialog box and click ADD to open the flow studio. Auto Generate Slots is enabled by default.
   

   Image Removed

   While creating/editing a Flow studio flow, you can add utterances using the Add Utterances button.
   These utterances are grouped in an autogenerated intent. The intent can be accessed using the Flow Group Intent.
   You should add the Flow Group Intent node to the Flow Manager node in the Experience designer to use these utterances to invoke the corresponding flow.
   

   Image Added

   Auto Generate slots will store the 'Choice Values' and 'Choice Texts' of "Choose many" and "Choose one" nodes of flow studio.
   Note: Google Dialog flow limits the number of slots an intent can contain. Therefore, if you use Google Dialog flow for publishing your interaction model, you should restrict yourself to creating only 20 Flow Studio flows with Auto Generate Slots enabled, because each flow will have a dynamically created unique slot name that will be used in the OrbitaFlowStudio intent. If you intend to create and use more than 20 flows, you should disable the Auto Generate Slots and create custom slots for the Choices used in the flow.

3. Every flow has an ID on the top of the screen and controls the control pane to the right side of the page.
   Note: Zoom options are placed in the bottom right corner.

   

4. Drag and drop the controls from the control panel to the canvas to start creating a flow.

5. To save the flow, click Save.

Editing an existing flow

If a flow already exists,

...

click the vertical ellipses menu

...

corresponding to the flow name.

...

The vertical ellipsis menu has the following options:

2. Edit Property. You can change the Title, Description, and Auto Generate Slots.

3. Edit. Edit the flow.

Delete. Delete the flow. This requires confirmation.

Flow Details

4. Delete

5. Flow Data

6. Import/export

   . The import/export dialog box has 2 tabs:

   • Export. Click copy to clipboard to copy the JSON code.

   • Import. Paste a JSON code in the space provided to import the flow.

Controls

Use the following controls to create your flow.

• Start/End

• Single Input

• Options (Choose Many)

• Options (Choose One)

• Say

• Rating

• Yes/No

• Custom

• Link

• Evaluate

  • Custom input field

  • Sub-flow

Start/End

Start is the beginning control, where your process begins. Only one Start control can be on the canvas.

End controls are the terminators of the flow, and you can have as many as you would like. The End control executes the flow manager node, in the Experience Designer, on the second pin.

For End control, the Directives tab contains the following fields:

...

• Microphone. Enabled by default. Uncheck to disable it.

• Keyboard. Enabled by default. Uncheck to disable it.

• WaitTimeAnimation. Enabled by default. Uncheck to disable it.

• Wait Time. Time in milliseconds before which the next bubble appears.

Single Input

Stores or processes unlisted values. For example, a user might be asked to record blood pressure. The user might say or type a number.

...

Phrases are added to the Auto Generate Slots list.

The Directives tab contains the following fields:

...

• Microphone. Enabled by default. Uncheck to disable it.

• Keyboard. Enabled by default. Uncheck to disable it.

• WaitTimeAnimation. Enabled by default. Uncheck to disable it.

• Wait Time. The time in milliseconds before which the next bubble appears.

• Input Type. It contains the following directives.

  • Date. Enables a date picker widget in the chatbot.

  • Time. Enables a Time picker widget in the chatbot.

  • DateTime. Enables a combination of Date Picker and Time Picker in one widget.

  • Number. Restricts the user input to number.

  • Email. Validates the user input to be an email.

...

Options (Choose Many)

It causes the bot to cycle through the options, one after the other and expects a Yes or No reply from the user.

You can add a comma-separated list of synonyms of the Text field word or phrase in the Synonyms field.

...

Example

The bot asks a user if she or he likes the following and prompts the options one-by-one to the user. The user is expected to reply with Yes or No.

Bot: Do you like any of the following? Red meat?
User: No
Bot: Sea food?
User: Yes
Bot: Pulses?
User: Yes
Bot: Fruits?
User: Yes

The choices and values are added to the Auto Generate Slots list.

The Directives tab contains the following fields

...

• Microphone. Enabled by default. Uncheck to disable it.

• Keyboard. Enabled by default. Uncheck to disable it.

• WaitTimeAnimation. Enabled by default. Uncheck to disable it.

• Wait Time. Time in milliseconds before which the next bubble appears.

• Checkboxes. By default, the multiple select card will be rendered. If you choose yes or no from the dropdown, the bot will say each option and expect a yes or no response from the user.

Options (Choose One)

It causes the bot to show all the options to the user. The user must pick one of the options provided.

...

Example

Bot: What taste do you prefer: Sweet, Sour, or bitter?
User: Sweet

The choices and values are added to the Auto Generate Slots list.

The Directives tab contains the below fields

...

• Microphone. Enabled the microphone by default. Uncheck to disable it.

• Keyboard. Enabled the Keyboard by default. Uncheck to disable it.

• Include choice options in the voice output. Disabled by default. This option allows the voice assistants to read the options.

  • Say Number Before Option. Enable to let the voice assistant say the option number before the Option.

• WaitTimeAnimation. Enabled the wait time animation by default. Uncheck to disable it.

• Wait Time. The time in milliseconds before which the next bubble appears

Say

Generates content without asking a question; all the other controls that generate content to a user is a question. You can aggregate a series of say controls before a question. For example, you could have a loop that gathers a person's schedule.

Example

Say1 > Expression1 > Say2 > Custom Control > Expression1 > Say3 > Question

Flow will aggregate: Say1 + Say2 + Say3 + Question

In Chat, each Say would be its own bubble when it responds to a question; that is, when it outputs to Alexa or Google.

Say control in the flow studio does not have the Screen tab in the Multi-Modal Content Editor because the Say control aggregates, until a question occurs or until the end control.

...

Rating

Captures a rating value from the user. You can create your own rating scale using the Rating control. The user can either input the Value, Text or the index (one, two, three).

...

The Directives tab contains the following fields:

...

• Microphone. Enabled by default. Uncheck to disable it.

• Keyboard. Enabled by default. Uncheck to disable it.

• WaitTimeAnimation. Enabled by default. Uncheck to disable it.

• Wait Time. Time in milliseconds before which the next bubble appears

Yes/No

Use the Yes/No control for any questions to which the users have to answer using Yes or No.

The Data tab contains the options Yes and No.

...

The Directives tab contains the following fields:

...

• Microphone. Enabled by default. Uncheck to disable it.

• Keyboard. Enabled by default. Uncheck to disable it.

• WaitTimeAnimation. Enabled default. Uncheck to disable it.

• Wait Time. Time in milliseconds before which the next bubble appears.

Custom

This control allows Flow Studio users to invoke custom code defined in the Experience Designer. When execution reaches a Flow Studio Flow's Custom control, Orbita directs the control to the 3rd pin of the Flow Manager node in Experience Designer. (See the section below titled Experience Designer and Flow Manager Node for more information)

When you drag the Custom control to the Flow Studio canvas, you can see a name field and the control's ID. In Experience Designer, developers can write code that executes when the Custom control is reached.

...

To program this, developers will need to make note of the Custom control's ID, displayed on the dialog. Then, in Experience Designer, write code that attaches to the third pin, and executes when the current control ID matches.

...

The value of the control ID is available through the msg object, here: msg.payload.session.attributes.orbitaSession.flowInfo.controlId.

For example, the following function code shows a sample script evaluating the current control ID and dispatching accordingly.

var controlId = msg.payload.session.attributes.orbitaSession.flowInfo.controlId;
switch(controlId) 
{
    case "727728496933425673":
         return [msg, null];
    case "697728492533472789":
         return [null, msg];

// etc

}

This process can be used to perform a simple calculation, or dispatch control to an entirely separate Flow Studio Flow or survey.

See the following video for a detailed explanation.

Link flow

The link flow control connects two flows in the flow studio. It also gives you an option to jump to the exact control node in the target flow.

...

• Name. Give a name to the control.

• Jump to Flow. The flow names in the project are listed here.

• Select Control. All the control ids of the target flow are listed here.

Evaluate

Acts as a switch command. You can create multiple pins based on the number of outputs you require.

The evaluate control can be selected by any previous control value. The best practice is to name each control; do not use the default name.

...

The pins refer to each of the switch cases respectively. The Default pin refers to the else case.

...

Custom input field

Customizes the input field to call any value from the msg object. You can create a condition with that value and set the appropriate pins to it.

...

Flow Manager Node & Experience Designer

You must set up the Experience Designer to invoke Flow Studio Flows using the Flow Manager node. This is a one-time setup.

The following image contains a flow in Experience Designer, which uses the flow from Flow Studio. The Flow Manager node calls the flow in the previous image from the Flow Studio.

...

To get started, download this JSON file, copy it to your clipboard, then import it into your project's Experience Designer using the hamburger menu in the top right corner.

...

To configure Experience Designer to handle your Flow Studio Flow:

1. Copy the Flow ID from Flow Studio.

   Image Removed

2. Paste the Flow Id in the Edit Flow Manager node settings tab.

   Best practice: Use {{msg.payload.flowId}} (that is, a mustache tag), so you can dynamically load the flow. In most cases, you have only one flow manager in a project, but there is no restriction on the number of flow managers.

   Image Removed

3. Enable No Save to not save data to the Orbita database. Disable No Save to send the data to the Orbita database. By default, Orbita saves the flow result data.
   To access the data that is saved to Orbita,

   1. Go to the flow Studio list.

   2. Click on the vertical ellipses button against the preferred flow studio.

   3. Click Flow Data. The saved flow result data for this Flow Studio appears.

      Image Removed

4. In the Options(Single) field, specify the template to read out the choices to the user.

Programmatically jumping to anywhere in the flow

When you do not want to start at the beginning, you can jump to any control in the flow. Or you can jump to an external event that captured more information.

...

Function node

msg.orbita.session.flowInfo = {"flowId":"5cbabd63d4561b6100a10ec6",
  "controlId":"602191193647793721",
  "state":"IN_PROGRESS",
  "messageArray":[],"answerArray":[],
  "checkboxPntr":0,"multiOptionMode":[],
  "items":{}};
return msg;

• flowId. The ID you find when you open a flow in flow studio.

• controlId. The ID you find in any control in a flow, the one you want the flow to start with as it receives input from the intent

See the following video.

The same approach could be used to restore a previous session, or return to the original calling flow.

...

2. Flow History

3. Copy Flow Studio ID

Flow Details

You can edit the Title, Description, Enable/disable Auto Generate Slots, Add/remove Utterances, view the Flow creator, Created Date, Last Updated, the last user that modified the flow.

...

You can edit the Title, Description, Enable/disable Auto Generate Slots, Add/remove Utterances, view the Flow creator, Created Date, Last Updated, the last user that modified the flow.

Delete

Delete the flow. This requires confirmation.

Flow Data

The flow data capture the answers given by the chatbot user to the flow studio questions.
If the chatbot user is logged in, the Flow Data is populated with the first name of the user.
If the chatbot user is not logged in, the Flow Data is populated with “Anonymous“.
You can choose to delete an entry by clicking on the Delete option from the verticle ellipses button.

...

You can export the entire data using the Export option from the hamburger button.

...

Flow Data

You can export the entire data using the Export option from the hamburger button.

Import / Export

The import/export dialog box has 2 tabs

Export

Select the Export tab and click the copy to clipboard button to copy the JSON code.

...

Import

To import a flow studio flow, you should have a flow studio flow already created.

Go to the destination flow studio flow and click on the vertical ellipses button > Import/export.

...

Select the Import tab and paste a JSON code in the space provided to import the flow and click Import.

...

Flow History

Changes done to the flow studio by a user will be saved in the Flow History option.

The Flow History window contains the below details on every action done on the Flow studio.

...

1. Avatar/ Initials.

2. Action - Update, Delete, or Restored.

3. Username - of the user that did the action.

4. Date - Created/Modified

5. Menu icon

   1. View - To view changes

   2. Restore - To restore changes to an earlier point.

Copy Flow Studio ID

Click this option to copy the Flow Studio ID to the clipboard.

Flow Studio Controls

The Flow Studio controls are logical blocks that you can use to create a meaningful conversation.
Refer 3.3.9 Flow Studio Controls

Flow Manager Node

The Flow studio interacts with the Experience Designer using the Flow Manager Node.
Refer 3.3.5 Flow Manager Node

Flow Preview

During the flow development process, the end-conversational user's experience can be observed firsthand using Flow Preview. The Preview in Chat-Bot option on the Flow Studio canvas can be used to preview a chatbot flow that is currently being developed.

Click on the Preview in Chat-Bot option on the canvas, as shown in the image below. The Bot preview page will open in a new tab using the Default Bot Settings in the project.

...

Setup process:

• In order for this functionality to perform properly, the Google Agent must be deployed. For steps to deploy your Google Agent please refer How to Publish the interaction model to Dialogflow?

• In the Experience Designer, the user must have the Flow Manager flow with Flow Group intent set for their existing projects. More info on Flow Manager setup is here 3.3.5 Flow Manager Node
  
  You can import a sample Flow Manager flow by accessing Experience Designer> Hamburger Menu> Import> Built-in> OrbitaFlows> Flow Manager

• The Experience Designer flows will be configured automatically for new projects.

To support this functionality, a new Flow preview intent will be generated.

...

Auto Save Flow

The checkbox on the bottom left of the Flow Studio Canvas page, Auto Save will help users auto save the change they make on the Flow Studio canvas. By default this is unchecked. The user has to opt in.

When enabled, actions like the below will Auto save the flow changes,

• Editing and saving any Flow Studio control.

• When we click the Back To Flow Studio button.

• If we navigate to any other module from the left navigation menu, the flow changes get saved.
  

...

Sample Flow

The following image shows a sample Flow studio flow.

...