Formatting chatbot responses to be displayed in communication channels

Apart from the default BMC Helix Virtual Agent web UI, end users can use communication channels such as Slack, Microsoft Teams, Skype for Business on-premises, and SMS and WhatsApp, which uses Twilio. Users can interact with a chatbot through various interfaces. For example, if you have configured your chatbot application to work with Slack and Twilio, your application users can interact with your application chatbot by using the Slack user interface or they can send SMS by using mobile devices.

During user interaction, the chatbot response messages must be displayed correctly on the user interface. As a developer, you must format the responses so that the users can view the responses in the way that is optimal for their interfaces.

Syntax to format a chatbot response

BMC Helix Virtual Agent supports the Hyper Text Markup Language (HTML) for formatting chatbot responses so that a user communication client service can take the HTML syntax and convert the messages suitably for the user interface.

Supported HTML markup tags to format a chatbot response

The following HTML markup tags are supported for formatting chatbot responses.

Tag	BMC Helix Virtual Agent web UI	SMS	Slack	Microsoft Office 365 (Teams)	Skype for Business on-premises	WhatsApp
Structure tags
Paragraph <p>
Linebreak <br>
List <ul>, <li>
Table <tr>, <th>, <td>
Ordered List <ol>, <li>
Style tags
Text color <p style="color:blue;">
Smaller text <small>
Italic text <i>
Bold text <b>
Quotation <blockquote>
Link tags
Hyper text: <a href="url">link text</a>
Image tag ( <img src="url"> ) Note: All channels support the image tag with variations based on the image source.
Enter an image URL that does not require authentication.
Enter an image URL that requires authentication.
Enter an image from BMC Helix Innovation Studio, for example, from an attachment field.

Note

If the BMC Helix Virtual Agent response to Microsoft Office 365 Teams has system options (buttons), only the following HTML tags are supported in the response text:

The strings within <i> and <em> tags are displayed as italic text.
The strings within <b> and <strong> tags are displayed as bold text.
The strings withing <a> anchor or hyperlink tag are displayed as hyperlinks.

Other HTML tags are skipped and rendered as plain text.

To format chatbot responses

You must provide the formatted chatbot response messages when you define the dialogs for your application.

In IBM Watson Assistant, navigate to the Skill that you created for your application.
Select Skills > Dialog and open the dialog in which you want to format a response.
Modify the response in the dialog by using the HTML syntax and save the changes.

Example of using the HTML table tag in a chatbot response

The following table provides the HTML code to display an example chatbot response that contains links to knowledge articles:

Chatbot response Code

How do I reset my password?

Number of Views: 45

45% marked as Useful

Updated: Jan 29, 2018

Reset your password with a text message

Number of Views: 40

29% marked as Useful

Updated: Jan 20, 2018

<html>
    <table>
        <tr>
            <th/>
            <th>Number of Views</th>
            <th/>
            <th>Updated</th>
            </tr>
        <tr>
            <td><a href="url">How do I reset my password?</a></td>
            <td>45</td>
            <td>45% marked as Useful</td>
            <td>Jan 29, 2018</td>
        </tr>
        <tr>
            <td><a href="url">Reset your password with a text message</a></td>
            <td>40</td>
            <td>29% marked as Useful</td>
            <td>Jan 20, 2018</td>
        </tr>
     <table>
</html>

Do not provide the labels such as Number of Views and Updated in each table cell tag (<td>). You can define such labels in the table header tag (<th>).

Formatting chatbot responses to be displayed in communication channels

Syntax to format a chatbot response

Supported HTML markup tags to format a chatbot response

To format chatbot responses

Example of using the HTML table tag in a chatbot response

Related topic

Comments