MML Overview

Last Edit: Oct 23 2020

Message Markup Language (MML) enables you to build interactive messages experiences. See below for an example message using MML:

MML is an experimental feature, contact support to get early access. We're looking for as much feedback as possible about your various use cases prior to the public launch.

MML supports adding buttons to your messages and simple forms with optimized UI for mobile. Date Scheduling, Basic images, icons, and tables are also supported.

The goal for MML is to have a standardized way to handle the most common use cases for message interactivity. If you need something more complex, you can always write a custom message/attachment layout.

As a first example, let's render a simple button:

A Simple MML Example


<mml name="support">
  <text>It looks like your credit card isn't activated yet, activate it now:</text>
  <button name="action" value="Activate">Activate Card</button>
</mml>
                    

MML an attachment type in Stream Chat. You can send a message with MML like this:


const mmlSource = '<mml><button name="action" value="Activate">Activate Card</button></mml>';
const message = {attachments: [{type: 'mml', mml: mmlSource}]};
const response = await channel.sendMessage(message);
                    

$mmlSource = '<mml><button name="action" value="Activate">Activate Card</button></mml>';
$message = [ 'attachments' => [['type' => 'mml', 'mml' => $mmlSource]] ];
$response = $channel->sendMessage($message,'jenny');
                    

Scheduling an Appointment

MML supports a <scheduler> tag and an <add_to_calendar> tag. This makes it easy to schedule an appointment without ever leaving your chat interface.

Here's how you can render a scheduler interface. Note how the interface takes availability into account using an iCal calendar. The UI is optimized for scheduling a date in the near future:


<mml>
  <text>When would you like to schedule your massage?</text>
  <scheduler name="massage_appointment" duration="30" availability_ical="ical_url" />
  <button name="action" value="reserve">Reserve</button>
</mml>
                    

After the user schedules an appointment, you'll want to show an add to calendar widget:


<mml>
  <text>Thanks for scheduling the appointment. Add it to your calendar</text>
  <add_to_calendar title="Massage with Jessica" start="2019-12-24T14:42:54.148Z" end="2019-12-24T15:42:54.148Z" />
</mml>
                    

For many customer support and e-commerce use-cases, you'll want to render a carousel. This type of layout makes it easy to select from a short list of options and show some additional information:


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

Button List Example

The button list is a convenient way to show a small list of options to a user:


<mml name="food_order">
  Sorry we're currently out of fries, what would you like as a side?
  <button_list>
    <button name="side" value="salad">Salad</button>
    <button name="side" value="potatoes">Baked Potatoes</button>
    <button name="side" value="fried_pickles">Fried Pickles</button>
  </button_list>
</mml>
                    

Number Input

Chat is typically rendered on a mobile device, which inherently has a small interface to work with. The data elements are optimized for mobile input. For example, here is how you can input a number:


<mml name="counts">
  <text>How many donuts do you want for lunch?</text>
  <image src="https://images.unsplash.com/photo-1527904324834-3bda86da6771?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=250&q=80" />
  <number name="donuts" value="3" />
  <button name="confirm" value="Confirm">Confirm</button>
</mml>