Tags

React

Select your Platform:

Client SDKs

Backend SDKs

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

Confused about "Basic Tags"?

Let us know how we can improve our documentation:

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:

Input and data tags

Confused about "Input and data tags"?

Let us know how we can improve our documentation:

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
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:

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

Confused about "Layout Tags"?

Let us know how we can improve our documentation:

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:

The row only allows <column> 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	-	✓

Select your Platform:

Client SDKs

Backend SDKs

Confused about "Tags"?

Basic Tags

Confused about "Basic Tags"?

Text Tag

Markdown Tag

Icon Tag

Image Tag

Input and data tags

Confused about "Input and data tags"?

Button Tag

Button List Tag

Scheduler Tag

Add to Calendar Tag

Carousel & Item Tags

The Number Tag

Layout Tags

Confused about "Layout Tags"?

Row & Column Tags

Tags Feedback