Tags

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

Text Tag

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

Markdown Tag

The <md> tag renders its content as markdown.

Icon Tag

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

name	type	description	default	optional
name	string	The icon to render	-

Image Tag

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

name	type	default	optional
src	string	-
alt	string	-	✓
title	string	-	✓

Here’s an example combining all four tags:

<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

Button Tag

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

name	type	description	default	optional
name	string	The name of the button	-	✓
value	string	The value of the button	-	✓
url	string	Alternatively you can specify a URL to open	-	✓

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

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

name	type	description	default	optional
name	string	The name for this scheduler element	-
selected	string	The selected date, must be a valid parseable date string	-	✓
duration	integer	Duration of the appointment in minutes	-	✓
ical_availability	string	The 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

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

name	type	description	default	optional
title	string	The title of the calendar entry	-
start	string	The start date (ISO format)	-
end	string	The end date (ISO format)	-
location	string	The location	-	✓
description	string	A description for the calendar item	-	✓

Carousel & Item Tags

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:

<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

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

name	type	description	default	optional
name	string	The name of the number input	-
value	string	The initial value	-

Layout Tags

Row & Column Tags

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:

<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 tags as its children. The column tag has the following parameters:

name	type	description	default	optional
width	string	the width of the cell	-	✓
offset	string	the offset to use	-	✓
align	string	left, center or right	-	✓

Message Markup Language Overview

API Error Codes