Generating Custom Rows from existing content
Custom Rows allows you to easily generate draggable rows from your application content, or other application content, without any design process or complex user interaction.
To make it possible, we built a Simplified Row Schema, a JSON that describes each row and its contents with the minimum number of elements, to easily transform existing content into a destination format compliant by the Beefree SDK system.
While the Saved Rows feature provides the complex and continuously evolving object used in the message page, the Simplified Row Schema makes it easy to build an API that feeds the editor with contents from different origins like e-commerce stores, blogs, or digital asset management systems.
Simplified Row Schema
General row schema
The following is an example of four different row objects:
- First: A row with a single column and 2 text modules (a title and a paragraph) inside.
- Second: A row with 2 equal columns and 2 text modules (a title and a paragraph) inside each one. These columns will not stack when the message is open on mobile devices.
- Third: A row with a background image on it.
- Four: A row with a display condition.
[{
"name": "First item", // Identifies the row
"columns": [{ // The columns inside the row
"weight": 12, // This weight identifies a single column row
"modules": [{ // This describes the content modules inside the column
"type": "title", // Every module is identified by a type parameter
"text": "How am I supposed to fight?"
},
{
"type": "paragraph",
"text": "Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going."
}]
}]
},
{
"name": "Second item",
"colStackOnMobile": false,
"columns": [{
"weight": 6,
"modules": [{
"type": "title",
"text": "You're going to do his laundry?"
},
{
"type": "paragraph",
"text": "Oh Leela! You're the only person I could turn to; you're the only person who ever loved me."
}]
},
{
"weight": 6,
"modules": [{
"type": "title",
"text": "Well how'd you become king then?"
},
{
"type": "paragraph",
"text": "The Lady of the Lake, her arm clad in the purest shimmering samite held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. THAT is why I am your king."
},
{
"type": "paragraph",
"text": "Listen, strange women lyin\' in ponds distributin\' swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony."
}]
}]
},
{
"background-image": "https://yourdomain/yourpath/background.png",
"background-repeat": "repeat",
"background-position": "top center",
"background-color": "#fff",
"name": "Text on background pattern",
"columns": [{
"weight": 12,
"modules": [{
"type": "paragraph",
"text": "Behind the word mountains, far from the countries Vokalia and Consonantia."
}]
}]
},
{
"name": "Developer joke",
"display-condition": {
"type": "Jokes",
"label": "developers",
"description": "Only developers will see this content",
"before": "{% if recipient.role == \'Developer\' %}",
"after": "{% endif %}"
},
"columns": [{
"weight": 12,
"modules": [{
"type": "paragraph",
"text": "Chuck Norris writes code that optimizes itself"
}]
}]
}]
General row parameters
name
The row’s name:
- A string of plain text that identifies the row.
- Displayed in the row card when the row is shown in the Rows panel.
- Included in the textual content used in searches
background image
Set a row background image.
Properties:
- background-image: valid image url
- background-repeat: repeat | no-repeat
- background-position: top | bottom + left | center | right
- background-color: #c2c2c2 // CSS value
display conditions
Set a row display condition.
Check the display conditions documentation for further details.
Properties:
- display-condition
- type
- label
- description
- before
- after
mobile
Disable stacking on mobile. Set the value to “false” to disable stacking on mobile. If the value is “true”, or not provided, the columns will stack on mobile.
- colStackOnMobile: true | false
columns
List of the row columns. Each column type is identified with a weight parameter to indicate how much horizontal space they fill.
We use a 12-column grid with the following values as available combinations:
- 12
- 9, 3
- 8, 4
- 6, 6
- 6, 3, 3
- 4, 8
- 4, 4, 4
- 3, 9
- 3, 3, 6
- 3, 6, 3
- 3, 3, 3, 3
All the columns weight inside a row must sum 12 as the total value.
See the example above in General Row Schema.
modules
List of content modules inside a column
type
Every module is identified by a type parameter. Available types are:
- title
- paragraph
- image
- button
- divider
- HTML
Each module type has a set of available options. If none is included, the editor will use the default values.
Content types scheme and parameters
Text
{
"type": "title",
"text": "I'm a headline."
}, {
"type": "paragraph",
"text": "I can be a long paragraph, a short sentence, or a simple word."
}
title adds the text with the following attributes:
- Font-size: 18px
- Font-weight: Bold
- Text-align: left
paragraph will use the following formatting:
- Font-size: 14px
- Text-align: left
text contains the string that will be displayed as content:
- Must be a plain text string
- Quotation marks must be escaped to be compliant with the JSON format
- If not included, a default “Loren Ipsum” text string will be used
Additional text parameters
"align": "center" "left" "right"
"size": integer // value in px
"bold": boolean
"italic": boolean
"underline": boolean
"color": "#CFCFCF"
"linkColor": "#CFCFCF"
Image
{
"type": "image",
"src": "https://static.pexels.com/photos/248280/pexels-photo-248280.jpeg",
"href": "https://www.beefree.io", //optional
"alt": "This is a sample image", //optional
"dynamicSrc": "http://srcto/dynamic/src" //optional
}
src image public URL
href Image action URL (link)
alt alternate text
dynamicSrc when added, the content applies the dynamic image behavior and uses the value as dynamic URL
Button
{
"type": "button",
"text": "Read more",
"href": "https://lipsum.com"
},{
"module": "button",
"text": "Keep in touch",
"href": "mailto:growth@beefree.io?subject=Custom content test&body=Sent from a custom button"
}
text text string that will be displayed as the button content. Must be a plain text string.
If not included, a default text string will be used
href button action URL (link)
Additional button parameters
"color": "#CFCFCF"
"background-color": "#C2C2C2"
Divider
{"type":"divider"}
Currently there are no additional parameters.
HTML
{"type":"html","html":"<div class=\'our-class\'>This is custom HTML.<\/div>"}