Skip to content

Customize Main Chat Flow

Design page

As shown above, an AI chatbot created based on a template already contains a default chat flow, which consists of one or more topic blocks shown on the left side of the screen. Each topic block often represents a Juji built-in mini dialog that enables a chatbot to automatically carry on a multi-turn conversation with users.

A chat flow is often defined for a chatbot to achieve specific goals. For example, a typical AI sales helper chatbot is associated with a chat flow that asks a user several questions and then use the gathered information to offer personalized services, such as making product recommendations.

Since each chatbot is made for its own missions, you can easily customize a chatbot by altering the chat flow or any topic blocks in the flow.

Add a Topic

One can add a topic to an existing chat flow in one of the two ways:

  • Click on the round green + button below the Welcome card to add a topic at the beginning of a chat flow. You can also use the same green + button above the Wrap-up card to add a topic at the end of a chat flow.

  • Mouse hover any topic card (e.g., How are you doing?) and then select the round green + button to add a topic after the current topic card.

add a
topic button

add a
topic type

As shown above, Juji currently supports two types of topics:

Chatbot Request

This is for a chatbot to ask a user a question or perform a certain action. The chatbot must wait for a user to respond to such a request before moving the conversation forward. Currently, Juji supports several types of chatbot request as described below.

Chatbot Message

This is for a chatbot to send a message to a user without waiting for a user's response. Currently, Juji supports several types of chatbot messages as explained below in detail.

IMPORTANT TIP If you intend to have your chatbot wait for a user input before moving on, make sure you choose Make a Request. Otherwise, your chatbot simply ignores any user input even if the message is worded like a question. As the example shown below, T6 will not wait for a user's input but T5 will. Note the chat icon appearing on T5, indicating T5 is a "true" question.

Pseudo question

IMPORTANT TIP

To decide which chatbot request to use, please check out this design tip.

Edit a Topic

No matter whether you wish to configure your chatbot to make a request (aka asking users a question) or send a message, once a topic is added, you can then edit the topic in four sections:

  • Chatbot Content. This is to customize a message that a chatbot will send to your users.

  • Chatbot Responses (only for request topics). This is to customize a chatbot's response to a user's reply to a question asked by the chatbot.

  • Chatbot Actions. This is to customize a chatbot's actions prior to or after the chatbot send users a message (e.g., posing a question or displaying an image).

  • Topic Settings. This is to customize various settings related to a request or a simple message.

Chatbot Content

You can customize a chatbot's message(s) to users during a chat. Please refer to design best practices for composing the content of such a message. Below lists various message editing options.

chatbot message editing options

Below we use a set of examples to show how to use each of the editing options and how the content would appear in a chat on the web or Facebook Messenger.

  • Add an image Click on the "add an image" icon to insert an image into a chat message. This allows an image to be uploaded and displayed in a chat.

insert an image into a chatbot message

chatbot message including an image

The screenshot below shows how an image is displayed in a chat. It is displayed right before or after a text message.

display an image in a chat

  • Make a bullet list Select part of the message text and then click on the button "Make a bullet list" to convert the highlighted text into a bullet list as shown below.

display an image in a chat

  • Insert a hyperlink A chatbot can send a message with a URL link so users can follow the link to access more information. Select part of the text message (FAQ list) and then click on the Create a hyperlink of highlighted text button to add a URL.

display an image in a chat

During a chat, the content of the hyperlink can be accessed in one of the two ways: in a separate browser tab or within the same window where the chatbot sits. When you insert a hyperlink, you can select which option you'd prefer.

display an image in a chat

The clickthroughs of any inserted hyperlinks are tracked automatically. This means that a chatbot owner can view which hyperlinks are clicked on and how frequently, which provides the indication what content your users might be interested. See "Reports" dashboard to view the clickthroughs of hyperlinks.

  • Call an API A chatbot may need to access information stored in a third-party system (e.g., a CMS or CRM) in order to communicate information tailored to aspecific user. For example, if a prospective student asks about his/her application status, the chatbot needs to access Salesforce database to retrieve the requested information. To do so, you can insert an API call to access the third-party information. Specifically, just click on the "call API" button and then follow the API call pop-up to insert the API call details.

display an image in a chat

Your IT personnel often knows which API is supported and the syntax of such API calls. You don't need to write any code, you just need to get the API call details from them and copy & paste them into the API pop-up window. Here is a Youtube Video Tutorial on how to use APIs to connect your chatbot with other systems.

  • Add a function Use the "Insert a function" button (fx) to add a function, such as (user-first-name) to personalize the chatbot message or make a dynamic message (e.g., based on a user's input). Watch this Youtube video tutorial on how to use various functions including external functions to customize a chatbot message.

insert a function in a chatbot message

  • Insert an attribute During a chat, a chatbot may gather bits and pieces of information from a user (e.g., the number of people, date and time info) in order to perform a certain task (e.g., making a reservation). As a good paractice, it is always desirable to repeat and confirm such information back to the user. To do so, you can insert an attribute in a chatbot message since user opt-in information is auto-captured in an attribute during a chat.

As shown the example below, click on the "Add attribute" button insert attributes that capture user input regarding a reservation.

insert attribute in a chatbot message

Attributes are very powerful elements that can be used in chatbot design and help a chatbot learn new knowledge, maintain a memory, and accomplish complex tasks. Watch this Youtube Video Tutorial to see how attributes can be used in creating a powerful AI chatbot.

  • Add quick texting messages In certain parts of conversation, you may want to provide users with a "quick texting" convenience. This means, when a chatbot asks a question, it also provides a couple of quick reply options, which a user can just click on the text to reply vs. type the text and then submit. This convenient reply mode is useful especially on a mobile device. The main difference between "quick texting" and radio buttons is that "quick texting" still allows users to provide other forms of responses while radio buttons take only button clicks. It provides the interaction convenience while remaining open to diverse user responses. We recommend that quick texting be used sparsely because a good conversation should not be dominated by "click to text".

Click on the button "Add quick text message" to add up to 3 quick messages.

enable a quick reply message for users to click to reply

define up to 3 quick reply messages per topic. Here two quick text messages are defined: HELP and RESTART

Here is how "click to text" messages look like in a chat:

how quick reply messages look like in a chat: HELP and RESTART

  • Add a paraphrase To create a natural and rich conversation, you can also add paraphrases of a chatbot message, especially if such a message needs to be repeated in the same conversation. For example, when a chatbot asks users a question, if the users don't anwer the question, the chatbot may need to repeat the question. In such cases, paraphrases could help make the repetitions sound more pleasant and natural.

Use the + button on the right of the text bubble to add paraphrases of the message (see the screenshot below). The paraphrases will be selected by your chatbot randomly to send during a chat. See best practices for good uses of paraphrases.

add paraphrases of a chatbot message

You can also view all the paraphrases using the "down arrow" button:

view paraphrases

Chatbot Responses

You can also customize chatbot behavior based on user responses. The green "Customization" button shown below can be used to add a group of chatbot actions under one condition (trigger). Refer to the design best practices for defining specific conditions and corresponding custom chatbot actions.

design
chatbot actions

In a natural conversation, different user behavior should drive different chatbot actions. Juji supports the customization of chatbot behavior in many ways. This section will use a set of concrete examples to show how to easily customize a chatbot behavior based on application needs.

Use Juji Built-in Dialog

Unlike other chatbot platforms, Juji has a dialog library that contains thousands of built-in mini conversations. When you add a topic that is a free-text request, Juji automatically uses the request label to search its dialog library and retrieve a matched mini conversation for this request.

For example, if you enter Have you ever worked at a restaurant? as the request label, Juji will auto retrieve the matched mini conversation `This is to ask a user yes/no question' (see below)

an example label

an example label in a topic use

In this case, the built-in dialog will automatically process a user's positive or negative responses and enable you use the auto-detected expressions to direct the user to different paths. In other words, you don't need to worry about how to define triggers to catch highly diverse users' positive or negative expressions.

In contrast, if the request label is What's your favorite fruit, the retrieved mini conversation would be Ask a user about his/her favorite thing (see below)

example label

example topic associated with a label

In case that Juji-retrieved mini conversation is not what you want to use, you can always find a different built-in dialog (click on the green search icon as shown above). Below is a screenshot showing the Juji dialog library, where you can browse and use keywords to search for a suitable, built-in dialog to use.

search a
topic

A built-in Juji dialog is very powerful as it helps handle diverse user behavior automatically. For example, if you wish to collect users' contact information, the built-in dialog Ask a user contact info automatically handles various cases, such as user already opt-in contact information or potentially erroneous input.

Ask
user contact info

Use Juji Built-in Attributes

In certain built-in dialogs, Juji automatically creates a set of built-in attributes to capture processed user input. For example, if a mini dialog talks about the weight of something (e.g., How much does your dog weigh), Juji automatically parses user input to the question and stores the parsed user input into two attributes: weight-amount and weight-unit.

Click on the green attribute icon to view the attributes associated with a built-in dialog (see below).

view system attributes within a topic

You can also edit the attribute names to avoid potential conflicts. For example, your chatbot asks two questions regarding weight, one for dog and the other for cat. You would want to change the default attribute names to dog-weight-amount and cat-weight-amount, respectively to distinguish user answers to these two questions.

Pin a Matched Dialog

As described above, Juji uses the request label you entered to search and find a matched built-in dialog. This means that changing your request label will automatically trigger Juji to find a different matched dialog. To avoid such situations, you can use the green pin icon to pin a found dialog (see above). This means that changes in your request label will no longer trigger Juji to search and change the matched dialog automatically.

Besides reusing a Juji built-in dialog, you can always customize a built-in dialog. Next we use a set of examples to show how to customize built-in dialogs.

As shown below, each customization block includes two parts:

  • IF block defines the condition (also known as trigger) under which the custom chatbot actions will be performed.

  • THEN block contains one or more custom chatbot actions.

design custom chatbot actions

Customize IF Conditions

Since a free-text chatbot request may elicit unanticipated, diverse user behavior, currently Juji supports five types of IF conditions to capture user behavior:

  • is-similar-to If a user input is similar to one or more sentences or phrases. One can also specify the similarity threshold. By default, the threshold is set at 80%.

add a is-similar-to
trigger

  • contains-keywords If a user input contains one or more keywords. Unlike is-similar-to condition, this condition requires a precise match with the stem of at least one specified keyword.

add a contains-keywords trigger

  • contains-sentiment If a user input contains a positive or negative sentiment.

add a contains-sentiment trigger

add a matches
trigger

  • is-anything-else If a user input matches anything else. This is basically the default condition.

use a default condition

One can check on the box next to the STORE MATCHED INPUT to store the matched input into a custom attribute.

As shown below, if a user input contains keywords, such as milk, egg, or cheese, a custom attribute like-protein can be created to store the matched keyword for each user.

add custom
attributes

Custom attributes can be used for many purposes, such as customizing a chatbot message (see below) or indexing audience information (e.g., showing all users who like-protein).

Note that for a choice request, since a user's input must be one of the choices, there is just one type of IF condition, the choice made by the user.

IMPORTANT TIP

To decide which type of trigger (chatbot condition) to use, please check out this design tip.

Customize THEN Actions

As shown below, when a IF condition is met, one or more custom chatbot actions can be defined:

customize chatbot actions overview

customize chatbot actions overview

  • Quick Acknowledgement This defines a simple text message that a chatbot can use to acknowledge a user. This simply sends a message without waiting for a user's response. This means that any follow-up question expression in this message won't be able to elicit any user response (unless it is a reflective question without requiring any user response). If you wish to ask a follow-up question, add a Follow-up Requestas described below.

  • Extended Reply This defines a full chatbot message, including image and paraphrases, that a chatbot can use to make an extended reply. This defines a full topic - a message topic.

  • Follow-up Request This defines a chatbot request that allows the chatbot to ask a follow-up question. This defines a full topic - a request topic.

Chatbot Actions

Besides customizing a chatbot's response to user input, you can also customize a chatbot's actions before or after the chatbot sends a message to users.

customize chatbot actions prior to sending a message

customize chatbot actions after sending a message

Use these actions to run background options. For example, a chatbot collects a user input (e.g., date of birth) and wants to check whether such an input is consistent with the user's previous input. To do so, one can customize a chatbot's action (post action) after collecting the user's date of birth. This post action will compare the current user input with the previous input. Sometimes certain actions may need to be performed before a chatbot sends a message to user. For example, if a chatbot wants to calculate a tax on a particular purchase, it may need to retrieve the tax rate per the user location. In this case, one could define a custom action (prior action) to retrieve the tax rate before sending a message to tell the user the total purchase price.

Topic Settings

You can also customize one or more topic-specific parameters, such as whether a "request" topic requires user response and the length of user responses. Please refer to best practices to fine tune these parameters.

design topic settings

Delete a Topic

To delete a topic, mouse hover the corresponding topic card listed in the left topic panel. Then click on the red trash can icon to delete the topic. A deletion is permanent and cannot be undone.

delete a
topic

Clone a Topic

To clone a topic, mouse over the corresponding topic card listed in the left topic panel. Then click on the green clone icon to clone the topic. The cloned topic will retain all behavior of the original topic.

clone
a topic

View Topic Relationship

Although the chat flow is presented a list of topics, but the inter-connected topics actually form a graph. When the complexity of the chat flow grows, the need to see the relationship among topics grows also. Juji Studio provides two convenient tools for users to visualize and examine the topic graph. The two icons on top of the topic list leads to a text and a graph view of the topic graph.

Chatflow topic icons

View Topic Text List

Topic text list icon

Click on the Topic Text List icon, you will see all the topics represented in a textual format in a new browser tab. You can copy or download these text for detailed analysis.

Topic text list view

View Topic Graph

Topic graph icon

Click on the Topic Graph icon, you will see all the topics represented in a graph visualization in a new browser tab. Each node in the graph represents a topic. You can drag the nodes around, pan and zoom in/out the graph. Click Reset button to change the graph layout. Click Center button to re-center the viewpoint. Click Legend button to toggle on/off the legend of the graph. You can also change how long you want the node label to be by choosing a Label Size.

Topic graph

When you click on one of the graph nodes, not only the node turns yellow, the corresponding topic editor in the design view is also selected and open. So you can use the topic graph as a convenient topic navigator for editing topics.

Here is how to do it: first drag out the topic graph tab as a window, then lay this window side by side with the design view, or lay it top and down with the design view. The idea is to show both windows at the same time, so you can use the topic graph to navigate between topics for editing.

View topic graph and topic editor at the same time

Type of Chatbot Request

Although one can write any type of conversation topics in Juji, below we list the types of chatbot requests currently supported in Juji Studio.

displays a list of chatbot request types to be described below

Free-text Request

Perhaps the most used request for an AI chatbot is to pose free-text, open-ended questions during a chat. Such a question can elicit diverse and detailed user responses to gather in-depth insights and better understand users' needs and wants.

As shown below, a free-text request includes the following:

  • Label Typically, a label is the short form ("stem") of a chatbot request. Although it automatically takes the form of the main message, it is good to give a sensible label as it is also used for multiple purposes (see best practices).

  • Main Message (required) This is the question that users will see in a chat. Instead of asking a question directly, a good message should also contain the context or motivation of the asking.

  • Re-asking Messages (optional) During a chat, a user may not always respond to a chatbot question. In such a case, a chatbot may want to repeat the question. One can add (green +) paraphrases of a request and indicate whether such a paraphrase can be used to re-ask the question by checking the Re-asking Message box.

See best practices on how to phrase free-text questions in a conversation.

add a
free-text question

Choice Request (Radio Buttons)

One of the popular chatbot request is to ask a user to make a choice. Below is an example of a single answer, multiple choice request, also known as radio button question, where a user can select only one choice.

As shown below, this type of choice question contains:

  • Main Message (required)

  • Option Items (at least one item is required to be selected by user)

define a radio button question

define various options of a choice question

In addition to adding regular option items, Other option can be added to let a user specify additional text. One can also indicate whether to treat all the option items as numbers. Numeric choices can be used to define chatbot conditions involving numeric operations, such as >= and <. See examples below on defining chatbot conditions. There are other options that can be set to control the display of choice items (e.g., displaying the items in a random order or horizontally).

Depending on where the chatbot is deployed, the look of a choice question may be different.

A choice question displayed in a web-based chatbot:

preview a web-baed radio button question

A choice question displayed in a web-based chatbot with items laid out horizontally:

preview a web-based radio button question with a horizontal display of choice items

A choice question displayed in a Facebook Messenger chatbot:

preview a Facebook choice question in Facebook Messenger

In Facebook Messenger, a user may enter a text message instead of clicking on a choice. In such a case, the chatbot will handle the user text input first. Since a Juji AI chatbot tracks a conversation context, it will repeat the question, if the choice question is a required one.

Below is an example chat where the user asks a question intead of making a color choice. The chatbot answers the user question and then repeats the choice question.

Handling user digression during Facebook choice question

Choice Request (Checkbox)

Similar to the radio buttons shown above, another popular choice question is multi-answer, multiple-choice question, also known as checkbox question. This type of choice question allows users to check one or more boxes as the answer.

Below shows how to define a checkbox question.

define a checkbox question

This is how a checkbox question looks like in a chat:

a checkbox question displayed in a chat

Facebook Choice

Semantically, a Facebook choice question is essentially the same as a regular choice question except that it takes the form of Facebook buttons in a Facebook Messenger chatbot. This type of request will not be displayed in a web-based chatbot.

As shown below, a Facebook choice question includes:

  • Title (required) This is the main asking message.
  • Subtitle (optional) This adds more information to the question.
  • Button (at least one button is required)
  • Image (optional) An image URL can be added with the question.

add
Facebook choice buttons

Here is how a Facebook choice looks like in a Facebook Messenger chatbot:


preview Facebook choice buttons

Facebook Email

This special request enables a chatbot to gather opt-in user email in a Facebook Messenger chatbot. A user must click on the displayed email to confirm (opt-in) his/her email. A user can also text an alternative email. To allow users to skip this question, set this question not required in the topic settings.

add a
Facebook email requestion

Type of Chatbot Message

Again, one can write almost any type of chatbot messages (e.g., multi-modal, information graphics, etc.), below we list the message types currently supported by Juji Studio.

displays a list of message types to be described below

Web Media Card

For a website chatbot, one can define a multimedia message with a combination of text, image or video, and URLs. As shown below, the web media card contains:

  • Image or Video (required)
  • Text Message (optional)
  • Hyper Link (optional, up to 3 URL links)

add a web
media card

Below is the preview of a web media card with an image:

preview web media

Sometimes, one may wish to display several images or videos side by side like a carousel. This can be easily done in Juji Studio by simply clicking on the "+" button at the end of a web media card to add additional cards. One can add up to 5 media cards and they will be displayed as a carousel of images/videos in a chat.

An image carousel:

an image carousel in a chat

A video carousel:

a video carousel in a chat

FB Media Card

For a FB Messenger chatbot, one can define one or more FB Media cards to display a combination of text, image, and URL links. As shown below, each card contains:

  • Title (required field)

  • Subtitle (optional)

  • Image (optional image URL)

  • URL Buttons (up to 3 links per card)

Facebook Media Card

Currently one can define up to three FB Media cards. In a Facebook Messenger window, these cards will show up in a carousel.

FB media card carousel

Note that FB Media cards will not show up if the chatbot is deployed on a website.

Special Topics

To help jump start the design of a chatbot, Juji has made two special topics: * Welcome Topic. This is the first topic in all Juji AI assistant templates. It cannot be removed. It sends the first chatbot message to users when a chat session starts. One can however customize the welcome message.

  • Wrap-up Topic. This is the last topic in all Juji AI assistant templates. It cannot be removed. It sends the last chatbot message to users when a chat session ends. One can customize the wrap up message as well as the chat ending options.

Welcome Topic

No matter whether you use a blank template or a task-specific Juji template to create a chatbot, every chatbot comes with two pre-built topics, the Welcome topic that starts a conversation and the Wrap-up topic that ends a conversation.

To start a good or warm conversation, you may wish to edit the default messages in the Welcome topic to suit your context. Please refer to this recorded webinar to see how to phrase custom welcome messages for different use cases.

Suspend Current Chat

For various reasons, you may want to pause a chatbot before letting it interact with your audience again. You can do so easily in the Welcome topic:

  • Click on the Welcome card

  • Click on the slider under the welcome message (on the right panel) to suspend a chat. See the screenshot below.

  • Edit the welcome message accordingly to inform users about the suspension/pause.

Suspend chat

IMPORTANT TIP If your chatbot is deployed via a web URL, you may also want to change the greeting message on the web cover page to inform future users about the pause/suspension.

Wrap-up Topic

Another Juji built-in topic for every chatbot is the Wrap-up topic. One may want to customize a chatbot's ending behavior. For example, a chatbot that conducts an interview or conversational survey may want to end the conversation once the interview or survey is done. In contrast, a customer support chatbot must hang around all the time to serve customers.

To customize the ending behavior, click on the Wrap-up topic, the last topic in the left topic panel.

Wrapup topic to end a chat

Then click on the text bubble or the pencil icon to edit the topic:

Option 1: Make a chatbot stick around

customize end of chat: option 1

Option 2: End a chatbot

customize end of chat: option 2

If you decide to end a conversation, you also have the option to redirect the ending to a custom URL of yours. Just enter the URL where you want the ending will be.

What's Next

Once a chatbot is ready, you can deploy it onto a website or a Facebook page. Please check out Chatbot Deployment to deploy your AI chatbot. If you wish to further customize your chatbot, such as its capabilities to handle user questions, please refer to Customize QA. If you wish to customize the chatbot's persona or other settings, please refer to Customize Chatbot Persona.