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 Flows

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

You can quickly view four critical pieces information about your flows:

Flow Creation

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.

Flow Entry Point 1

Flow Entry Point 2

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.

Tags: You can tag your flows to help organize them.

Elements

Once you have created a flow, you can click on its row to access the Elements interface, which will initially be empty, as no elements have yet been added.

Flow Element

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 data or third party APIs. They consist of custom code and are stored on Stackchat servers.

Flow Element Type

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

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 or Cloud Function.

Tags: Tags you have assigned to your element for organizational purposes.

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

Entry Point: Indicates which flow or element the user will be sent to upon completing the flow.

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.

Flow Elements Options

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

Flow Element Emoji

The second are slots. This allows you to use the data stored in slots to pull relevant information about the user into the conversation.

Flow Element Meta Slots

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.

Flow Element Image

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 get this option.

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

Flow Element Custom Slot 1

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

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

Flow Element Custom Slot 2

Display Name: An easily recognizable name for your Input.

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.

Flow Element Custom Slot 3

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

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.

Flow Element Custom Slot Multiple Choice

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.

Reply Value: The response the system will return to you. May be the same as Reply Response.

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.

Flow Element Custom Slot Multiple Choice 2

Action Sequences

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

Flow Creation IMG Action Sequences Dropdown

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.

Flow Action Sequences Set Value 1

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.

Flow Action Sequences Set Value 2

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

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 analytics data in your chosen analytics suite. Please see the Analytics section to see all automatically generated analytics events. For 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 something something to value.

Flow Action Sequences Trigger Analytics

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 Jump To takes you directly to another Flow or individual Element within a Flow.

Flow Element Text Message 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

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.

Navigation Text: Appropriate text to accompany the icon.

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

Flow Element Text Message Nav 2

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

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

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

Flow Element Branching Variable Select

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

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

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 platform you use.

Error Messaging

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

Error Console

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

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

Error Types

Stackchat shows a variety of errors, most of which fit under the group "invalid-user-input". These errors are a results of incomplete or incompatible user inputs.

When showing an error, Stackchat uses the format:

Flows[0].elements[1].messages[3].items[0].choices[0]

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

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

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

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

When you first publish your bot, Stackchat creates a Web Messenger Integration. This opens up the Preview window.

Preview Available

Click the Preview button to interact with your bot.

Preview Up