Response Designer

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. 

The list of templates supported on Web channel are:

Response templates

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.

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.

📘

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.

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

Channel specific templates

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

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.

Configuring a rich link response for the Apple Messages for Business channel

Follow these steps to configure a rich link response for Apple Messages for Business channel of an article:

1. Specify this information in the Rich Link section:
   Image URL
   The URL embedded in the image. This URL must be in the image format that you have selected.
   Type
   The type of image format. Possible values:
   • JPEG
   • PNG
   Website URL
   The URL to which the user is redirected.
   URL title
   The URL title for the video or image.
   Video URL (Optional)
   The URL of the video, which supports the MIME protocol. You must click the rich link thumbnail to play the configured video.
   Type
   The type of video format. By default, the value is set to video/mp4.

2. Click Save and train.
   The configured rich link is rendered on the Apple Messages for Business channel as shown in the following screenshot:

You can also perform these actions:

• Click Save to save the article without training.
• Click Delete to delete the article.

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.

Configuring a list picker template for the Apple Messages for Business channel

Follow these steps to configure a list picker template for the Apple Messages for Business channel. The configured list picker is rendered on the Apple Messages for Business channel.

1. Select a specific Q & A bot on the Q & A bot tab of the Dashboard page.
2. Click Articles. The Knowledge base page appears.
3. Select an article for which the list picker must be configured, on the Articles tab.
4. Click + to select the Apple Messages for Business option from the list of channels in the Response section.
5. Click List Picker. The Apple Messages for Business List picker widget is displayed.
6. Specify this information on the Configuration tab:
   Title
   The title for the list picker.
   Preview image URL (optional)
   The image URL for the list picker.
   Image Style
   The size of the image. Possible values:
   • Icon
   • Small
   • Large
   Description
   The description for the list picker.
   Reply title
   The title for the reply message sent to the consumer, based on the selected list picker option.
   Reply Description (Optional)
   The description for the reply message sent to the consumer, based on the selected list picker option.

7. Specify this information on the List sections tab:
   List title
   The title for items in a list.
   Image (Optional)
   The image URL of an item in a list.
   Identifier
   The identifier for an item. If the consumer selects an item, the identifier that is set for the item is sent to the bot and accordingly bot displays the next step of action to be taken by the consumer.
   Description (Optional)
   The description of an item in a list.

📘

You can also:

• Click the plus button to add another item to the list.
• Add another list section, using the Add List section option.
• Delete an item in the list, using the Delete option.

8. Click Save and train.
   You can also perform these actions:
   • Click Save to save the article without training.
   • Click Delete to delete the article.

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.

Configuring a time picker template for the Apple Messages for Business channel

Follow these steps to configure a time picker template for the Apple Messages for Business channel. The configured time picker is rendered on the Apple Messages for Business channel.

1. Select a specific Q & A bot on the Q & A bot tab of the Dashboard page.

📘

Note:

To configure time picker template in a task bot, click the Task bot tab on the Dashboard page.

2. Click Articles. The Knowledge base page appears.
3. Select an article for which the list picker must be configured, on the Articles tab.
4. Click + to select the Apple Messages for Business option from the list of channels in the Response section.
5. Click Time picker. The Apple Messages for Business Time picker widget is displayed.
6. Specify this information on the Configuration tab:
   Title
   The title for the time picker.
   Preview image URL (optional)
   The image URL for the time picker.
   Image Style
   The size of the image. Possible values:
   • Icon
   • Small
   • Large
   Description
   The description for the time picker.
   Reply title
   The title for the reply message sent to the consumer based on the selected time picker option.
   Reply Description (Optional)
   The description for the reply message sent to the consumer based on the selected time picker option.

7. Specify this information on the Event details tab:
   Event title
   The title for events in a list.
   Timezone
   The time zone for the event. It is in the format of Country/City.
   Start date-time
   The date and time set for slot1.
   Duration
   The duration for slot 1. The value is expressed in seconds.
   Identifier
   The identifier for a slot. If the consumer selects a slot, the identifier that is set for the slot is sent to the bot and accordingly, bot displays the next step of action to be taken by the consumer.

📘

Note:

You can also perform these actions:
• Use +Add Slot option to add multiple slots to an event
• Use delete icon to delete the slot from an event.

8. Click Save and train to train the bot article with these responses.
   The configured time picker is rendered on the Apple Messages for Business channel as shown in the following screenshot:

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

Variable substitution in responses

Variable substitution allows you to use dynamic variables as a part of response templates. All the standard variables (or entities) in a session along with those that a bot developer can set inside a free form object like the “datastore” field can be used in response templates via this feature. The variables need to be represented using this syntax: ${variable_name}. For example, using the value of an entity called apptdate use ${entities.apptdate.value}.

Bot responses can be personalized using variables received from the channel or collected from consumers over the course of conversation. The auto-complete functionality shows the syntax of variables in the text area when you start typing ${. Selecting the required suggestion auto-fills the area with the variable and highlights such variable.

Conditional Responses

Bot developers can design dynamic responses without writing any code by configuring rules in a GUI for Q&A bots and Task bots using Conditional response. In Q&A bots, the custom paths are defined for an article in the Responses console by setting the response type to conditional response.

In Task bots, these custom paths are created for a template in the Responses console after switching to ‘Conditional response’ response type. For each custom path, you must configure rules and responses (actions). If a consumer text or query matches any of the set rules, the response (action) linked to the rule is rendered to the consumer.

For instance, if the consumer query is about bill payment and the response varies depending on the user's type, you can now convey this information from the same response template. Once we know the user type, premium user or new user in this example, the conversation can be made scenario specific by creating different paths for premium and new users. Depending on the ‘rules’ that are satisfied (user type in this example), relevant response can be displayed to the consumer who selects the premium user option. This response is configured in the ‘Action’ section of each path. Similarly, you can create another custom path for fa new user by adding rules along with the response that must be displayed to the user.

Developers can also use consumer information received from the channel to define different paths and personalize responses based on the information available. For example, in app channel, developers can define different responses for anonymous and logged-in users if this information is available.

Configuring a conditional response for the Q&A bot

Use these steps to configure a conditional response for an article.

1. Select a specific Q&A bot on the dashboard screen.
2. Click the Articles tab on the left side. The knowledge base screen appears.
3. Select the article to which you want to configure the response.
4. Select the channel for which the response must be configured. Possible values:
   • Web (By default)
   • WeChat
   • Twitter
   • RCS
   • Apple Messages for Business
   • WhatsApp
   • SMS
   • Slack
   • Viber
   • Line
   • Microsoft
   • Facebook
   • Google Home
   • Alexa
   • Web Speech
5. Select the response type as Conditional response from the list. The Custom Paths Pullover window appears.

6. Click +New on the Custom Paths Pullover window.

7. Specify the path name.

8. Click Create to create the custom path for a response
9. Click the newly created path and select Rules to define.

10. Specify If with OR, AND conditions based on which the rules must be executed and responses to be displayed:
    Left variable
    The syntax using which the rule is executed. Following is the list of variables that you can use to define rules in the conditional-response type. These variables can also be used to customize bot responses:
    • consumerData
    • consumerData.name - Use this variable to customize the bot response with the consumer name. You can display the consumer name using this syntax.
    • consumerData.uid - You can insert the UID in the bot response using this syntax.
    • consumerData.email - Use this variable to insert the email address in the bot response.
    • consumerData.facebook_id - Use this variable to customize the bot response with the Facebook ID.
    • consumerData.skype_id - You can display the Skype ID using this syntax. This captures the skype ID of a consumer conversing with the bot.
    • consumerData.extra_params - You can display the extra parameters that are imported from the other applications using this syntax.
    • consumerData.phone - Use this variable to customize the bot response with the phone number of a consumer.
    • consumerDataStore - Use this variable to extract consumer details from the bot code and use these details for a consumer for lifetime.
    • dataStore - Use this syntax to store data at a session level.
    • dataStore. - Bot developer can write logic to store details at a session level. It is valid until the room is open and is used in smart bots.
    • extra_params - Returns the extra parameters.
    • lastdfState - Returns the df state of the last transaction.
    • messageStore - Used in Q&A and task bots.
    • messageStore.agent_handover_by_rules - Returns whether agent handover by rules toggles are enabled for the bot.
    • messageStore.category_name - Returns the category name under which the bot response article is categorized.
    • messageStore.n_sections - Returns all the closest matches pertained to the consumer query.
    • messageStore.partial_match_sections - This is applicable only for the Q&A bots. Returns the partial match results for the consumer query.
    • messageStore.partial_match_sections. - Returns the list of partial match results for the consumer query.
    • messageStore.partial_match_sections..first_question - Returns the first question that is partially matched with the consumer query along with the list of other partial match results.
    • messageStore.sendtoagent - Returns whether the send to agent toggle is enabled for the bot.
    • messageStore.top_match_section - Returns the top match to the consumer query with the confidence score and section id.
    • messageStore.top_match_section.score - Returns the confidence score of the top match for the consumer query.
    • messageStore.top_match_section.first_question - Returns the first question that is a closest match to the consumer query.
    • newdfState - Returns the df state of the latest transaction.
    • nlp - Returns the pipeline module used in the bot response. Example for ${nlp.sentiment), the bot displays the sentiment in the bot response related to the consumer query.
    • transaction_id - Use this variable to get the transaction id.
    • nlp.processed_query - Returns the consumer query from Alfred.
    • nlp.text - Returns the consumer query
    • transaction_id - Use this variable to get the transaction id.
    Operator
    The operator that is used to execute the rule. Possible values:
    • Equals to
    • Not equals to
    • In
    • Exists
    • Does not exist
    • Greater than
    • Less than
    Data type
    The data type of the right variable. Possible values:
    • String
    • Variable
    • Integer
    • Boolean
    • Float
    • Array
    Note: Data types populate based on the selected operator.
    Right variable
    The type of variable value with which the syntax in the left variable must match.
    This field is displayed only when you set the Operator to any of these values:
    • Equals to
    • Not Equals to
    • In
    • Greater than
    • Less than
    You can also use the list of variables to define rules in the right variable of the conditional response type if you set the Data type to Variable.
11. Select Actions to create a response for the defined rule. Bot responses can be personalized using variables received from the channel or collected from consumers over the course of conversation. The auto-complete functionality shows the syntax of variables in the text area when you start typing ${. Selecting the required suggestion auto-fills the area with the variable and highlights such variable.

12. Specify the response that must be displayed for the customer query once the rule is fulfilled.
13. Click Save and Train to train the bot with these new responses.

📘

Note:

In case when none of the custom path rules are satisfied, the response specified in the ‘Default path’ is rendered.
You can also perform these actions on the custom paths pullover window:

• Modify the pathname, using the Edit icon corresponding to the pathname
• Delete a specific path, using the Delete icon corresponding to the pathname.

Configuring a conditional response for the task bot

Use these steps to configure a conditional response for a template key linked to an intent.

1. Select a specific task bot on the dashboard screen.
2. Click the Responses tab on the left side. The knowledge base screen appears.
3. Select the template key of an intent for which you want to configure the response.
4. Select the channel for which the response must be configured. Possible values:
   • Web (By default)
   • WeChat
   • RCS
   • Apple Business Chat
   • WhatsApp
   • SMS
   • Slack
   • Viber
   • Line
   • Microsoft
   • Facebook
   • Google Home
   • Alexa
   • Web Speech
5. Select the response type as Conditional response from the list. The Custom Paths Pullover window appears.

6. Click +New on the Custom Paths Pullover window.

7. Specify the path name.

8. Click Create to create the custom path for configuring the response (actions).
9. Click the newly created path and select Rules to define.

10. Specify If with OR, AND conditions based on which the rules must be executed and responses to be displayed:
    Left variable
    The syntax using which the rule is executed. Following is the list of variables that you can use to define rules in the conditional-response type:
    • consumerData - Use this variable to customize the bot response with consumer details.
    • consumerData.email - Use this variable to insert the email address in the bot response.
    • consumerData.extra_params - You can display the extra parameters that are imported from the other applications using this syntax.
    • consumerData.facebook_id - Use this variable to customize the bot response with the Facebook ID.
    • consumerData.name - Use this variable to customize the bot response with the consumer name. You can display the consumer name using this syntax.
    • consumerData.uid - You can insert the UID in the bot response using this syntax.
    • consumerData.phone - Use this variable to customize the bot response with the phone number of a consumer.
    • consumerData.skype_id - You can display the Skype ID using this syntax. This captures the skype ID of a consumer conversing with the bot.
    • dataStore - Use this syntax to store data at a session level.
    • dataStore. - Bot developer can write logic to store details at a session level. It is valid until the room is open and is used in smart bots.
    • entity. - Returns the entity name that is used by the intent.
    • extra_params - Returns the extra parameters.
    • intent - Returns the intent that is entered by the consumer.
    • lastdfState - Returns the df state of the last transaction.
    • lastdfState.model_state - Returns the df state of the last transaction message
    • lastdfState.model_state.entities - Returns the entities associated with the intent.
    • lastdfState.model_state.entities..value - Returns the entity name that is configured for an intent in the bot response.
    • lastdfState.model_state.intent - Returns the df state of the intent.
    • lastdfState.model_state.intent.name- Returns the intent name.
    • lastdfState.model_state.intent.slots - Returns the slots associated with the intent.
    • messageStore - Used in Q&A and task bots.
    • messageStore.agent_handover_by_rules - Returns whether agent handover by rules toggles are enabled for the bot.
    • messageStore.partial_match_intents - Returns the partial match intents for consumer query with the confidence score and intent ids.
    • messageStore.partial_match_intents. - Returns the partial match intents for the consumer query and gives the confidence score and intent ID that is a closest match to the consumer query.
    • messageStore.partial_match_intents..name - Returns the intent that partially and closely matches with the consumer query along with the list of partial match results.
    • messageStore.results - Returns the algorithm results pertained to the consumer query.
    • messageStore.results.entities - Returns the entities related to the intent.
    • messageStore.results.intent_ranking - Returns the intent ranking of algorithm results starting from closest match along with the confidence score.
    • messageStore.sendtoagent - Returns whether the send to agent toggle is enabled for the bot.
    • messageStore.templateKey - Returns the response template key that is mapped to the intent.
    • messageStore.top_match_intent - Returns the closest intent match to the consumer query. This also displays the confidence score, name of the intent that is the closest match and intent ID.
    • messageStore.top_match_intent.name - Returns the intent name that is entered by the consumer.
    • messageStore.top_match_intent.score - Returns the intent score for the consumer query.
    • newdfState - Returns the df state of the latest transaction.
    • newdfState.model_state - Returns the new df state of the message.
    • newdfState.model_state.entities - Returns the entity name that is configured for the template key. This displays the entity id, entity name and metadata details.
    • newdfState.model_state.entities..value - Returns the entity name that is configured in the bot response.
    • newdfState.model_state.intent - Returns the intent and the slots associated with this intent along with the final template key.
    • newdfState.model_state.intent.name - Returns the current entity details of an intent. This also displays the entity name, entity ID and the value that is responded by the consumer.
    • newdfState.model_state.intent.slots - Returns the slots that are configured for the intent.
    • newdfState.model_state.intent.slots.- Returns the slots associated with the intent
    • newdfState.model_state.intent.slots..counter
    • nlp - Returns the pipeline module used in the bot response. Example for ${nlp.sentiment), the bot displays the sentiment in the bot response related to the consumer query.
    • nlp.processed_query - Returns the consumer query from Alfred.
    • nlp.text - Returns the consumer query.
    • transaction_id - Use this variable to get the transaction id.
    • consumerDataStore - Use this variable to extract consumer details from the bot code and use these details for a consumer for lifetime.
    Operator
    The operator that is used to execute the rule. Possible values:
    • Equals to
    • Not equals to
    • In
    • Exists
    • Does not exist
    • Greater than
    • Less than
    Data type
    The data type of the right variable. Possible values:
    • String
    • Variable
    • Integer
    • Boolean
    • Float
    • Array
    Note: Data types populate based on the selected operator.
    Right variable
    The type of variable value with which the syntax in the left variable must match.
    This field is displayed only when you set the Operator to any of these values:
    • Equals to
    • Not Equals to
    • In
    • Greater than
    • Less than
    You can also use the list of variables to define rules in the right variable of the conditional response type if you set the Data type to Variable.
11. Select Actions to create a response for the defined rule. Bot responses can be personalized using variables received from the channel or collected from consumers over the course of conversation. The auto-complete functionality shows the syntax of variables in the text area when you start typing ${. Selecting the required suggestion auto-fills the area with the variable and highlights such variable.

12. Specify the response that must be displayed for the customer intent once the rule is fulfilled.
13. Click Save and Train to train the bot with these new responses.

📘

Note:

In case when none of the custom path rules are satisfied, the response specified in the ‘Default path’ is rendered.
You can also perform these actions on the custom paths pullover window:

• Modify the pathname, using the Edit icon corresponding to the pathname
• Delete a specific path, using the Delete icon corresponding to the pathname.

The output for the conditional response is rendered as shown below:

Code Snippet

For nearly all bot building requirements, conditional responses - with their rich functionality and varied response templates - should be able to satisfy the requirements. For the rare case when developers aren't able to build their uses cases through conditional responses or for code-savvy developers who prefer using code, Code snippet response type is available.

Code snippet can be configured using snippets of python code. You can configure all types of response templates such as quick reply, text, carousel, image, audio, video, and file using this code for a response template or an article.

The function code configured in the code template is used to set variables which can be further used in templates. However, the function code cannot return responses when used within the conditional responses.

🚧

Code snippet validation

The platform only looks for syntax errors with the code snippet that is being configured. Any errors with the content of the response in code snippet will lead to errors for anyone interacting with the bot on the channel where it is configured. For example, the editor will not stop you from configuring a 'time picker' response for web channel but it will lead to errors when a user query triggers that particular response.

If the bot developer chooses not to configure a unique response for different channels, the Web response will be considered as the default response and will be sent to the end-user. The list of templates supported on Web channel are:

Text

Simple text message that can have multiple variants. This configured message is shown to the consumer based on the query. Following is an example of configuring text response for multiple channels using code snippet:

output = {
  "generated_msg": [
    {
      "text": [
        "If you've lost your card or it's been stolen, it's important to call us as soon as you can, so we can cancel your card.\\nFrom the UK 0800 151 XXXX.From abroad +44 1604 230 XXX.You can also use our Next Generation Text or SignVideo service.\\nCheck your statement in case there's been any fraudulent activity on your card. We'll get your new card to you within three to five working days."
      ],
      "include": [
        "slack"
      ]
    },
    {
      "text": [
        "If you've lost your card or it's been stolen, it's important to call us as soon as you can, so we can cancel your card.\\nFrom the UK 0800 151 XXXX.From abroad +44 1604 230 XXX.You can also use our Next Generation Text or SignVideo service.\\nCheck your statement in case there's been any fraudulent activity on your card. We'll get your new card to you within three to five working days."
      ],
      "include": [
        "facebook"
      ]
    },
    {
      "text": [
        "If you've lost your card or it's been stolen, it's important to call us as soon as you can, so we can cancel your card.\\nFrom the UK 0800 151 XXXX.From abroad +44 1604 230 XXX.You can also use our Next Generation Text or SignVideo service.\\nCheck your statement in case there's been any fraudulent activity on your card. We'll get your new card to you within three to five working days."
      ],
      "include": [
        "whatsapp"
      ]
    },
    {
      "text": [
        "If you've lost your card or it's been stolen, it's important to call us as soon as you can, so we can cancel your card.\\nFrom the UK 0800 151 XXXX.From abroad +44 1604 230 XXX.You can also use our Next Generation Text or SignVideo service.\\nCheck your statement in case there's been any fraudulent activity on your card. We'll get your new card to you within three to five working days."
      ],
      "include": [
        "abc"
      ]
    },
    {
      "include": [
        "web"
      ],
      "text": [
        "Hi, please go to the architecture tab in edit bot page to start configuring your bot."
      ]
    }
  ]
}

Quick reply

This template has text along with clickable buttons.

output = {
  "generated_msg": [
    {
      "quick_reply": [
        {
          "text": "You can choose the veg pizzas you want from here:",
          "quick_replies": [
            {
              "payload": "a1",
              "title": "Margherita Pizza",
              "content_type": "text"
            },
            {
              "payload": "a1",
              "title": "Golden Corn Pizza",
              "content_type": "text"
            },
            {
              "payload": "a1",
              "title": "Double Cheese Margherita Pizza",
              "content_type": "text"
            }
          ]
        }
      ],
      "include": [
        "web"
      ]
    }
  ]
}

Carousel

Carousel has a collection of cards and each card must have title, image URL and description.

output =
{
  "generated_msg": [
    {
      "generic_template": [
        {
          "elements": [
            {
              "image_url": "tierra-mallorca-JXI2Ap8dTNc-unsplash.jpg",
              "title": "Lincoln Park towers",
              "description": "Logan Square",
              "button": [
                {
                  "payload": "expire",
                  "title": "Book Now",
                  "type": "postback"
                },
                {
                  "payload": "a1",
                  "title": "Know more about the property",
                  "type": "postback"
                }
              ]
            },
            {
              "image_url": "https://imibot-production.s3-eu-west-1.amazonaws.com/integrations/v2/media/shallow-focus-photo-of-white-open-sigange-3345876.jpg",
              "title": "Logan Square",
              "description": "Logan Square",
              "button": []
            }
          ]
        }
      ],
      "include": [
        "web"
      ]
    }
  ]
}

Image

Template to configure images by providing URLs.

output = {
  "generated_msg": [
    {
      "image": [
        {
          "url": "https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_100kB.jpg",
          "type": "image/jpeg"
        }
      ],
      "include": [
        "web"
      ]
    }
  ]
}

Video

Template to configure video by providing the video URL. Consumer can play the video by clicking or tapping on the image.

output = {
  "generated_msg": [
    {
      "video": [
        {
          "url": "https://storage.googleapis.com/coverr-main/mp4%2Fcoverr-brooklyn-bridge-1572178567128.mp4",
          "type": "video/mp4"
        }
      ],
      "include": [
        "web"
      ]
    }
  ]
}

File

Template to configure pdf file by providing the URL to access the file.

output = {
  "generated_msg": [
    {
      "file": [
        {
          "type": "application/pdf",
          "url": "https://download.newlap.com/pccbbs/mobiles_pdf/p1gen2_x1extreme_ug_v2_en.pdf",
          "componentType": "file"
        }
      ],
      "include": [
        "web"
      ]
    }
  ]
}

Audio

Template to configure audio file by providing the audio URL. It also shows the duration of the audio message in the output.

output = {
  "generated_msg": [
    {
      "audio": [
        {
          "url": "http://imibot-production.s3.amazonaws.com/6/502/502/audio/8968.mp3",
          "type": "audio/mp3"
        }
      ],
      "include": [
        "web"
      ]
    }
  ]
}

Apple Messages for Business specific templates

Following are the response templates that are supported only for the Apple Messages for Business channel.

List picker

Configure the list of products or items. Each list section must have title, image URL, image style, description, reply title and reply description. Consumer can choose an option from the list, which is sent as a response by the bot.

output = {
  "generated_msg": [
    {
      "listpicker": [
        {
          "reply_message": {
            "title": "Know more about the violin models",
            "subtitle": "violin models"
          },
          "received_message": {
            "title": "Select violin of your choice",
            "subtitle": "Violins might be frowned upon by some professionals, due the quality of both the violin and bow. As the violins are not handcrafted, there will be minor fine tuning and adjustments to be made",
            "style": "icon",
            "image_url": "https://sample-videos.com/img/Sample-jpg-image-50kb.jpg"
          },
          "sections": [
            {
              "_id": 1648011056132,
              "title": "Violin models",
              "items": [
                {
                  "_id": 1695452083861,
                  "image_url": "https://sample-violinmodel.com/img/Sample-jpg-image-50kb.jpg",
                  "title": "MV300 Violin",
                  "identifier": "a1",
                  "subtitle": "It is not recommended for intermediate violinists, but is perfect for starter violinists."
                }
              ]
            },
            {
              "_id": 1687987556985,
              "title": "Strad Model 101 Violin",
              "items": [
                {
                  "_id": 1684118804509,
                  "image_url": "",
                  "title": "https://sample-violinmodel.com/img/Sample-jpg-image-50kb.jpg",
                  "identifier": "a1",
                  "subtitle": "Cremona’s highest rated beginner violin because of the value it offers – combining playability, tone quality, specification, and price"
                }
              ]
            }
          ],
          "buttons": [],
          "_id": 1711217480840
        }
      ],
      "include": [
        "abc"
      ]
    }
  ]
}

Time picker

Configure different time slots to allow consumers to schedule a meeting or book an appointment at their convenient time. The event section must have title, time zone, and slots.

output = {
  "generated_msg": [
    {
      "timepicker": [
        {
          "reply_message": {
            "title": "Select the date and time to visit the store",
            "subtitle": ""
          },
          "received_message": {
            "title": "Store timing",
            "subtitle": "Book slots to shop at your convenient time now ",
            "style": "icon",
            "image_url": ""
          },
          "event": {
            "title": "Select the time to visit the store",
            "timezone": "Europe/London",
            "slots": [
              {
                "_id": 1671606928209,
                "start_time": "2021-09-28T17:32",
                "duration": 4500,
                "identifier": "slot1"
              },
              {
                "_id": 1644212391705,
                "start_time": "2021-09-28T18:15",
                "duration": 4500,
                "identifier": "slot2"
              }
            ]
          },
          "_id": 1646355134089
        }
      ],
      "include": [
        "abc"
      ]
    },
    {
      "text": [
        "Please configure your message for web"
      ],
      "include": [
        "web"
      ]
    }
  ]
}

Rich link

Configure rich links where URL is provided through an image or a video. This is displayed in a chat bubble. Clicking on the bubble directs the consumer to land on the web page specified in the image or video.

output = {
  "generated_msg": [
    {
      "richlink": [
        {
          "title": "The cabinet - $499",
          "url": "cabin.com",
          "image": {
            "type": "image/jpeg",
            "url": "https://i.imgur.com/IjVUIXz.jpg"
          },
          "componentType": "richlink",
          "_id": 1686088215524
        }
      ],
      "include": [
        "abc"
      ]
    }
  ]
}

Media

Configure the text message with an attachment. This template supports attachments that are in various formats such as jpeg, mp3, mp4, png, pdf and aac.

output = {
  "generated_msg": [
    {
      "text_with_media": [
        {
          "text": "Check the image to view laptop specifications",
          "attachments": [
            {
              "type": "image/jpeg",
              "url": "https://sample-videos.com/img/Sample-jpg-image-50kb.jpg"
            }
          ],
          "componentType": "text_with_media",
          "_id": 1662289617266
        }
      ],
      "include": [
        "abc"
      ]
    }
  ]
}

Calling APIs from the bot using the code template

Use this procedure to make API calls from the bot.

The code template in conditional responses, and the code snippet response type allows developers to configure bot responses using Python code. Even though code in responses can be used for a variety of operations, the central purpose is to make API calls in cases where bot responses need to be dynamic and rely on information from external systems.

The simplest and most elegant way of using HTTP APIs with Python is using the Requests library.

In this article, we will look at an example where we make a GET request and use certain values from the API response to formulate bot response.

The user’s intent in this example is to check the weather. On detecting the intent, bot prompts the user for a city name. The response template is configured to make an API request once the user provides a valid city name. The code for this will look like:

import requests

#Get the value of city provided by the user from entities
city = variables['newdfState']['model_state']['entities']['loc']['value']
url = "http://api.weatherstack.com/current"

payload={'access_key':'your-api-access_key', 'query':city}
headers = {'Content-Type':'application/json'}

#API request
response = requests.request("GET", url, headers=headers, params=payload)

#Extracting the details we want to use in bot response from the API response  
temp=response.json()['current']['temperature']
feel=response.json()['current']['feelslike']

#Storing the above values in data store
variables['dataStore']['feel']=feel
variables['dataStore']['temp']=temp

#Updating the data store
output = {
"dataStore": variables['dataStore']
}

The data store variables defined above can be used in bot response:

“The current temperature in ${newdfState.model_state.entities.loc.value} is ${dataStore.temp}°C, feels like ${dataStore.feel}°C.”

The response content in bot builder:

The same outcome can be achieved by using code snippet in place of conditional response designer. The code in this case will be:

import requests
#Get the value of city provided by the user from entities
city = variables['newdfState']['model_state']['entities']['loc']['value']
url = "http://api.weatherstack.com/current"

payload={'access_key':'244887328376f74b488b1619392e8f79', 'query':city}
headers = {'Content-Type':'application/json'}

#API request
response = requests.request("GET", url, headers=headers, params=payload)

#Extracting the details we want to use in bot response from the API response  
temp=response.json()['current']['temperature']
feel=response.json()['current']['feelslike']

#Using the above variables in bot response
output = {
"generated_msg": [
    {"text": ["The current temperature in "+city+" is " +str(temp)+"°C, feels like "+str(feel)+"°C."]}
]
}

he major difference here is constructing the bot response using code snippet instead of storing variables in data store and using them in text template.

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: