Activity Builder Activity Builder

Activity Builder

Chandra Bergmann Chandra Bergmann

Define specific user interactions and their effects

The Activity Builder provides the tools to define how users interact with your Airkit apps. This allows you to control everything from the layout and functionality of a web app to the behavior of conversational bots, spanning any combination of voice and SMS

Like most Builders, the layout of the Activity Builder maps comfortably onto the general anatomy of the studio: to the immediate right of the Builder Bar is the Tree, to the right of which is the Stage, to the right of which is the Inspector

Activity_Builder.png

In this document, we will discuss the broad functionality of each component of the Activity Builder and provide links to additional resources that provide a more detailed discussion of specific tools provided by the Activity Builder. 

Tree

The Tree is where you'll find an expandable and collapsible breakdown of the user interactions you have built out as part of your app; it is also where you will lay the foundation for new interactions you want to build: clicking the plus sign that appears when you run your mouse over a branch in the Tree provides the option to add a subcomponent that will be nested directly under said branch. Airkit splits these interactions up into four sections: Web, Chat Bots, Voice Bots, and Advanced.

Web

The Web section is what allows you to build out the UI of the web component of your applications. Here is how it is structured:

  • Web
    • Web Flows - typically designed around a specific work flow.
      • Web Pages - the individual pages that make up a Web Flow; users will typically only be able to see a single web page at once.

The following example shows what it looks like to access a particular web control: in this case, a Label reading "This is text." Note that the Label being accessed is highlighted in the Stage, and that the interface to make changes to the selected Web Control is open in the Inspector:

Web.png

Chat Bots

The Chat Bots section is what allows you to build out conversational workflows that occur via SMS. These workflows can capture user data, provide the user with quick, automated responses to their inquiries, or direct the user to a relevant Web Flow. The Chat Bots section is structured as follows:

  • Chat Bots
    • Individual Chat Bots - like Web Flows, typically designed around a specific work flow.
      • Decision Menus - what captures the user’s decisions and guides them through how to proceed. Each Decision Menu defines two things: an outgoing text, and ways to parse and reply to different incoming responses.
        • Decision Options - define different ways your Chat Bot might parse user input.
        • Relevant Expressions (optional) - variables or other Airscript expressions the Chat Bot requires access to.
        • Default Response (optional) - defines how the Chat Bot will respond if it can't parse the reply it receives. 

The following example shows what it looks like to access a particular Decision Option: in this case, a Decision Option named "HELP". Note that the Stage displays the entire Decision Menu that this Decision Option is a part of (the outgoing text appears at the top, with the Decision Options displayed underneath), while the interface to see and change how the Decision Option is parsed is open in the Inspector. The user might send the text "HELP", "Help", or "help", and the Chat Bot will parse all three potential incoming texts in the same way:

 

Chat_Bots.png

For a more detailed discussion on how to incorporate a Chat Bot into a wider Journey, check out The Start Chat Bot Action.

Voice Bots

The Voice Bots section is what allows you to build out conversational workflows that occur via phone call. In concept, they function similarly to Chat Bots. The core difference is that Voice Bot conversations take place over phone call rather than SMS; user input is parsed via dial tone input from the dial pad as opposed to text messages. Voice Bots also provide an option to bridge the user's phone call over to another phone number, which can be used to pass a phone call over to a priority line or redirect a call to a different department.

The structure of the Voice Bots section matches the structure of the Chat Bots section almost exactly: 

  • Voice Bots
    • Individual Voice Bots- like Web Flows, typically designed around a specific work flow.
      • Decision Menus - what captures the user’s decisions and guides them through how to proceed. Each Decision Menu defines two things: an outgoing message, and ways to parse and reply to different incoming responses.
        • Decision Options - define different ways your Voice Bot might parse user input.
        • Relevant Expressions (optional) - variables or other Airscript expressions the Voice Bot requires access to.
        • Default Response (optional) - defines how the Voice Bot will respond if it can't parse the reply it receives. 

The following example shows what it looks like to access a variable expressions in a Decision Menu: in this case, Company Name. Note that the Stage displays the entire Decision Menu that this variable is a part of, while the interface to see and change the expression Company Name is parsed is open in the Inspector. The expression defining Company Name is simply the string "Airkit" (though it would be capable of parsing an Airscript expression – including expressions in an outgoing message is what allows Voice Bots to send customized messages to each user):

2021-06-17_15-30-44.png

For a more detailed discussion on how to incorporate a Voice Bot into a wider Journey, check out The Start Voice Bot Action.

Advanced

There are two subsections nested under Advanced: Layouts, and My Controls.

Under Layouts, you'll find everything you need to create a header and footer for your web app

Under My Controls, you'll find the means to create your own custom Web Controls that you can reuse across your Web Flows.

Stage

The Stage displays a visual representation of the aspect of the app you're modifying, allowing you to see the results of your changes in real time. Exactly what is displayed in the Stage varies to better communicate the type of modifications you're making.

For instance, when working with anything nested under Web, the Stage showcases how the web UI will appear to end users. You can click on a Web Control as it's displayed in the Stage in order to open up the interface to make edits to it in the Inspector. The following example shows how the interface in the inspector changes as various Web Controls, two Labels and a Button, are clicked on:

2021-06-14_17-13-52__2_.gif

When working the conversational bots – either Chat Bots or Voice Bots – the Stage gives you access to type out your bots' responses, which can include links to Web Flows and expressions that parse Airscript functions. If you’re configuring a Decision Menu, you’ll see additional options to direct what steps should be taken after a user replies.

Inspector

The Inspector is where you can examine and modify the individual elements that make up your application; in the Activity Builder, this is what you'll use to configure specific interactions. Precisely what those interactions are depends which element you're inspecting. The following example shows how the Inspector can be used to modify the text that appears in a Button.

2021-06-14_17-15-14__2_.gif

To better reflect the functionality of the Inspector, its layout changes subtly even when being used to examine relatively similar things. Consider Web Controls: there are changes you'll be able to make to some Web Controls but not others. For example, the Inspector appears differently when examining a Button as compared to a Label, in part because Buttons can be clicked, triggering actions, whereas Labels can't.

In general, there are three tabs you might find in the Activity Builder Inspector: General, Actions, and Advanced. (Not every element will allow you to access each tab while being inspected, because different allow different modifications.)

Inspector_Tabs.png

General

Under the General tab, you'll find most of the fundamental information associated with the element being inspected. This includes details about the element itself (such as the text associated with a Label or the URL associated with an image), relevant variables (particularly if they're defined within the scope of the element you're examining), and material concerning styling.

Actions

Under the Actions tab, you'll be able to access the Action Builder. This allows you to associate actions with the element you're inspecting. Actions include setting a variablestarting a Chat Bot, or navigating to a Web Flow. Multiple actions can be associated with a single element. By default, all actions will be performed in order going down the list, though it is possible to set certain actions to only occur if other conditions are met.

Advanced

As a rule of thumb, the Advanced tab provides the ability to inspect and edit any functionality that didn't fit neatly into the first two tabs. Most commonly, the Advanced tab is used to dictate when particular Web Controls should not be visible and when Buttons should not be functional. For a deeper dive into how this works and when you might want to leverage this feature, check out this document on creating dynamic forms based on user input.