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 | |
|---|---|---|---|---|---|---|
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. |
| ❌️ | ❌️ | ❌️ | ❌️ | ❌️ |
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>).
Related topic