Response Designer (Extended Guide)

Businesses need to have a virtual presence across multiple channels and be present where their customers are. It is essential that the conversations with customers feel native to the channel and leverage channel capabilities for the best possible user experience.

Response designer provides a quick and easy way to configure responses using a GUI-based response designer. There are two types of responses that the bot developer can configure for intent or article:

• Conditional responses - It enables the non-developers to construct the responses, which the bot must respond to consumers.
• Code snippet - It enables code-savvy developers who prefer using python syntax to configure responses for intents or articles.

Webex Bot Builder response designer was devised to ensure that the user experience is channel-aware and channel-specific for the same bot on different channels. To make it more intuitive to define these channel-specific responses for a bot, we have refreshed the UI and UX to separate out different channels into individual tabs as shown below.

Web as a channel will always be present and there will be no option to delete it as this is needed for using a bot’s preview. In cases where a developer chooses to not write additional logic for channel-specific responses, the Web response will be considered as the default response and will be sent to the end-user. 

Channel aware responses

For each channel, only the supported templates will be available. For example, in SMS, only text, code (which eventually responds with text), and Quick reply templates are supported. None of the multimedia or carousel templates are present for SMS and other channels that do not support them.

📘

Quick Reply in channels that do not support buttons

In addition to text, the quick reply template has also been provided for these channels regardless of whether the underlying channel supports it or not (ex: WhatsApp). The platform will automatically convert all configured quick replies to numbered text options on channels where quick replies are not supported. Please see below for an illustration of how this works for WhatsApp.

Response templates for Web channel

Text

Simple text responses. Users can add multiple text boxes for a single response if they want to break down a big message into smaller blocks. Each text response can have various variants. At run time, a variant is selected at random and displayed to the users. This helps in keeping the bot experience fresh and less repetitive.

📘

Note:

A warning is displayed for developers at the time of saving the responses. This shows the number of erroneous fields to be rectified. The area with an error is highlighted in red. Using the navigation arrow, the developer can locate and correct the errors on any channels or response formats.
If there are multiple cards in the list picker or carousel, dot navigation is used to navigate through the cards with errors. In case of one card in the carousel or list picker, the dot corresponding to the card turns red to indicate the error.

Variants

You can add variants to your responses to keep the user experience from getting monotonous. One of the configured variants will be triggered at random if your template key has multiple variants. This can be done by clicking the New variant button at the bottom of your response.

Quick Reply

Text response along with buttons. Buttons can be either text buttons that require a button title and payload (payload is the value relayed to the bot on button click), or URL buttons that redirect users to another page on click.

The partial match occurs when there is ambiguity about incoming user queries and the bot responds with articles/intents that are close to the user query as options. The partial match responses are rendered for the Web and Facebook.

For Q&A bots, users can also link a button to another article in addition to configuring a payload. This will result in the response of linked article being displayed on button click.

Adding URL quick replies

URL quick reply button in fixed and conditional responses allow users to configure buttons that can redirect consumers to their website for additional information or performing tasks like form-filling. The configured URL buttons will redirect consumers to the configured URL in a new tab in the same browser window, without sending back any payload to the bot.

To add a URL quick reply in conditional or fixed response:

1. Select the article or template key for which you want to configure the URL quick reply.
2. Click +Add quick reply. The Button type pop-up window appears.

3. Select the button type as URL in the web channel.
4. Specify the title for the button and URL to which the consumer must be redirected after clicking the button.
5. Click Done to add a URL quick reply. The response rendered on the web channel looks as shown in the following screenshot.

🚧

URL buttons

• URL type buttons can also be configured through dynamic response type, where these buttons are to be configured using snippets of python code.
  • These buttons are supported in the Webex Bot Builder platform preview as well as the shareable preview. They are currently not supported by IMIchat's Live chat widget or other third-party channels.

For example, configuring a quick reply response with the text 'Please select your option' and two buttons - one titled 'Search here' that redirects users to google.com and the second titled 'Get in touch' that sends 'Talk to an agent' payload to the bot. Users can use the following snippet for this example:

output = {
	"generated_msg": [{
		"include": ["web"],
		"quick_reply": [{
			"quick_replies": [{
				"content_type": "url",
				"title": "Search here",
				"url": "www.google.com"
			},{
				"content_type": "text",
				"title": "Get in touch",
				"payload": "Talk to an agent"
			}],
			"text": "Please select your option"
		}]
	}]
}

Carousel

Rich responses that involve a single card or a series of cards. Each card requires a title. Additionally, each card can contain an image, a description, and up to 3 buttons.

Quick replies in the Carousel template can be configured with the text and URL button. Clicking on the URL button will redirect the consumer to the URL configured in the quick reply. Similarly, clicking on the text quick reply button sends a configured payload to the bot and displays the response linked to the payload.

Image

A multimedia template where users can configure images by providing URLs.

Video

Renders videos in the preview based on the configured video URL.

Code

Can be used to write Python code for calling APIs, or executing other logic.

Channel specific templates and settings

To enhance the channel-aware user experience, Webex Bot Builder supports response templates native to certain channels. For channels Apple Business Chat, we support the configuration of time picker, rich links, and list picker templates though response designer UI.

The following table lists the response formats that are supported in each of the mentioned channels:

WhatsApp specific templates

Bots using interactive messaging features achieve higher response rates and conversions compared to those that are text-based. Developers can use Reply buttons and List messages in WhatsApp to achieve this.

These message types lead to higher comprehension levels as they provide a consistent format for people to find and select what they want from your bot. They can be personalized in real-time based on the use-case or situation. Unlike other WhatsApp template messages, these interactive messages do not require pre-approvals. You can combine these message types in the same flow for more compelling customer experiences.

Reply buttons

Like quick replies on web and other channels, Reply Buttons are best for offering quick responses from a limited set of options, such as choosing a product to return, etc. Each message is comprised of:

• Header – an optional field that can be 20 characters of text, image, video, or a document.
• Body – a mandatory text field that can contain up to 1024 characters.
• Footer – an optional text field allowing up to 60 characters.
• Buttons – maximum of 3 text buttons with a 20-character limit.

List messages

List Messages on WhatsApp contain a menu of up to 10 items or rows divided into various sections. List messages are best for presenting several options and provide a simple and consistent way for users to make a selection. It can be used for a variety of use-cases like a take-out menu, product catalog, etc.
To configure a list message, users need to provide relevant information in ‘configuration’ and ‘list sections’ tabs. The message content in the ‘configuration’ screen is what the users see on their device. It consists of:

• Header – an optional text field with a maximum of 60 characters.
• Body – a mandatory text field than can contain up to 1024 characters.
• Footer – an optional text field allowing up to 60 characters.
• List title – a button field with maximum of 20 characters.

On clicking the List title button, users will see the list containing:

• Section titles – optional text field used for categorizing several rows. Max 24 characters.
• Row title – mandatory text field that is sent as a selection choice accompanied by a radio button. Max 24 characters.
• Row description – optional text field that provides additional context for row items. Max 72 characters.
  Configuring a list message on the platform will require an additional field:
• Row ID – unique identifier for each row that will help you identify the users’ choice.

Numbered List

Quick replies in WhatsApp were previously rendered as a numbered list that the users could pick from by returning a number. This has been renamed to ‘Numbered List’ to accurately describe the message as seen by users on their devices. When users pick a number from the list of items, the payload configured against the item is received.

Voice settings

Voice as a conversation medium has a lot more intricacies than text over digital channels. To accommodate some of these intricacies we are giving developers the ability to customize voice settings to meet their unique needs. Developers can now add voice as a channel to their existing bots and customize these speech settings for optimal conversations using voice as a medium.
Voice settings added to each bot response are:

• Timeout (s): The amount of time in seconds the bot will wait for the user to respond. If no response is received, developers can decide whether to re-prompt the user or end the conversation.
• Allow barge-in: This setting decides whether the user can interrupt the bot response to provide a fresh input or not. When unchecked, the user will only be able to respond after the bot response is played in full.
• DTMF input: Decides whether users can provide certain details using their keypad. This is useful when collecting information represented by long numbers. Enabling DTMF input further enabled the following settings:
  • Input mode: Decides whether the user can respond with DTMF only or using both – DTMF and voice.
  • Timeout between digits (s): The amount of idle time allowed between subsequent digit entry. If the user exceeds this time, whatever they’ve typed to that point is sent to the flow as their input.
  • Termination character: Allows developers to define keys like pound or star as end of user input. Once the user presses this key, the keypad input prior to the key press is sent to the flow as user input.
  • Max length: Maximum length of characters allowed for user input.
    These settings can be defined for individual responses in the response designer once the developer adds voice as a channel.

Apple Messages for Business specific templates

Following are the templates that can only be configured for Apple Messages for Business (previously known as Apple Business Chat) channel:

Rich links

The Rich link URL is embedded in the image or a video that is in a chat bubble. When you click this bubble, the consumer is redirected to the website specified in the image or video.

The configured rich link is rendered on the Apple Messages for Business channel as shown in the following screenshot:

List Picker

With the list picker, the chatbot shares a list of items with a consumer based on the query. This allows the consumer to select the items from the given options and reply with the selection. If the consumer query matches partially, the bot responds with the articles or intents that are close to the consumer query as options. The partial match responses are rendered only for the List Picker option in the Apple Messages for Business channel.

Time picker

The Time picker response template allows the bot developer to configure time slots for appointment booking or scheduling a meeting. Each event section in the template must have an event title, Timezone, and multiple slots.

After configuring this template for intent or an article, the bot sends the configured time slots to consumers for selecting a time slot. The reply with the selected time is sent to the bot for booking an appointment.

Forms

Business Forms Messages empower users to design intricate, multi-page interactive experiences for iOS and iPadOS devices using a unified JSON payload. Given the powerful and extensive customizations that Apple allows for forms, we chose to go with JSON to better cater to the client’s business needs.

This feature enables businesses to gather extensive customer data through a user-friendly interface integrated within the Apple Messaging Interface. This seamless interaction allows for diverse engagement options without necessitating users to exit the conversation.

Sending the structured content templates (body and metadata) illustrated in the sample JSON will allow a bot platform user to send Business Forms to the consumer device.

Configuring form messages

Each JSON will contain information about the pages that will go as a part of the form with customizations. The pages can be of different types –

• splash: An introduction page that includes a title, description, action button and an image.

• select: A page that features either a single “True/False” selection or multiple select. The page also supports image assets with each selection.

• picker : A page that features a single select from multiple options.

• datePicker: Provides Apple’s standard Date Picker with the ability to change the date format and set maximum/minimum dates.

• input : A page that can feature various input fields to collect strings of information.

The structured content metadata empowers the user to specify the form's pages and visual layout. This Metadata template comprises two sections -

• BusinessFormEvent – Information like page identifier for the starting page, summary, pages, images can be configured.

• BusinessChatMessage – received and reply message information can be configured.

More information for this message template can be accessed from Apple’s official documentation.

Formatting the text in bot responses

Markdown is a lightweight and easy-to-use syntax for styling the text on the Web. Using Markdown, you can bold, italicize, create ordered or unordered list, and add hyperlinks. The Markdown syntax is used to format and highlight these areas on the Webex Bot Builder preview widgets:

• Text of the bot responses
• Text of quick reply template
• Description of carousel template

The markdown syntax used to format bot responses is even rendered on the Sessions and Curation window.

You can also use HMTL to format the text in the bot responses, but this text cannot be rendered on the Webex Bot Builder preview widget and are dependent on the channel’s ability to display them.

Formatting the text for Facebook

Use these syntax to format the text on the Facebook channel. This improves the look of the text and the formatting is only rendered on the computer, but not in the Messenger app of the smartphone.

This is a bot response

List of common response variables

Response variables can be used in Rules of conditional response designer to define conditions or in the bot responses to personalize and enrich bot responses. Some frequently used response variables are:

Response templates for Google Business Messages

Text

Simply configure rich/plain text for Google business messages specific responses. For rich text use markdown. Custom fallback text can also be configured for unsupported messages using the fallback field.

Reply suggestions

Reply suggestions show up as options (buttons) to the user once configured. To configure a reply suggestions response, use the response suggestions template.

To configure a button, click on 'Add Reply suggestion'

Buttons can be of three types

1. Text
2. URL
3. Dial Action

Text button option

Enter the button text and the payload that will be triggered once the user clicks on the button. The payload can also be linked to a specific article in the bot's training data.

URL

To configure the URL button, select the URL radio option. Enter the text, the payload that will be triggered once the button is clicked, and the URL that will be sent.

Dial action

To configure Dial action, the template remains the same with the text and payload, an extra field related to adding a phone number that will be dialed once this button is clicked.

Code

Use this template to use API responses using custom JSON.