Skip to content

Bot Builder

When you enter the Bot Builder, you land on the Flows page where you can craft your bot's conversational abilities. Each bot will consist of a number of separate flows that encompass the functionality of the bot. When you create a new bot, no flows will yet exist.

Bot Views

Stackchat has two views to navigate your bot, a graph view and a list view.

Bot Graph View

Click the button in the upper right to switch to list view.

Bot List View

Click the button in the upper right to switch to graph view.

Graph View

In the graph view, information is displayed via colors, icons and arrows. You can freely move the different flows around to achieve a view that best allows you to understand your bot.

Bot Graph View With Colors and Icons

A simple three flow bot in graph view.

The entry flow is displayed as a box with a green outline and checkmark icon.

A flow with a purple outline contains standard Stackchat elements.

A flow with a yellow outline and lightning bolt icon has been connected to natural language processing AI intent.

List View

In list view, you can quickly view four critical pieces information about your flows.

Bot List View

A simple four flow bot in list view.

Flow Name: This can be clicked to change the name.

Entry Point: This determines which flow the user will be directed to upon initially engaging your bot. You can select one flow from the box labeled entry. The selected flow will then display a green checkmark in the Entry Point column.

Entry Point Dialogue in List View

The entry point dialogue and entry point indictator icon

AI Configured: Flows for which natural language processing has been connected, this column will show a yellow lightning bolt icon.

Flow Element Count: Elements are the building block of flows. This shows how many of those elements there are in a flow. This can be used as a rough measure of flow complexity.

When creating flows, be sure to give your flows distinctive names that will allow you to determine each flow's function at a glance.

From the Create Flow button in either the graph or list view, create a flow and give it an appropriate name. If you are in the graph view, click on your newly created flow to name it.

Flow Creation in Graph View

The graph view flow editing slide in.

Elements

Once you have created a flow, you can click on its row (list view) or View Flow button (graph view) to access the Elements interface, which will initially be empty, as no elements have yet been added.

Flow with One Element in Graph View

Graph view of a one element flow exiting to another flow.

Flow with One Element in List View

List view of the same flow.

By clicking the Create Element button, you can create one of four types of elements:

Message Threads: Message Threads allow the bot to exchange text, emoji and images with the user.

Branches: Branches allow your bot to direct users to different flows or elements based on what the bot knows about the user.

Action Sequences: Action Sequences allow you to perform advanced bot functions.

Cloud Functions: Cloud functions allow for advanced functions that integrate your first-party or third party APIs. They consist of custom code and are stored on Stackchat servers.

Create Element Dialogue

The Create Element button is in the same place in list view.

Once you have created your element, you can view information in the center panel of the list view.

Name: Name you assigned to the element. You can change the name by clicking on its title in the right column.

Type: Type of element. Either Message Thread, Branch, Action Sequence or Cloud Function.

Continue To: Displays which Flow or Element this Element sends the user to after completing its actions.

Entry Point: Indicates with a green icon whether this flow is the entry point to the flow.

Elements in Graph View

A 1. Message Thread, 2. Branch, 3. Action Sequence and 4. Cloud Function in graph view.

Create Element Dialogue

A 1. Message Thread, 2. Branch, 3. Action Sequence and 4. Cloud Function in list view.

Message Thread

Message Threads are a basic element used to convey static information to your users.

Upon creating an element, you will see an empty field awaiting your message input.

Click the + icon to begin creating your message.

You have three options for input types:

Text: A simple text message from the bot to the user.

Image: Supports .png and .JPG files up to 650 MB.

Input: Creates a message thread that allows users to input data to be remembered by the bot.

Message Element Dialogue Open

The text, image, and input selection dialogue is the same in list view.

Text Messages

Text messages allow for two additional types of input aside from basic text.

The first is Emoji. The emoji set contains emoji up to version 5.0. Please note that not all emoji are available through search. For emoji not found in the navigation, they can be copy and pasted from a source such as Emojipedia.

Emoji Search Panel Open

Cat emoji are merely one option, albeit a good one.

The second are slots. This allows you to use the data stored in slots to pull relevant information about the user into the conversation. They can be selected from the list or typed in the format ${SLOTNAME}.

Slots Selection Panel Open

A slot has been chosen and shows up in the correct format.

Images

You can also insert images into the conversation. Supported file types are .png and .jpeg and can be sourced from your computer or from a URL on the internet. The maximum file size is 650 MB, so limitations are unlikely, but be aware that using large file sizes will impact performance for end users.

Images are automatically resized on the fly to suit the user's viewport.

Image From a URL

An image appears in the chat after copy-and-paste and hitting Add URL button.

Input

You will likely at times wish to directly ask your users for information about themselves, such as their name, phone number or other information. Use the Input option to create a User Input Group.

Select Input from the + button and a bubble will appear on the user side of the chat.

Creating a User Input Group

The User Input Group has been created. Click it to enter.

Click the new chat box and you will be able to set up the prompt(s) and where to store the data.

Inside the User Input Group dialogue, you can add all the necessary details to make your query work.

Display Name: An easily recognizable name for your Input that users will only see if you require confirmation.

Prompt: The question to ask the user leading to the data point you're looking for.

Add Slot to Group: Choose one the Custom Slots you have created to place the user data into.

Require Confirmation: Click the box to enable requiring confirmation from the user that the data is correct.

Creating a User Input Group

An example of a completed User Input Group.

A User Input Group can have one or more slots attached to it. When Require Confirmation is checked, the bot will ask the user to confirm that all answers collected in the User Input Group match user expectations.

Flow Element Require Confirmation

*How Require Confirmation appears to a user. *

Multiple Choice Slots are a special case that require additional attention when building a bot. The User Input Group dialog is where the available choices are inputted.

When you add a Multiple Choice Slot to the group, a new field will appear under Prompt, Choices.

Click the plus to add a multiple choice option.

Each multiple choice options has three fields to fill after you click:

Reply Icon: An icon that represents the choice. (Optional)

Reply Value: The response the system will return to you. If left blank, it will be the same as Reply Response. (Optional)

Reply Response: The label on the button for this response.

Once you have entered all the Choices you wish to offer users, close the dialog.

Adding Multiple Choice Options

Multiple choice options are given as part of the User Input Group.

Action Sequences

Action Sequences allow for three types of advanced functionality. Several Actions can be strung together for greater flexibility and power.

Set Slots: Use Set Slots to store data to Custom Slots that cannot easily be picked up through User Input Groups. For example, this is great for storing information in Boolean slots that demonstrate behavior that users have performed, such as visiting a Flow or Element.

To use Set Slots, select it from the + menu. Then select the Custom Slot you wish to set a value for. You can change the title of this Set Value action to reflect its purpose.

Then enter the value you wish to fill that Custom Slot with. Make sure that the inputted value matches the type of slot you are using. E.g. fill a Boolean with a yes or no or fill a date\time with a date and/or time.

Setting a Slot To Yes

I now have a slot filled with a yes value.

Clear Slots: Sometimes Custom Slots will need to be cleared to accept new user input. Use Clear Slots at key points throughout your user experience when you wish to allow users to replace old slot data with newly inputted. This should be proactively used before a user inputs new data, as Custom Slots will not be overwritten automatically.

Select Clear Values from the menu and rename this action as you wish.

Flow Action Sequences Clear Value

The selected value will be cleared when entering this element.

Be judicious in your use of this functionality, as once the slot is cleared, the data in that slot is gone.

Trigger Analytics: While Stackchat automatically records keiy analytics data in your chosen analytics suite, you may at times wish to record more. Please see the Analytics section to see all automatically generated analytics data and events. For data and events not captured by our out-of-the-box functionality, you can use Trigger Analytics to log it.

Press the + button and select Trigger Analytics.

Give your event a unique name that describes its function. Select the property/variable from your analytics suite to which you wish to assign this event. Finally add the data you wish to send to your analytics suite in the value column

Flow Action Sequences Trigger Analytics

This triggers an analytics event for when a user sends an emoji to the bot.

The selected action will now be recorded in your analytics suite.

Once a Message Thread has achieved its purpose, the user can navigate to another Flow or Element using two methods: Jumps and Navigation Menus.

Clicking on Continue To jumps you directly to another Flow or individual Element within the current Flow.

Flow Element Text Message Jump To

Click Element to see the elements you can jump to.

The Navigation Menu allows you to create links to whatever Flows and/or Elements you want your users to aparts of the chatbot that you feel they should be able to access quickly.

Flow Element Text Message Nav 1

A menu fulfills the need to create a populated element even without additional text, branches or action sequences.

First add the Prompt. This will be the call to action seen by the user.

To add links to the Navigation Menu, click the + icon.

Each menu item requires three data points:

Navigation Icon: An icon to represent the navigation option. Optional.

Navigation Text: Appropriate text to identify the option.

Navigate To: The destination for the menu item. It can be a Flow or an Element inside the same flow.

Flow Element Text Message Nav 2

Icon images are inserted in the same way as message thread images.

Tip: To easily replicate a Navigation Menu, it can be copy and pasted to any location you wish in the bot via CDML. Simply find the area labeled quick_nav, copy the section and paste it where you want it to go. It will now show up both in CDML and the visual interface.

Flow Element Navigation Menu Replication

Be careful to make sure all tabs are identical.

Branch

Stackchat Branches allow for the creation of multiple paths for users based on data that the bot knows about the user.

One or more conditions can be created with users for whom the criteria match sent to one Flow or Element and users for whom the criteria are not met sent to another.

Click the + icon to add a condition.

Flow Element Branching

Select and or or for multiple part branches.

Then you will be able to select one of your Standard or Custom Slots as your variable.

Flow Element Branching Variable Select

Meta and Custom Slots are available for branches.

After that, you can select the condition you want to branch based on. The options are Is [text you wish to match], Is Not [text you wish to match], Contains [text you wish to match], Does Not Contain [text you wish to match], Begins With [text you wish to match], Ends With [text you wish to match], Is Not Empty, and Is Unknown.

Flow Element Branching Condition Select

Not all conditions are available for all slot types.

You can create additional conditions and connect them with And or Or logic. And should be used if all conditions must be met, while Or should be used if only one of the conditions will suffice.

Once you are satisfied with your condition or conditions, you can then assign where users for whom the criteria match and don't match are sent. You can choose any Flow in your bot or an Element within the current Flow

Flow Element Branching Location

Send users to the desired location in a new flow or an element in the current flow.

To create more complex logic chains, you can connect multiple Branches together.

Cloud Functions

Cloud Functions allow you to create custom interactions that allow users to interact with your data and content.

Developers create the functions and upload them to Stackchat. Once uploaded these functions can be accessed by your bot.

The types and appearances of chatbot interactions that Cloud Functions provide vary based on the channel(s) your bot is active in.

Error Messaging

Stackchat's built-in error messaging alerts you to problems with your bot that will prevent it from publishing correctly.

Error Console

The red circle will increment up for each error detected.

When Stackchat detects an error, it will add a badge to the Errors button, incrementing up for each error that occurs. As long as there are no errors, the button will be greyed out, and it will not be possible to click it.

Error Console Open

Two errors showing in the errors modal.

Clicking the Errors button will open the panel showing all the errors that you have triggered. You can also see any current errors in the CDML view, if you wish to fix it there.

Error Console CDML

The same errors showing next to the CDML.

When showing an error, Stackchat goes from high level to low level, displaying the title of each flow and element:

Flow -> Element -> Sub-Elements

This allows the user to quickly identify where the error is located and rectify it.

Flows and Elements are also displayed as hyperlinks, so clicking on them will take you directly to the Flow or Element.

Publishing

At any point in the creation of your bot, you can Publish your bot and begin testing to ensure things are working as intended.

Publishing

Publishing generally takes around 30-60 seconds.

The Publish button will change to Publishing.. and a toast will appear in the upper right. If the publish is successful, the toast's edge will turn green and the Publish button will return to its original state.

Publish Complete

A successful publish.

If the publish fails, the toast will show a red edge. If you have a bot that fails to publish but shows no errors, please contact Stackchat support!

Publish Failed

A failed publish. You should not see this, but one never knows.

When you first publish your bot, Stackchat creates a Web Messenger Integration and creates a chat button that opens up the Preview window.

Preview Available

The preview chat button.

Click the preview button to interact with your bot.

Preview Up

A chat preview window in action.