Childs


View on Github


Objective

This template shows how to build a bot with deep flows, where users navigate a decision tree using interactive elements like buttons. This is useful when you want to guide the user through a conversation with predefined flows that consist of several steps. Examples of this type of bots include (but are not limited to):

  • Surveys
  • Pre-qualifiers of leads before human handoff
  • On-boarding processes
  • FAQs (when you have a very limited set of options)

Example

In the same way you build a website with a deep tree of routes, in botonic you make use of childRoutes to describe actions that are only accessible if the user is in the parent route.

With the following example you will get an idea of how childRoutes work.

src/routes.js

import Hi from './actions/hi'
import Pizza from './actions/pizza'
import Sausage from './actions/sausage'
import Bacon from './actions/bacon'
import Pasta from './actions/pasta'
import Cheese from './actions/cheese'
import Tomato from './actions/tomato'
export const routes = [
{
path: 'hi',
text: /^hi$/i,
action: Hi,
childRoutes: [
{
path: 'pizza',
payload: /^pizza$/i,
action: Pizza,
childRoutes: [
{ path: 'sausage', payload: /^sausage$/i, action: Sausage },
{ path: 'bacon', payload: /^bacon$/i, action: Bacon },
],
},
{
path: 'pasta',
payload: /^pasta$/i,
action: Pasta,
childRoutes: [
{ path: 'cheese', payload: /^cheese$/i, action: Cheese },
{ path: 'tomato', payload: /^tomato$/i, action: Tomato },
],
},
],
},
]

When the user starts the conversation the bot will ask whether he wants to eat pizza or pasta. You "force" the user to select either one by prompting two quick replies:

src/actions/hi.js

import React from 'react'
import { Text, Reply } from '@botonic/react'
export default class extends React.Component {
render() {
return (
<Text>
Hi! Choose what you want to eat:
<Reply payload='pizza'>Pizza</Reply>
<Reply path='pasta'>Pasta</Reply>
</Text>
)
}
}

In the example, we have the option of pizza or pasta. This is where childRoutes come in. Depending on the choice made, the chatbot will ask different things. When choosing pizza, the chatbot asks if you want sausage or bacon, while with pasta the chatbot will ask if you want cheese or tomato. Because we are using childRoutes, if you try to access the components of the ingredients directly you will not find them. Since the path to access is hi -> pizza / pasta -> ingredient, it is guaranteed you can only choose the ingredient if you have chosen the food first.

Alternatives

In certain cases, it could be preferable to keep your 'routes.js' file as clean as possible. Let's take the previous example and replace the text attributes with payloads.

src/routes.js

import { routes as hiRoutes } from './actions/hiFlow/hi.routes'
import Hi from './actions/hi'
export const routes = [
{ path: 'hi', text: /^hi$/i, action: Hi, childRoutes: hiRoutes },
]

You can achieve the same flow's behaviour by preserving the parent of the previous flow and doing the following modifications in the corresponding action files:

src/actions/hiFlow/hi.routes.js

import Pizza from '../pizza'
import Sausage from '../sausage'
import Bacon from '../bacon'
import Pasta from '../pasta'
import Cheese from '../cheese'
import Tomato from '../tomato'
export const routes = [
{ path: 'pizza', payload: 'pizza', action: Pizza },
{ path: 'sausage', action: Sausage },
{ path: 'bacon', action: Bacon },
{ path: 'pasta', action: Pasta },
{ path: 'cheese', action: Cheese },
{ path: 'tomato', action: Tomato },
]

Note that instead of a payload, you can use a path to trigger an action, for example path="pasta".

Working with URL Parameters

Since every action is linked in the same way as URLs, you can also pass them additional parameters to have a better control of your responses. So, the following piece of code will fill our params object:

src/actions/hi.js

import React from 'react'
import { Text, Reply } from '@botonic/react'
export default class extends React.Component {
render() {
return (
<Text>
What's your favourite flavour?
<Reply path='pizza?ans=spicy'>Spicy</Reply>
<Reply path='pizza?ans=salty'>Salty</Reply>
</Text>
)
}
}

Then you can access its parameters in the following way in src/actions/pizza.js:

src/actions/pizza.js

import React from 'react'
import { Text, RequestContext } from '@botonic/react'
export default class extends React.Component {
static contextType = RequestContext
render() {
if (this.context.params.ans == 'spicy') {
return <Text>Be sure you have the air conditioner turned on.</Text>
} else if (this.context.params.ans == 'salty') {
return <Text>Be sure you have a bottle of water near.</Text>
} else {
return <Text>This option is not available.</Text>
}
}
}
The fallback content to display on prerendering