Tags

LAST EDIT Mar 05 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:

1
2
3
4
5
6
<mml name="layout"> 
  <text>Unsplash has the best pictures</text> 
  <image src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80" alt="Mountain" title="Mountain" /> 
  <md>**awesome** picture!</md> 
  <icon name="favorite" /> 
</mml>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<mml> 
    <md>Here are some front bumpers! that will fit your **2018-2019 JL**!</md> 
    <carousel> 
        <item> 
            <image src="https://turn5.scene7.com/is/image/Turn5/J107329-JL?wid=250&amp;hei=187&amp;op_usm=0.8,1,10,0" /> 
            <text>Barricade Adventure HD Front Bumper</text> 
            <md>**$404.99**</md> 
            <button url="https://www.extremeterrain.com/barricade-adventure-hd-front-bumper-2018-jl.html">View Product</button> 
        </item> 
        <item> 
            <image src="https://turn5.scene7.com/is/image/Turn5/J116651?wid=250&amp;hei=187&amp;op_usm=0.8,1,10,0" /> 
            <text>Barricade Adventure HD Front Bumper w/ LED Fog Lights &amp; 20 in. LED Light Bar</text> 
            <md>**$529.99**</md> 
            <button url="https://www.extremeterrain.com/barricade-adventure-hd-front-bumper-w-led-fog-lights-20-led-light-bar-0718-wrangl.html">View Product</button> 
        </item> 
        <item> 
            <image src="https://turn5.scene7.com/is/image/Turn5/J127063-JL?wid=250&amp;hei=187&amp;op_usm=0.8,1,10,0" /> 
            <text>Barricade HD Front Bumper w/ 20 in. Light Bar</text> 
            <md>**$549.99**</md> 
            <button url="https://www.extremeterrain.com/barricade-hd-front-bumper-w-20-light-bar-2018-jl.html">View Product</button> 
        </item> 
        <item> 
            <image src="https://turn5.scene7.com/is/image/Turn5/J116311?wid=250&amp;hei=187&amp;op_usm=0.8,1,10,0" /> 
            <text>RedRock 4x4 Avenger Full Width Front Bumper w/o Winch Plate</text> 
            <md>**$729.99**</md> 
            <button url="https://www.extremeterrain.com/redrock-4x4-avenger-full-width-front-bumper-w-o-winch-mount-0718-jk.html">View Product</button> 
        </item> 
    </carousel> 
</mml>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<mml name="support"> 
<text>Did you authorize these last 3 transactions on your account?</text> 
  <row> 
    <column width="4">$15</column> 
    <column width="8">Oren's Hummus</column> 
  </row> 
  <row> 
    <column width="4">$1000</column> 
    <column width="8">Apple monitor stand</column> 
  </row> 
  <row> 
    <column width="4">$60</column> 
    <column width="8">Epic Games Skins</column> 
  </row> 
<button name="authorized" value="yes">Yes</button> 
<button name="authorized" value="yes">No</button> 
</mml>

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-