article by Frank Nimphius, June 2020
Menus look much better when icons are displayed for the selected items. Often, a well-chosen icon even improves usability because people recognize patterns so much better than reading labels. In this article I explain how to create icon references for list items in action and value-list menus created with the System.CommonResponse component
How to add icons to select items
Below is an action list in Oracle Digital Assistant as it shows in the embedded conversation tester that does not support remote icons to be displayed on menus.
And here is the same menu displayed on the Oracle Web channel that supports icons displayed for select items.
Although the icons I chose for the screen shot are not great, the menu looks different and probably even more appealing.
You create menus with icons on the select items using the System.CommonResponse component. As a bonus of using this approach, it will work with any messenger that can render icons in menus and not just the web SDK. Messengers that don't support icons (like SMS or the embedded tester) simply ignore the icon configuration.
Below is the BotML configuration used in the screenshots:
Notice the imageUrl property on the actions: items. The property requires an absolute URL reference to an icon. For simplicity reasons, I chose the pixabay CDN reference. For production bots you would save icons on a server or custom CDN to ensure the icons wont change inadvertently. The imageUrl field also accepts Apache FreeMarker expressions that return an absolute image reference. This would allow conditional icon changes for a select item. Last but not least, the action items can be dynamically queried using the iteratorVariable of the System.CommonResponse component actions node (not used that therefore not displayed in the BotML screen shot).
What you should know
At current, the web messenger centers labels and icons. To show icons left aligned as in the image shown on top of this article, you need to ensure that the labels are of the same size (plus / minus a character). Also notice that you don't have access to the rendering of icons (e.g. adapt the color of an icon to the overall look and feel of the messenger).
Related Content
Use Entities To Build Powerful, Robust And Speech-Ready Action Menus
How-to allow customers to provide feedback on the usefulness of answers to frequently asked questions
How-to upload documents in an Oracle Digital Assistant Web conversation using the Oracle Web SDK
Oracle Web Channel product documentation
TechExchange: All 2-Minutes Oracle Digital Assistant Tech Tip Videos on YouTube
