Tags

Last Edit: Sep 22 2020

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 it's 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.

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 -

Button List Tag

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
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. -
name string The name for this scheduler element -

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 -