In Meya it is possible to specify the icon for the following UI elements:
- Bot Avatar
- Quick Reply
- Page Header Title
An icon is defined in BFML using the icon spec, which has a number of fields that allow you to customize the icon. Here is the icon spec definition:
icon: url: STRING color: STRING path: STRING
Meya uses the Streamline icon set to enable custom icons that matches the Orb's design theme. Streamline offers hundreds of different icons that are also available in multiple variants such as light, regular, and bold.
Here is an example of a quick reply with a custom icon:
steps: - say: What would you like to do next? quick_replies: - text: Talk to an agent icon: color: "#ff0000" path: streamline-light/18-avatars/02-geometric-men-professions/professions-man-telecommunicator.svg
Select the one you like from one of the following icon sets:
a. Streamline Bold
b. Streamline Light
c. Streamline Regular
Note the name of the icon.
Look up the nearest file path in this spreadsheet.
- Use the icon path in the icon's
pathfield. The Orb will resolve the specified icon path and download the icon from the Meya CDN.
You can specify the icon color by setting the
color field in the icon spec. The takes a standard hex HTML code, for example
"#ff0000" is red.
Note, put the hex color code in quotes, otherwise it will be interpreted as a YAML comment.
Only the following icon sets support custom colors:
- Streamline Light
- Streamline Regular
If the Streamline icon sets are not sufficient, then you can provide a URL to an icon file and the Meya Orb Web SDK will try download and render the image file.
If the Orb cannot download or render the provided icon file, then it will display a default placeholder icon.
Here is an example of an icon using a URL:
steps: - say: What would you like to do next? quick_replies: - text: Google search icon: url: https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg
Note, external icons must have the
image/svg content type, otherwise it will not be rendered.
color field might not be applied when specifying an external icon.
Updated 9 months ago