Tags

LAST EDIT May 26 2021

The following tags are supported by MML:

Basic Text and Icons

  • text

  • md

  • icon

  • image

Input and Data Tags

  • button

  • button_list

  • scheduler

  • add_to_calendar

  • carousel

  • item

  • number

Layout Tags

  • row

  • column

Basic Tags

Copied!

Text Tag

Copied!

The <text> tag is the default tag. It does not support additional attributes and renders the text as-is.

Markdown Tag

Copied!

The <md> tag renders its content as markdown.

Icon Tag

Copied!

The <icon> tag renders a material UI style icon. You can find the list of supported icons here.

nametypedescriptiondefaultoptional
namestringThe icon to render-

Image Tag

Copied!

The <image> tag supports three options: src, alt, and title.

nametypedescriptiondefaultoptional
srcstring-
altstring-
titlestring-

Here's an example combining all four tags:

Input and data tags

Copied!

Button Tag

Copied!

The <button> tag is the most common type of message interaction. Text is the only valid child element. It supports the following parameters:

nametypedescriptiondefaultoptional
namestringThe name of the button-
valuestringThe value of the button-
urlstringAlternatively you can specify a URL to open-

Button List Tag

Copied!

The <button_list> tag enables you to render a vertical list of buttons. It's useful if you want the user to choose from a small list of options. The only allowed children of a button_list tag are buttons.

Scheduler Tag

Copied!

The <scheduler> tag enables your users to schedule an appointment.

nametypedescriptiondefaultoptional
namestringThe name for this scheduler element-
selectedstringThe selected date, must be a valid parseable date string-
durationintegerDuration of the appointment in minutes-
ical_availabilitystringThe URL to an ICAL calendar with availability for what you're scheduling. Note that we support ICAL recurrence rules. So you can block out certain days etc.-

Add to Calendar Tag

Copied!

The <add_to_calendar> tag allows a user to add an appointment to their calendar. It supports Google, Outlook and Apple calendars.

nametypedescriptiondefaultoptional
titlestringThe title of the calendar entry-
startstringThe start date (ISO format)-
endstringThe end date (ISO format)-
locationstringThe location-
descriptionstringA description for the calendar item-
Copied!

The <carousel> tag is an alternative to the button list for showing a list of options to the user. It's typically better suited for a list of articles (e.g. a list of products, etc.). The only children allowed inside of a carousel tag are <item> tags.

Below is an example:

The Number Tag

Copied!

The <number> tag is a convenient way to have a user select a small number.

nametypedescriptiondefaultoptional
namestringThe name of the number input-
valuestringThe initial value-

Layout Tags

Copied!

Row & Column Tags

Copied!

The row and column tags implement a 12 cell grid system. By providing a grid system, MML offers you more fine-grained control over the layout for the user experience. Here's an example:

The row only allows <column> tags as its children. The column tag has the following parameters:

nametypedescriptiondefaultoptional
widthstringthe width of the cell-
offsetstringthe offset to use-
alignstringleft, center or right-