What is Flow Studio?

Orbita Flow Studio is a "no-code" way to build conversational experiences. It is an intuitive, graphical studio with a flowchart-like interface for creating rich, conversational applications. With Orbita Flow Studio’s low-code environment, anyone can quickly build powerful voice and chatbot applications using ready-made controls and pre-built templates. Orbita Flow adds to Orbita’s already rich set of tools for accelerating the creation of voice and chatbot-powered healthcare applications.

Flow Studio reduces bottlenecks and lets designers and content authors create and manage conversational applications through its intuitive drag-and-drop visual editor. The Flow Studio visual application builder was created with these intermediate users in mind and requires no development expertise.

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 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. From the project side navigation menu, select Create > Agents > Flow Studio.
   

   

Creating a new flow

1. Select a flow from the Flow Studio listing page or click Create a Flow button to add a new flow.
   

   

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.
   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.
   

   

   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 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:

Option	Description
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.
Delete	Delete the flow. This requires confirmation.
Flow Data	The flow data captures 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.
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.
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. Avatar/ Initials. Action - Update, Delete, or Restored. Username - of the user that did the action. Date - Created/Modified Menu icon View - To view changes Restore - To restore changes to an earlier point.
Copy Flow Studio ID	Click this option to copy the Flow Studio ID to the clipboard.

Controls

Use the following controls to create your flow.

• Start/End

• Single Input

• Options (Choose Many)

• Options (Choose One)

• Say

• Rating

• Yes/No

• Custom

• Evaluate

  • Custom input field

• Link

• Agent

• Annotation

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:

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.

In the General tab, a new dropdown is added in the button tab.

If the user selects utterance, href, or onclick, the values will not be added to the auto-generated intent.
By default, the button type is set as ‘default’.

Option	Description
Default	The values will be added to the autogenerated intent.
Href	You can give any valid URL in the value field. The URL will open in a new tab
Utterance	The utterance value will be triggered without considering the state.
OnClick	You can call any js function with this option. For example, choose OnClick from the dropdown and use the below code in the Value field to dock the chatbot. (function(self){ self.orbitaChatBot.dockCollapse() })(window) In the chatbot, clicking on the button will minimize the dock view chatbot.

Phrases are added to the Auto Generate Slots list.

The Directives tab contains the following fields:

Option	Description
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.
Input Type	With this option, you can restrict the way the chatbot user interacts with the chatbot.

Input Type

The Input Type dropdown contains the following options.

• None. Displays the question without a predefined input type.

• 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.
  

  

  You can choose the Start Date, End Date, and Default date.

  • None. Choose none to select the current date.

  • # of days ago. Enter a number to pick a date from the past. (counts from the current date)

  • Static. You can pick a date from the widget.
    In the chatbot, the Date time picker will be rendered as shown below
    

    

• Number. Select this if you want the user input to be in Numbers (& symbols). If the user gives any other input, it will trigger a none intent.

• Phone Number. Restricts the user input to a number (& symbols) with an input box.

  

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

• Textbox. Using this option, you can have the user respond with utterances that will bypass the NLP. This input type will only work in the Orbita Chatbot.
  

  

  • Hidden. Select this if you don't want to render an input text box in the chatbot.

  • Single Line. Select this if you want a single-line input text box in the chatbot.

    

  • Multi Line. Select this if you want a multiple-line input text box in the chatbot.
    

    

    You can choose the number of lines for the input text box and the visible text for each row.

Options (Choose Many)

It generates a check box for each button with the chat experience.

The General tab contains the multimodal content editor to frame the question for this control.

In the Choices tab, there is a dropdown with Default and Utterance types. If you select the Utterance type, the corresponding choice will be excluded from the auto-generated slots so that it can trigger an intent.

For example, consider the choices as in the screenshot below.

If the chatbot user selects Good when he is prompted with this question, the autogenerated slot will not get triggered. The intent (if any) that has an utterance as Good in it will be triggered.

The data field on the choices tab is for adding extra meta-information to the options. Typically it is used to do the statical calculations at the end of the flow like scoring or tagging the assessment.

The Directives tab contains the following fields,

For example, if the chatbot user chooses the 2nd and 3rd option for this question, the query text property will be msg.payload.queryResult.queryText : "10110". (Read the boolean value excluding the initial placeholder digit i.e 1). The subsequent numbers are a boolean representation of whether the option is checked or not. In this case, there are 4 options, and the 2nd and 3rd options are checked.

If None of the above options is checked, ‘none of the above’ will be considered as another choice and a boolean digit will be added at the end. Extending the above example, if the ‘none of the above’ is enabled in the Choices tab of the option (Choose many) control, and then “none of the above” option is selected by the chatbot user, the query text will property will be msg.payload.queryResult.queryText : "100001".

You can read the choices output from this control in Experience Designer using the below properties.
msg.alexaRequest.data.session.attributes.renderedButtons.choices
msg.payload.queryResult.outputContexts[0].parameters.renderedButtons.choices
msg.payload.session.attributes.renderedButtons.choices

Options (Choose One)

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

The dropdown with Default and Utterance types. If you select the Utterance type, the corresponding choice will be excluded from the auto-generated slots so that it can trigger an intent.

For example, consider the choices as in the screenshot below.

If the chatbot user selects Good when he is prompted with this question, the autogenerated slot will not get triggered. The intent (if any) that has an utterance as Good in it will be triggered.

The data field on the choices tab is for adding extra meta-information to the options. Typically it is used to do the statical calculations at the end of the flow like scoring or tagging the assessment.

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 if the type is Default.

The Directives tab contains the below fields

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. It is recommended to use numbers in the Value field.

The Directives tab contains the following fields:

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:

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.

In the Custom Control, note the Custom control Name. In this case “bmiCalculator”

By default, the “Hook-Data” function node is attached to the flow Manager as part of the base project

The “Settings / Hooks initialize” is needed if not already integrated into a global setting.

Note: If you don't have the Hook Data or the corresponding nodes,

1. In the Experience Designer, create a new flow.

2. Click on the hamburger menu on the top right corner and navigate to Import > Built-in > Orbita Flows-(BETA) > Flow Manager.
   

   

3. Place the flow on the canvas and Deploy the flow
   
   

Settings/Hooks Initialize function ( may not be needed if already set in settings function)

const settings = global.get("settings") || {};
settings.emptyString = '';
global.set("settings", settings);
const hooks = global.get("hooks");
global.set("hooks", hooks || {});
return msg;

bmiCalculator hook function

global.get("hooks").bmiCalculator = msg => {
    node.send(msg);
};

BMI Calculation function

var _ = global.get('lodash');
var answers = msg.orbita.session.flowInfo.answerArray;
var weight = _.result(_.find(answers, function(obj) {return obj.name === 'Weight';}), 'value');
var height = _.result(_.find(answers, function(obj) {return obj.name === 'Height';}), 'value');
var bmi = calcBMI(weight, height);
msg.payload.externalHook.data = bmi; 
return msg

function calcBMI(weight, height) {
  return parseInt((weight * 703) / (height * height));
} 

The BMI calculation, sets

msg.payload.externalHook.data with results of the bmi, with the return msg, the msg object is passed back to the flow manager. Although you can pass data back anywhere on the msg object, returning it to msg.payload.externalHook.data , will cause this data to be logged in the answers array as a control result.

Hook Data Function ( only for reference - should already be included in your project)

try {
    const _ = global.get('lodash');
        controlId = msg.payload.session.attributes.orbitaSession.flowInfo.controlId,
        controlName = msg.payload.session.attributes.orbitaSession.flowInfo.controlName,
        hookName = controlName.indexOf(":") > - 1 ? controlName.substr(0, controlName.indexOf(":")) : controlName,
        args = controlName.indexOf(":") > -1 ?
            [msg,
             ...controlName.substr(controlName.indexOf(":") + 1).split("|")
                .map(arg => arg.trim())
                .filter(arg => !!arg)
                .map(arg => arg === "null" ? null : arg)] :
            [msg];
    msg.payload.externalHook = {
        data: hookName
    }
    if (hookName) {
        const hook = global.get("hooks")[hookName];

        msg.hookResult = {
            hookFound: !!hook
        };
        
        
        if (hook) {
            hook.apply(null, args);
        } else {
            msg.hookResult.executionSuccess = false;
            msg.hookResult.error = `Could not find hook '${hookName}'`;
        
            node.warn(`Could not find hook '${hookName}'`);
        
            return msg;
        }
    }
    
} catch (error) {
    msg.hookResult.executionSuccess = false;
    msg.hookResult.error = error;
    
    node.warn(`Error executing hook`);
    node.error(error);
    
    return msg;
}

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.

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.

Agent

This control will enable the VUX designer to use any agent in the flow-studio flows. For now, only Knowledge Answers is available in the Select Agent dropdown.

Field	Description
Select Agent	You can select the agents you need from the dropdown. For now, only knowledge answers is available in the agent dropdown.
Select Answers	You can select the kgraph from the current project list.
Select Topics	Allow users to search and select a topic from the selected kgraph and they also provide mustache in the topic selection field.
Select Relationship	Allow users to search and select Relationship from the selected kgraph and they also provide mustache in the relationship selection field.
Select Article	Allows the user to select a specific multiscreen field from the kgraph schema for schemas other than the default.
Success	This pin is triggered if a fact is found for the selected Topic and Relationship.
No Response	This pin is triggered if the topic and relationship pair don't have a fact.

Annotation

This control is used for labeling.

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. A Hook Data node to call on Hook event functions.

Repeat

AMAZON.RepeatIntent

Will cause a question to be repeated. Note if you want to interrupt a question being asked to the Flow Manager, for example asking a question that Orbita Answer can answer. Then passing the question in a session back within a session. Set the msg.payload.request.intent.name = ‘AMAZON.RepeatIntent’ and the question that was being asked will be repeated.

Answers Flow Function node:

msg.orbita.session.injectedMessagechatText = msg.payload.orbita.answers.articleContent.faqInfo.chat.chatText + '<hr />';
msg.orbita.session.injectedMessageVoice = msg.payload.orbita.answers.articleContent.faqInfo.voice.sayText + '<hr />';
msg.payload.request.intent.name = 'AMAZON.RepeatIntent';

Flow Manager Say Node

{{msg.orbita.session.injectedMessageVoice}}
{{msg.payload.multiagent.voice.sayText}}

Previous

AMAZON.PreviousIntent

Will cause the Flow Manager to backup to the previous question

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.

   

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.

   

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.

      

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 the 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.

// Control ID
case "520495394870413630": // return back to flow A from flow B
    msg.orbita.session.flowInfo = msg.orbita.session.saveFlowInfo;

Sample Flow

The following image shows a sample Flow studio flow.

Related Articles

• Page:
  3.3.9.2 Custom Control
• Page:
  How do I use Free Text input in Flow Studio?
• Page:
  Guide to Flow Studio
• Page:
  How to retrieve partial conversation using flow studio
• Page:
  GA Release - 4.2.0