Links

Content Grouping

Tags

MessageML supports the following tags for grouping information within a message:
Tag
Description
Optional attributes
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Heading text. 6 levels.
class
<p>paragraph</p>
Paragraph formatting.
class
<hr />
Horizontal rule.
None.
<ul> <li>list item</li> </ul>
Unordered or bullet list. Cannot be empty, must contain at least one child <li> item.
class
<ol> <li>list item</li> </ol>
Numbered list. Cannot be empty, must contain at least one child <li> item.
class
<div>paragraph</div>
Block of text. • This tag can be used to specify visual styles, by adding a class attribute. • This tag is used to create Structured objects. • This tag is also the root of any message read through the API.
class: color options data-entity-iddata-icon-srcdata-accent-color • See below for list of translated PresentationML attributes.
<card> (see example below)
Inserts a card. It contains two different sections: • the <header> (always visible) • the <body> (hidden)
iconSrc: image will be resized to 28 pixels by 28 pixels, use spacious mode. (.jpg, .png and .gif) • accent: use background color values to select the accent color of the card.
<expandable-card> (see example below)
Inserts a card with new styles and multiple levels of display within the card
state (mandatory) in <expandable-card> can take 3 values: - "collapsed": only header is visible - "cropped": card expanded but the body is cropped - "expanded": card fully expanded • variant (optional) in <body>: defines the style of the card. It can be either "default" for the default blue style, or "error" for the red error style

Examples

Here after you can find an example of a message sent by a bot and containing these content grouping tags as well as the structure of the messageML sent:
Message containing content grouping tags
messageML structure
<messageML>
<h1>Heading texts</h1>
<h1>This is a h1 heading text</h1>
<h2>This is a h2 heading text</h2>
<h3>This is a h3 heading text</h3>
<h4>This is a h4 heading text</h4>
<h5>This is a h5 heading text</h5>
<h6>This is a h6 heading text</h6><br/>
<h1>Paragraphs</h1>
<p>This is a paragraph.</p>
<div style="color:red;">
<p>This is a paragraph enclosed in a div that allows its text to be red.</p>
</div><br/>
<h1>Horizontal Rule</h1>
Below you can see an horizontal rule<hr /><br/>
<h1>Lists</h1>
This is an unordered/bullet list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
This is a numbered list:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol><br/>
<h1>Cards</h1>
<card accent="tempo-bg-color--blue">
<header>This is the header of a card</header>
<body>This is the body of a card</body>
</card>
<expandable-card state="expanded">
<header>This is the header of an expanded expandabled-card</header>
<body variant="error">This is an error variant of the body of an expanded expandable-card</body>
</expandable-card>
</messageML>
Please note that you can use content grouping tags mixed with other messageML tags such as Interactive Elements Forms. See the following example including forms in expandable-cards.
Users interacting with forms and expandable-cards
messageML structure
<messageML>
<form id="form_id">
<h1>expandable-cards</h1>
<h2>1st expandable-card</h2>
<expandable-card state="collapsed">
<header><h3>Header Content (always visible)</h3>This is a <b>collapsed</b> expandable-card with the <b>default</b> variant</header>
<body>
<h3>Body Content</h3>
It is possible to use Elements in the body as you can see below:
<text-field name="id1" placeholder="Enter your name..."/>
<text-field name="id2" placeholder="Enter your age..."/>
<button type="reset">Reset</button>
</body>
</expandable-card><br/>
<h2>2nd expandable-card</h2>
<expandable-card state="expanded">
<header><h3>Header Content (always visible)</h3><text-field name="id_header" label="Text-field in the header" placeholder="Type your input..."/>This is an <b>expanded</b> expandable-card with the <b>default</b> variant and with a <b>Symphony Element</b> in the header</header>
<body>
<h3>Body Content</h3>
When expanded, the whole body content is displayed in the expandable-card.
<text-field name="id3" placeholder="Enter your name..."/>
<text-field name="id4" placeholder="Enter your age..."/>
</body>
</expandable-card><br/>
<h2>3rd expandable-card</h2>
<expandable-card state="cropped">
<header><h3>Header Content (always visible)</h3>This is a <b>cropped</b> expandable-card with the <b>error</b> variant</header>
<body variant="error">
<h3>Body Content</h3>
When cropped, the body content is displayed in the expandable-card until a certain limit. A show more button allows to expand the card and display the rest of the body.
</body>
</expandable-card>
<button name="form_id_submit">Submit</button>
</form>
</messageML>
Last modified 1mo ago