Text Responses

The first type of Chat Element we will look at is Text Responses. These are simple chat elements where you can use simple text messages as responses.

You can use this chat element by opening Bot Responses and going to the Bot Responses section within it. Here you can click on the Tap to Add button to create a text response.

After you click the button, a new menu should slide out with an input field where you can enter the text you want to respond with.

Sample Json for simple text element

{
 "text": "simple text message",
 "type": "TEXT",
 "data": {
 "quick_replies": []
 }
}

Sample Output

Text Element

Quick Replies

The second type of chat element we will look at is Quick Replies. Quick Replies provide a way to present buttons to the user. The users can tap these buttons to send a message to the bot.

Once the users tap on these buttons they automatically disappear and a text message gets sent by the user.

There are two ways to use Quick Replies:

The Quick way to add Quick Replies

The first way is by clicking on the + Add Reply. This is useful if you have already added other chat elements as responses and want to add 'Quick Reply' options at the end of the responses.

Once you click the + Add Reply button, you will see a new button show up next to it. Here you can add the message you want to add in the quick reply. The message added here will be shown as the button text. It is also the message that will be sent by the user when they click the button.

Advanced options to add Quick Replies

The second way to add quick replies provides you with more configuration options.

You can add quick replies using this option by clicking on the + Add Reply. This should slide a menu for adding HSL elements. Inside this menu the first option is the Text & Quick Replies option.

Using this option we can add some text followed by Quick Replies. To do this click on the Text & Quick Replies option. This should open a new menu. In this menu you can add any text you want in the Bot Responses input field.

After adding the text you can click on the + Add Quick Reply link below the text field. This should create a new quick reply with the default name as Quick Reply 1. If you add another quick reply it will be called Quick Reply 2 by default and so on.

You can edit the quick reply by clicking on it. Or if you have accidentally added it, you can delete it by clicking on the bin icon next to it. Once you open the quick reply for editing you will see three fields.

Quick Reply

Using the first field you can edit the quick reply text. Whatever you put in here is what the user will see as the title of the button. This will also be the text message that will be sent on behalf of the user.

Add a different user message

In some cases, you might want to send more information than what can fit inside a button title. For example, you might want to send a text message like "Yes, I would like to proceed with the booking". You can't put such a long message as the title of the button.

In such cases, we can use this option to send a different user message. Just click on the + Add a different user message link and enter the message you want to send.

Add a different Payload message

Additionally, in few cases, you might want to send data that you don't want the user to see in the chat window. Your bot backend might need this information and you don't want to add all the info to the user message in the chat window.

For example, we might want to send the flight booking details in the user message like "Yes, I want to proceed. {from: Goa, to: Mumbai, date:31/03/2019, passengers:1}". Showing this message in the chat window is a bad experience but our backend still needs the information.

In such cases, we can solve this option by clicking on + Add a payload message. Here you can add the message that the bot backend will receive when the user taps on the button.

Reordering Quick Replies

Sometimes you might want to change the order in which the quick replies are shown to the user. You can do this by using the hamburger menu on the left of the quick reply.

Just click and hold the hamburger menu and drag the quick reply to reorder it.

Sample Json for text element with quick replies

{
 "text": "Hi ! There, this is a quick text message with some quick replies.",
 "type": "TEXT",
 "data": {
 "quick_replies": [
 {
 "actionable_text": "Show another quote",
 "is_default": 0,
 "type": "TEXT_ONLY",
 "payload": {
 "message": "Show another quote{task}",
 "gogo_message": ""
 }
 },
 {
 "actionable_text": "Thanks",
 "is_default": 0,
 "type": "TEXT_ONLY",
 "payload": {
 "message": "Thanks",
 "gogo_message": ""
 }
 },
 {
 "actionable_text": "❌ Stop updates",
 "is_default": 0,
 "type": "TEXT_ONLY",
 "payload": {
 "message": "❌ Stop updates{reminder_list: 170, user_id: 202308, task_name: Motivational Quote, offset: 0, api_name: exotel }{task}",
 "gogo_message": ""
 }
 }
 ]
 }
}

Sample Output

Quick Replies