Formatting chatbot responses to be displayed in communication channels
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) | |
|---|---|---|---|---|---|
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. |
| ❌️ | ❌️ | ❌️ | ❌️ |
Audio tag ( <audio src="url"> ) |
| ❌️ | ❌️ | ❌️ | ❌️ |
Video tag (<video src="url">) |
| ❌️ | ❌️ | ❌️ | ❌️ |
Options Important: Set the context by selecting sys_options in Variable and providing a value in the Value field; for example: Variable = $ sys_options : Value = [\"label":"Option1","value":"option1"},\{"label":"Option2","value":"option2"}] |
| ❌️ | ❌️ | ❌️ | ❌️ |
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>).