Email JSON
This page documents the email JSON schema of the Chamaileon SDK.
The latest email JSON version is 4.1.0
.
Document
Document Properties
Property |
Type |
Values |
Description |
body |
object |
Read more |
see body element for more details |
variables |
array |
Read more |
click link for more details |
components |
array |
Read more |
click link for more details |
fontFiles |
object |
key is the font name (first element in font stack), value is the font URL |
any valid css font |
title |
string |
string |
any string |
subjectLine |
string |
string |
any string |
previewText |
string |
string |
any string |
generatorOptions |
object |
Read more |
click link for more details |
Document Default
const default = {
body: {
eid: "root",
type: "body",
children: [],
version: "4.1.0",
attrs: {},
style: {
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
bodyWidth: 600,
},
},
variables: [],
components: [],
fontFiles: {},
title: "Default title",
};
Blocks
Block Properties
Property |
Type |
Values |
Description |
_id |
string |
string |
has to be unique withing the block library |
body |
object |
Read more |
has to start with fullwidth or block-level-conditional or block-level-loop, cannot start with anything else |
fontFiles |
object |
key is the font name (first element in font stack), value is the font URL |
any valid css font |
title |
string |
string |
any string |
placeholder |
array |
array of objects |
array of elements, should start with fullwidth or block-level-conditional or block-level-loop, cannot start with body, column, branch. This is used to show different content inside the editor that hides the children content |
version |
string |
string |
Email JSON version that it was created on |
Block example
const example = {
_id: "",
title: "Default title",
body: {
eid: "example",
type: "fullwidth",
style: {
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
contentBackgroundColor: "",
contentBackgroundRepeat: "no-repeat",
contentBackgroundPosition: "center center",
contentBackgroundImage: "",
contentBackgroundSize: "auto",
contentBorderRadius: "0px",
contentBorderLeftColor: "#121212",
contentBorderLeftStyle: "solid",
contentBorderLeftWidth: "0px",
contentBorderBottomColor: "#121212",
contentBorderBottomStyle: "solid",
contentBorderBottomWidth: "0px",
contentBorderRightColor: "#121212",
contentBorderRightStyle: "solid",
contentBorderRightWidth: "0px",
contentBorderTopColor: "#121212",
contentBorderTopStyle: "solid",
contentBorderTopWidth: "0px",
contentMarginLeft: "0px",
contentMarginBottom: "0px",
contentMarginRight: "0px",
contentMarginTop: "0px",
contentPaddingLeft: "0px",
contentPaddingBottom: "0px",
contentPaddingRight: "0px",
contentPaddingTop: "0px",
contentWidth: null,
},
attrs: {
hideOnMobile: false,
hideOnDesktop: false,
lock: false,
marker: "",
},
children: [],
placeholder: [],
customData: {},
},
fontFiles: {},
placeholder: [],
version: "4.1.0"
}
Variables
Color Variable
Color Variable Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters, has to be unique |
value |
string |
HEX color, color variable, "transparent" |
any HEX color that follows the format #ABABAB, "transparent", |
type |
string |
string |
has to be "color" |
const example = {
name: "example",
value: "#ABABAB",
type: "color"
}
Color Variable Properties in element style or attr prop
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the variable |
default |
string |
HEX color, color variable, "transparent" |
any HEX color that follows the format #ABABAB, "transparent", when the variable is not found this will be used |
const example = {
reference: "example",
default: "#ABABAB"
}
Image Variable
Image Variable Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters, has to be unique |
value |
string |
URL |
any image URL |
type |
string |
string |
has to be "image" |
const example = {
name: "example",
value: "https://placehold.co/150x150.png",
type: "image"
}
Image Variable Properties in element style or attr prop
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the variable |
default |
string |
URL |
any image URL, when the variable is not found this will be used |
const example = {
reference: "example",
default: "https://placehold.co/150x150.png"
}
Font Stack Variable
Font Stack Variable Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters, has to be unique |
value |
string |
string |
any font stack |
type |
string |
string |
has to be "fontStack" |
const example = {
name: "example",
value: "Arial, Helvetica Neue, Helvetica, sans-serif",
type: "fontStack"
}
Font Stack Variable Properties in element style or attr prop
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the variable |
default |
string |
string |
any font stack, when the variable is not found this will be used |
const example = {
reference: "example",
default: "Arial, Helvetica Neue, Helvetica, sans-serif"
}
Link variable
Link Variable Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters, has to be unique |
value |
string |
string |
any URL |
type |
string |
string |
has to be "link" |
const example = {
name: "example",
value: "https://example.com",
type: "fontStack"
}
Link Variable Properties in element style or attr prop
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the variable |
default |
string |
URL |
any URL, when the variable is not found this will be used |
const example = {
reference: "example",
default: "https://example.com"
}
Text variable
Text Variable Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters, has to be unique |
value |
string |
string |
any HTML or non-HTML string |
type |
string |
string |
has to be "text" |
const example = {
name: "example",
value: "Example text",
type: "fontStack"
}
Text Variable Properties in element style or attr prop
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the variable |
default |
string |
string |
any HTML or non-HTML string, when the variable is not found this will be used |
const example = {
reference: "example",
default: "Example text"
}
Components
Button Component
Button Component Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters |
reference |
string, null |
string, null |
component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color) |
type |
string |
string |
has to be "button" |
style |
object |
object |
style from Button element style |
version |
string |
string |
Email JSON version that it was created on |
const example = {
name: "example",
reference: null,
type: "button",
style: {
lineHeight: "25px",
color: "#ffffff",
fontSize: "18px",
fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
letterSpacing: "normal",
backgroundColor: "#0094c5",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "5px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "20px",
marginBottom: "20px",
marginRight: "20px",
marginTop: "20px",
paddingLeft: "15px",
paddingBottom: "15px",
paddingRight: "15px",
paddingTop: "15px",
hoverBackgroundColor: "",
sizeType: "FIT_TO_TEXT",
fullWidthOnMobile: true,
align: "center",
bold: false,
italic: false,
underline: false,
width: null
},
version: "4.1.0"
}
Button Component Properties in element style
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the component |
modified |
boolean |
boolean |
shows if the element's style was modified |
value |
object |
string |
can have parts of Button element style, has values that are not part of the component that's referenced |
default |
object |
object |
Button element style, used when the referenced component is not found |
const example = {
reference: "example",
modified: false,
value: {},
default: {
lineHeight: "25px",
color: "#ffffff",
fontSize: "18px",
fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
letterSpacing: "normal",
backgroundColor: "#0094c5",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "5px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "20px",
marginBottom: "20px",
marginRight: "20px",
marginTop: "20px",
paddingLeft: "15px",
paddingBottom: "15px",
paddingRight: "15px",
paddingTop: "15px",
hoverBackgroundColor: "",
sizeType: "FIT_TO_TEXT",
fullWidthOnMobile: true,
align: "center",
bold: false,
italic: false,
underline: false,
width: null
}
}
Divider Component
Divider Component Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters |
reference |
string, null |
string, null |
component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color) |
type |
string |
string |
has to be "divider" |
style |
object |
object |
style from Divider element style |
version |
string |
string |
Email JSON version that it was created on |
const example = {
name: "example",
reference: null,
type: "divider",
style: {
width: "2px",
type: "solid",
color: "#a9a9a9",
align: "center",
backgroundColor: "",
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
backgroundImage: "",
backgroundSize: "auto",
paddingTop: "10px",
paddingRight: "10px",
paddingBottom: "10px",
paddingLeft: "10px",
},
version: "4.1.0"
}
Divider Component Properties in element style
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the component |
modified |
boolean |
boolean |
shows if the element's style was modified |
value |
object |
string |
can have parts of Divider element style, has values that are not part of the component that's referenced |
default |
object |
object |
Divider element style, used when the referenced component is not found |
const example = {
reference: "example",
modified: false,
value: {},
default: {
width: "2px",
type: "solid",
color: "#a9a9a9",
align: "center",
backgroundColor: "",
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
backgroundImage: "",
backgroundSize: "auto",
paddingTop: "10px",
paddingRight: "10px",
paddingBottom: "10px",
paddingLeft: "10px",
}
}
Image Component
Image Component Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters |
reference |
string, null |
string, null |
component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color) |
type |
string |
string |
has to be "image" |
style |
object |
object |
style from Image element style |
version |
string |
string |
Email JSON version that it was created on |
const example = {
name: "example",
reference: null,
type: "image",
style: {
fullWidthOnMobile: false,
align: "center",
lockedWidth: null,
lockedHeight: null,
maxHeight: "300px",
maxWidth: "300px",
width: "150px",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "0px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "0px",
marginBottom: "0px",
marginRight: "0px",
marginTop: "0px",
paddingLeft: "0px",
paddingBottom: "0px",
paddingRight: "0px",
paddingTop: "0px",
},
version: "4.1.0"
}
Image Component Properties in element style
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the component |
modified |
boolean |
boolean |
shows if the element's style was modified |
value |
object |
string |
can have parts of Image element style, has values that are not part of the component that's referenced |
default |
object |
object |
Image element style, used when the referenced component is not found |
const example = {
reference: "example",
modified: false,
value: {},
default: {
fullWidthOnMobile: false,
align: "center",
lockedWidth: null,
lockedHeight: null,
maxHeight: "300px",
maxWidth: "300px",
width: "150px",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "0px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "0px",
marginBottom: "0px",
marginRight: "0px",
marginTop: "0px",
paddingLeft: "0px",
paddingBottom: "0px",
paddingRight: "0px",
paddingTop: "0px",
}
}
Typed Text Component
Typed Text Component Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters |
reference |
string, null |
string, null |
component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color) |
type |
string |
string |
has to be "typed-text" |
style |
object |
object |
style from Divider element style |
version |
string |
string |
Email JSON version that it was created on |
const example = {
name: "example",
reference: null,
type: "typed-text",
style: {
subType: "paragraph",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
paddingLeft: "10px",
paddingBottom: "5px",
paddingRight: "10px",
paddingTop: "5px",
lineHeight: "25px",
letterSpacing: "normal",
color: "#131313",
fontSize: "18px",
fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
linkTextDecoration: "underline",
linkColor: "#00c0e7",
listMarkerType: "disc",
listMarkerFontSize: "18px",
listMarkerColor: "#131313",
listMarkerFontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
lineSpacing: "0px",
align: "left",
bold: false,
italic: false,
underline: false,
},
version: "4.1.0"
}
Typed Text Component Properties in element style
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the component |
modified |
boolean |
boolean |
shows if the element's style was modified |
value |
object |
string |
can have parts of Typed Text element style, has values that are not part of the component that's referenced |
default |
object |
object |
Typed Text element style, used when the referenced component is not found |
const example = {
reference: "example",
modified: false,
value: {},
default: {
subType: "paragraph",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
paddingLeft: "10px",
paddingBottom: "5px",
paddingRight: "10px",
paddingTop: "5px",
lineHeight: "25px",
letterSpacing: "normal",
color: "#131313",
fontSize: "18px",
fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
linkTextDecoration: "underline",
linkColor: "#00c0e7",
listMarkerType: "disc",
listMarkerFontSize: "18px",
listMarkerColor: "#131313",
listMarkerFontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
lineSpacing: "0px",
align: "left",
bold: false,
italic: false,
underline: false,
}
}
Video Component
Video Component Properties
Property |
Type |
Values |
Description |
name |
string |
string |
any string, without special characters |
reference |
string, null |
string, null |
component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color) |
type |
string |
string |
has to be "video" |
style |
object |
object |
style from Video element style |
version |
string |
string |
Email JSON version that it was created on |
const example = {
name: "example",
reference: null,
type: "video",
style: {
align: "center",
iconColor: "#FF0000",
iconSize: "50px",
iconType: "youtube",
lockedWidth: null,
lockedHeight: null,
maxHeight: "338px",
maxWidth: "600px",
width: "600px",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "0px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "0px",
marginBottom: "0px",
marginRight: "0px",
marginTop: "0px",
paddingLeft: "0px",
paddingBottom: "0px",
paddingRight: "0px",
paddingTop: "0px",
},
version: "4.1.0"
}
Video Component Properties in element style
Property |
Type |
Values |
Description |
reference |
string |
string |
the name of the component |
modified |
boolean |
boolean |
shows if the element's style was modified |
value |
object |
string |
can have parts of Video element style, has values that are not part of the component that's referenced |
default |
object |
object |
Video element style, used when the referenced component is not found |
const example = {
reference: "example",
modified: false,
value: {},
default: {
align: "center",
iconColor: "#FF0000",
iconSize: "50px",
iconType: "youtube",
lockedWidth: null,
lockedHeight: null,
maxHeight: "338px",
maxWidth: "600px",
width: "600px",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "0px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "0px",
marginBottom: "0px",
marginRight: "0px",
marginTop: "0px",
paddingLeft: "0px",
paddingBottom: "0px",
paddingRight: "0px",
paddingTop: "0px",
}
}
Elements
Body
Body Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, has to be "root" |
type |
string |
string |
element type, has to be "body" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, should be fullwidth, block-level-conditional or block-level-loop |
customData |
object |
object |
any information that is not provided by our json |
Body Style
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
bodyWidth |
number |
integer |
600 |
any integer |
Body Attrs
Currently not in use.
Body Default
const default = {
eid: "root",
type: "body",
style: {
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
bodyWidth: 600,
},
attrs: {},
children: [],
customData: {},
}
Fullwidth
Fullwidth Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "fullwidth" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch |
placeholder |
array |
array of objects |
array of elements, should start with fullwidth or block-level-conditional or block-level-loop,, cannot start with body, column, branch. This is used to show different content inside the editor that hides the children content |
customData |
object |
object |
any information that is not provided by our json |
Fullwidth Style
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
contentBackgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
contentBackgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
contentBackgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
contentBackgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
contentBackgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
contentBorderRadius |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentBorderLeftColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
contentBorderLeftStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
contentBorderLeftWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentBorderBottomColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
contentBorderBottomStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
contentBorderBottomWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentBorderRightColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
contentBorderRightStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
contentBorderRightWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentBorderTopColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
contentBorderTopStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
contentBorderTopWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentMarginLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentMarginBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentMarginRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentMarginTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentPaddingLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentPaddingBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentPaddingRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentPaddingTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
contentWidth |
string or null |
integer or null |
null |
any integer or null |
Fullwidth Attrs
Property |
Type |
Values |
Default |
Acceptable values |
hideOnMobile |
boolean |
boolean |
false |
boolean |
hideOnDesktop |
boolean |
boolean |
false |
boolean |
lock |
string or boolean |
string or boolean |
false |
"all", "design", true, false |
marker |
string |
any string |
"" |
any string |
Fullwidth Default
const default = {
eid: "example",
type: "fullwidth",
style: {
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
contentBackgroundColor: "",
contentBackgroundRepeat: "no-repeat",
contentBackgroundPosition: "center center",
contentBackgroundImage: "",
contentBackgroundSize: "auto",
contentBorderRadius: "0px",
contentBorderLeftColor: "#121212",
contentBorderLeftStyle: "solid",
contentBorderLeftWidth: "0px",
contentBorderBottomColor: "#121212",
contentBorderBottomStyle: "solid",
contentBorderBottomWidth: "0px",
contentBorderRightColor: "#121212",
contentBorderRightStyle: "solid",
contentBorderRightWidth: "0px",
contentBorderTopColor: "#121212",
contentBorderTopStyle: "solid",
contentBorderTopWidth: "0px",
contentMarginLeft: "0px",
contentMarginBottom: "0px",
contentMarginRight: "0px",
contentMarginTop: "0px",
contentPaddingLeft: "0px",
contentPaddingBottom: "0px",
contentPaddingRight: "0px",
contentPaddingTop: "0px",
contentWidth: null,
},
attrs: {
hideOnMobile: false,
hideOnDesktop: false,
lock: false,
marker: "",
},
children: [],
placeholder: [],
customData: {},
}
Box
Box Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "box" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch |
customData |
object |
object |
any information that is not provided by our json |
Box Style
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
borderRadius |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderLeftColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderLeftStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderLeftWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderBottomColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderBottomStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderBottomWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderRightColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderRightStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderRightWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderTopColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderTopStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderTopWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
Box Attrs
Property |
Type |
Values |
Default |
Acceptable values |
hideOnMobile |
boolean |
boolean |
false |
boolean |
hideOnDesktop |
boolean |
boolean |
false |
boolean |
Box Default
const default = {
eid: "example",
type: "box",
style: {
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "0px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "0px",
marginBottom: "0px",
marginRight: "0px",
marginTop: "0px",
paddingLeft: "0px",
paddingBottom: "0px",
paddingRight: "0px",
paddingTop: "0px",
},
attrs: {
hideOnMobile: false,
hideOnDesktop: false,
},
children: [],
customData: {},
}
Multicolumn
Multicolumn Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "multicolumn" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, only column is acceptable |
customData |
object |
object |
any information that is not provided by our json |
Multicolumn Style
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
Multicolumn Attrs
Property |
Type |
Values |
Default |
Acceptable values |
hideOnMobile |
boolean |
boolean |
false |
boolean |
hideOnDesktop |
boolean |
boolean |
false |
boolean |
stacking |
string |
string |
"left-on-top" |
"left-on-top", "none", "right-on-top" |
spacerBefore |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
spacerBetween |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
spacerAfter |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
spacerBeforeMobile |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
spacerBetweenMobile |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
spacerAfterMobile |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
Multicolumn Default
const default = {
eid: "example",
type: "multicolumn",
style: {
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
},
attrs: {
hideOnMobile: false,
hideOnDesktop: false,
stacking: "left-on-top",
spacerBefore: "0px",
spacerBetween: "0px",
spacerAfter: "0px",
spacerBeforeMobile: "0px",
spacerBetweenMobile: "0px",
spacerAfterMobile: "0px",
},
children: [],
customData: {},
}
Column
Column Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "column" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch |
customData |
object |
object |
any information that is not provided by our json |
Column Style
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
width |
string |
integer with px postfix |
"300px" |
any integer with px postfix that follows the format 1px |
Column Attrs
Property |
Type |
Values |
Default |
Acceptable values |
hideOnMobile |
boolean |
boolean |
false |
boolean |
lock |
string or boolean |
string or boolean |
false |
"all", "design", true, false |
Column Default
const default = {
eid: "example",
type: "column",
style: {
width: "300px",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
},
attrs: {
hideOnMobile: false,
lock: false,
},
children: [],
customData: {},
}
Loop
Loop Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "loop" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch |
customData |
object |
object |
any information that is not provided by our json |
Loop Style
Currently not in use.
Loop Attrs
Property |
Type |
Values |
Default |
Acceptable values |
expression |
string |
string |
"dummy_expression" |
any string |
Loop Default
const default = {
eid: "example",
type: "loop",
style: {},
attrs: {
expression: "dummy_expression",
},
children: [],
customData: {},
}
Conditional
Conditional Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "conditional" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, only branch |
customData |
object |
object |
any information that is not provided by our json |
Conditional Style
Currently not in use.
Conditional Attrs
Currently not in use.
Conditional Default
const default = {
eid: "example",
type: "conditional",
style: {},
attrs: {},
children: [],
customData: {},
}
Block Level Loop
Block Level Loop Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "block-level-loop" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, except block-level-conditional, block-level-loop, body, column, branch |
customData |
object |
object |
any information that is not provided by our json |
Block Level Loop Style
Currently not in use.
Block Level Loop Attrs
Property |
Type |
Values |
Default |
Acceptable values |
expression |
string |
string |
"dummy_expression" |
any string |
lock |
string or boolean |
string or boolean |
false |
"all", "design", true, false |
Block Level Loop Default
const default = {
eid: "example",
type: "block-level-loop",
style: {},
attrs: {
lock: false,
expression: "dummy_expression",
},
children: [],
customData: {},
}
Block Level Conditional
Block Level Conditional Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "block-level-conditional" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, only branch |
customData |
object |
object |
any information that is not provided by our json |
Block Level Conditional Style
Currently not in use.
Block Level Conditional Attrs
Property |
Type |
Values |
Default |
Acceptable values |
lock |
string or boolean |
string or boolean |
false |
"all", "design", true, false |
Block Level Conditional Default
const default = {
eid: "example",
type: "block-level-conditional",
style: {},
attrs: {
lock: false,
},
children: [],
customData: {},
}
Branch
Branch Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "branch" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
children |
array |
array of objects |
array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch |
customData |
object |
object |
any information that is not provided by our json |
Branch Style
Currently not in use.
Branch Attrs
Property |
Type |
Values |
Default |
Acceptable values |
expression |
string |
string |
"dummy_expression" |
any string |
type |
string |
string |
"if" |
"if", "else-if", "else" |
Branch Default
const default = {
eid: "example",
type: "branch",
style: {},
attrs: {
expression: "dummy_expression",
type: "if",
},
children: [],
customData: {},
}
Button
Button Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "button" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
customData |
object |
object |
any information that is not provided by our json |
Button Style
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"#0094c5" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
borderRadius |
string |
integer with px postfix |
"5px" |
any integer with px postfix that follows the format 1px |
borderLeftColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderLeftStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderLeftWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderBottomColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderBottomStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderBottomWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderRightColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderRightStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderRightWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderTopColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderTopStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderTopWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginLeft |
string |
integer with px postfix |
"20px" |
any integer with px postfix that follows the format 1px |
marginBottom |
string |
integer with px postfix |
"20px" |
any integer with px postfix that follows the format 1px |
marginRight |
string |
integer with px postfix |
"20px" |
any integer with px postfix that follows the format 1px |
marginTop |
string |
integer with px postfix |
"20px" |
any integer with px postfix that follows the format 1px |
paddingLeft |
string |
integer with px postfix |
"15px" |
any integer with px postfix that follows the format 1px |
paddingBottom |
string |
integer with px postfix |
"15px" |
any integer with px postfix that follows the format 1px |
paddingRight |
string |
integer with px postfix |
"15px" |
any integer with px postfix that follows the format 1px |
paddingTop |
string |
integer with px postfix |
"15px" |
any integer with px postfix that follows the format 1px |
lineHeight |
string |
integer with px postfix |
"25px" |
any integer with px postfix that follows the format 1px |
color |
string, object |
HEX color, color variable, "transparent" |
"#ffffff" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
fontSize |
string |
integer with px postfix |
"18px" |
any integer with px postfix that follows the format 1px |
fontFamily |
string, object |
string, font stack variable |
"Arial, Helvetica Neue, Helvetica, sans-serif" |
any font stack, Font stack variable |
letterSpacing |
string |
integer with px postfix |
"normal" |
any integer with em postfix that follows the format 1.00em, "normal" |
hoverBackgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
sizeType |
string |
string |
"FIT_TO_TEXT" |
"FIXED", "FIT_TO_TEXT" |
fullWidthOnMobile |
boolean |
boolean |
true |
boolean |
align |
string |
string |
"center" |
"center", "left", "right" |
bold |
boolean |
boolean |
false |
boolean |
italic |
boolean |
boolean |
false |
boolean |
underline |
boolean |
boolean |
false |
boolean |
width |
string, null |
string, null |
null |
any integer with px postfix that follows the format 1px |
Button Attrs
Property |
Type |
Values |
Default |
Acceptable values |
title |
string, object |
string, text variable |
"" |
any string, Text variable |
text |
string, object |
string, text variable |
" Click here to edit me " |
any HTML formatted string, Text variable |
href |
string, object |
URL, link variable |
"" |
any URL, Link variable |
Box Default
const default = {
eid: "example",
type: "button",
style: {
lineHeight: "25px",
color: "#ffffff",
fontSize: "18px",
fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
letterSpacing: "normal",
backgroundColor: "#0094c5",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "5px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "20px",
marginBottom: "20px",
marginRight: "20px",
marginTop: "20px",
paddingLeft: "15px",
paddingBottom: "15px",
paddingRight: "15px",
paddingTop: "15px",
hoverBackgroundColor: "",
sizeType: "FIT_TO_TEXT",
fullWidthOnMobile: true,
align: "center",
bold: false,
italic: false,
underline: false,
width: null
},
attrs: {
title: "",
text: "<p>Click here to edit me</p>",
href: "",
},
customData: {},
}
Text
Text Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "text" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
customData |
object |
object |
any information that is not provided by our json |
Text Style
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
paddingLeft |
string |
integer with px postfix |
"10px" |
any integer with px postfix that follows the format 1px |
paddingBottom |
string |
integer with px postfix |
"5px" |
any integer with px postfix that follows the format 1px |
paddingRight |
string |
integer with px postfix |
"10px" |
any integer with px postfix that follows the format 1px |
paddingTop |
string |
integer with px postfix |
"5px" |
any integer with px postfix that follows the format 1px |
paragraphLineHeight |
string |
integer with px postfix |
"25px" |
any integer with px postfix that follows the format 1px |
paragraphColor |
string, object |
HEX color, color variable, "transparent" |
"#131313" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
paragraphFontSize |
string |
integer with px postfix |
"18px" |
any integer with px postfix that follows the format 1px |
paragraphFontFamily |
string, object |
string, font stack variable |
"Arial, Helvetica Neue, Helvetica, sans-serif" |
any font stack, Font stack variable |
paragraphLetterSpacing |
string |
integer with px postfix |
"normal" |
any integer with em postfix that follows the format 1.00em, "normal" |
h1LineHeight |
string |
integer with px postfix |
"40px" |
any integer with px postfix that follows the format 1px |
h1Color |
string, object |
HEX color, color variable, "transparent" |
"#131313" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
h1FontSize |
string |
integer with px postfix |
"33px" |
any integer with px postfix that follows the format 1px |
h1FontFamily |
string, object |
string, font stack variable |
"Georgia, Times, Times New Roman, serif" |
any font stack, Font stack variable |
h1LetterSpacing |
string |
integer with px postfix |
"normal" |
any integer with em postfix that follows the format 1.00em, "normal" |
h2LineHeight |
string |
integer with px postfix |
"34px" |
any integer with px postfix that follows the format 1px |
h2Color |
string, object |
HEX color, color variable, "transparent" |
"#131313" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
h2FontSize |
string |
integer with px postfix |
"26px" |
any integer with px postfix that follows the format 1px |
h2FontFamily |
string, object |
string, font stack variable |
"Georgia, Times, Times New Roman, serif" |
any font stack, Font stack variable |
h2LetterSpacing |
string |
integer with px postfix |
"normal" |
any integer with em postfix that follows the format 1.00em, "normal" |
h3LineHeight |
string |
integer with px postfix |
"27px" |
any integer with px postfix that follows the format 1px |
h3Color |
string, object |
HEX color, color variable, "transparent" |
"#131313" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
h3FontSize |
string |
integer with px postfix |
"22px" |
any integer with px postfix that follows the format 1px |
h3FontFamily |
string, object |
string, font stack variable |
"Georgia, Times, Times New Roman, serif" |
any font stack, Font stack variable |
h3LetterSpacing |
string |
integer with px postfix |
"normal" |
any integer with em postfix that follows the format 1.00em, "normal" |
linkTextDecoration |
string |
string |
"underline" |
"underline", "none" |
linkColor |
string, object |
HEX color, color variable, "transparent" |
"#00c0e7" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
Text Attrs
Property |
Type |
Values |
Default |
Acceptable values |
text |
string, object |
string, text variable |
Double click to edit text! " |
any HTML formatted string, Text variable |
Text Default
const default = {
eid: "example",
type: "text",
style: {
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
paddingLeft: "10px",
paddingBottom: "5px",
paddingRight: "10px",
paddingTop: "5px",
paragraphLineHeight: "25px",
paragraphLetterSpacing: "normal",
paragraphColor: "#131313",
paragraphFontSize: "18px",
paragraphFontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
linkTextDecoration: "underline",
linkColor: "#00c0e7",
h3LineHeight: "27px",
h3Color: "#131313",
h3FontSize: "22px",
h3FontFamily: "Georgia, Times, Times New Roman, serif",
h3LetterSpacing: "normal",
h2LineHeight: "34px",
h2Color: "#131313",
h2FontSize: "26px",
h2FontFamily: "Georgia, Times, Times New Roman, serif",
h2LetterSpacing: "normal",
h1LineHeight: "40px",
h1Color: "#131313",
h1FontSize: "33px",
h1FontFamily: "Georgia, Times, Times New Roman, serif",
h1LetterSpacing: "normal",
},
attrs: {
text: "<p>Double click to edit text!</p>",
},
customData: {},
}
Typed Text
Typed Text Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "typed-text" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
customData |
object |
object |
any information that is not provided by our json |
Typed Text Style
Can be replaced with a component. See Typed Text component.
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
paddingLeft |
string |
integer with px postfix |
"10px" |
any integer with px postfix that follows the format 1px |
paddingBottom |
string |
integer with px postfix |
"5px" |
any integer with px postfix that follows the format 1px |
paddingRight |
string |
integer with px postfix |
"10px" |
any integer with px postfix that follows the format 1px |
paddingTop |
string |
integer with px postfix |
"5px" |
any integer with px postfix that follows the format 1px |
lineHeight |
string |
integer with px postfix |
"25px" |
any integer with px postfix that follows the format 1px |
color |
string, object |
HEX color, color variable, "transparent" |
"#131313" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
fontSize |
string |
integer with px postfix |
"18px" |
any integer with px postfix that follows the format 1px |
fontFamily |
string, object |
string, font stack variable |
"Arial, Helvetica Neue, Helvetica, sans-serif" |
any font stack, Font stack variable |
letterSpacing |
string |
integer with px postfix |
"normal" |
any integer with em postfix that follows the format 1.00em, "normal" |
linkTextDecoration |
string |
string |
"underline" |
"underline", "none" |
linkColor |
string, object |
HEX color, color variable, "transparent" |
"#00c0e7" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
subType |
string |
string |
"paragraph" |
"paragraph", "heading1", "heading2", "heading3", "list" |
listMarkerType |
string |
string |
"disc" |
"disc", "square", "decimal", "lower-roman", "upper-roman", "lower-alpha", "upper-alpha" |
listMarkerFontSize |
string |
integer with px postfix |
"18px" |
any integer with px postfix that follows the format 1px |
listMarkerColor |
string, object |
HEX color, color variable, "transparent" |
"#131313" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
listMarkerFontFamily |
string, object |
string, font stack variable |
"Arial, Helvetica Neue, Helvetica, sans-serif" |
any font stack, Font stack variable |
lineSpacing |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
align |
string |
string |
"center" |
"center", "left", "right", "justify" |
bold |
boolean |
boolean |
false |
boolean |
italic |
boolean |
boolean |
false |
boolean |
underline |
boolean |
boolean |
false |
boolean |
Typed Text Attrs
Property |
Type |
Values |
Default |
Acceptable values |
text |
string, object |
string, text variable |
"Double click to edit text!" |
any text string, Text variable |
Typed Text Default
const default = {
eid: "example",
type: "typed-text",
style: {
subType: "paragraph",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
paddingLeft: "10px",
paddingBottom: "5px",
paddingRight: "10px",
paddingTop: "5px",
lineHeight: "25px",
letterSpacing: "normal",
color: "#131313",
fontSize: "18px",
fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
linkTextDecoration: "underline",
linkColor: "#00c0e7",
listMarkerType: "disc",
listMarkerFontSize: "18px",
listMarkerColor: "#131313",
listMarkerFontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
lineSpacing: "0px",
align: "left",
bold: false,
italic: false,
underline: false,
},
attrs: {
text: "Double click to edit text!",
},
customData: {},
}
Divider
Divider Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "divider" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
customData |
object |
object |
any information that is not provided by our json |
Divider Style
Can be replaced with a component. See Divider component.
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
paddingLeft |
string |
integer with px postfix |
"10px" |
any integer with px postfix that follows the format 1px |
paddingBottom |
string |
integer with px postfix |
"10px" |
any integer with px postfix that follows the format 1px |
paddingRight |
string |
integer with px postfix |
"10px" |
any integer with px postfix that follows the format 1px |
paddingTop |
string |
integer with px postfix |
"10px" |
any integer with px postfix that follows the format 1px |
width |
string |
integer with px postfix |
"2px" |
any integer with px postfix that follows the format 1px |
type |
string |
string |
"solid" |
"solid", "double", "dashed", "dotted" |
color |
string, object |
HEX color, color variable, "transparent" |
"#a9a9a9" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
align |
string |
string |
"center" |
"center", "left", "right", "justify" |
Divider Attrs
Currently not in use.
Divider Default
const default = {
eid: "example",
type: "divider",
style: {
width: "2px",
type: "solid",
color: "#a9a9a9",
align: "center",
backgroundColor: "",
backgroundPosition: "center center",
backgroundRepeat: "no-repeat",
backgroundImage: "",
backgroundSize: "auto",
paddingTop: "10px",
paddingRight: "10px",
paddingBottom: "10px",
paddingLeft: "10px",
},
attrs: {},
customData: {},
}
Image
Image Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "image" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
customData |
object |
object |
any information that is not provided by our json |
Image Style
Can be replaced with a component. See Image component.
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
borderRadius |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderLeftColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderLeftStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderLeftWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderBottomColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderBottomStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderBottomWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderRightColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderRightStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderRightWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderTopColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderTopStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderTopWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
fullWidthOnMobile |
boolean |
boolean |
false |
boolean |
align |
string |
string |
"center" |
"center", "left", "right" |
lockedWidth |
string, null |
string, null |
null |
any integer with px postfix that follows the format 1px, null |
lockedHeight |
string, null |
string, null |
null |
any integer with px postfix that follows the format 1px, null |
maxHeight |
string |
integer with px postfix |
"300px" |
any integer with px postfix that follows the format 1px |
maxWidth |
string |
integer with px postfix |
"300px" |
any integer with px postfix that follows the format 1px |
width |
string |
integer with px postfix |
"150px" |
any integer with px postfix that follows the format 1px |
Image Attrs
Property |
Type |
Values |
Default |
Acceptable values |
title |
string, object |
string, text variable |
"" |
any string, Text variable |
link |
string, object |
URL, link variable |
"" |
any URL, Link variable |
altText |
string, object |
string, text variable |
"" |
any string, Text variable |
src |
string, object |
URL, image variable |
"https://cdn.chamaileon.io/assets/img/image_placeholder.png" |
any image URL, Image variable |
Image Default
const default = {
eid: "example",
type: "image",
style: {
fullWidthOnMobile: false,
align: "center",
lockedWidth: null,
lockedHeight: null,
maxHeight: "300px",
maxWidth: "300px",
width: "150px",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "0px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "0px",
marginBottom: "0px",
marginRight: "0px",
marginTop: "0px",
paddingLeft: "0px",
paddingBottom: "0px",
paddingRight: "0px",
paddingTop: "0px",
},
attrs: {
title: "",
link: "",
altText: "",
src: "https://cdn.chamaileon.io/assets/img/image_placeholder.png",
},
customData: {},
}
Dynamic Image
Dynamic Image Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "dynamic-image" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
customData |
object |
object |
any information that is not provided by our json |
Dynamic Image Style
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
borderRadius |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderLeftColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderLeftStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderLeftWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderBottomColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderBottomStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderBottomWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderRightColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderRightStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderRightWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderTopColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderTopStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderTopWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
fullWidthOnMobile |
boolean |
boolean |
false |
boolean |
align |
string |
string |
"center" |
"center", "left", "right" |
maxHeight |
string |
integer with px postfix |
"300px" |
any integer with px postfix that follows the format 1px |
maxWidth |
string |
integer with px postfix |
"300px" |
any integer with px postfix that follows the format 1px |
width |
string |
integer with px postfix |
"150px" |
any integer with px postfix that follows the format 1px |
height |
string |
integer with px postfix |
"150px" |
any integer with px postfix that follows the format 1px |
Dynamic Image Attrs
Property |
Type |
Values |
Default |
Acceptable values |
title |
string, object |
string, text variable |
"" |
any string, Text variable |
link |
string, object |
URL, link variable |
"" |
any URL, Link variable |
altText |
string, object |
string, text variable |
"" |
any string, Text variable |
src |
string |
URL |
"https://placehold.co/150x150.png" |
any image URL |
Dynamic Image Default
const default = {
eid: "example",
type: "dynamic-image",
style: {
align: "center",
fullWidthOnMobile: false,
maxHeight: "300px",
maxWidth: "300px",
width: "150px",
height: "150px",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "0px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "0px",
marginBottom: "0px",
marginRight: "0px",
marginTop: "0px",
paddingLeft: "0px",
paddingBottom: "0px",
paddingRight: "0px",
paddingTop: "0px",
},
attrs: {
title: "",
link: "",
altText: "",
src: "https://placehold.co/150x150.png"
},
customData: {},
}
Video
Video Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "video" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
customData |
object |
object |
any information that is not provided by our json |
Video Style
Can be replaced with a component. See Video component.
Property |
Type |
Values |
Default |
Acceptable values |
backgroundColor |
string, object |
HEX color, color variable, "transparent" |
"" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
backgroundRepeat |
string |
css value |
"no-repeat" |
"no-repeat", "repeat", "repeat-x", "repeat-y" |
backgroundPosition |
string |
css value |
"center center" |
"left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right" |
backgroundImage |
string, object |
URL, image variable |
"" |
any image URL, Image variable |
backgroundSize |
string |
css value |
"auto" |
"auto", "contain", "cover" |
borderRadius |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderLeftColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderLeftStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderLeftWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderBottomColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderBottomStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderBottomWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderRightColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderRightStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderRightWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
borderTopColor |
string, object |
HEX color, color variable, "transparent" |
"#121212" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
borderTopStyle |
string |
css value |
"solid" |
"double", "dotted", "dashed", "solid", "none" |
borderTopWidth |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
marginTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingLeft |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingBottom |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingRight |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
paddingTop |
string |
integer with px postfix |
"0px" |
any integer with px postfix that follows the format 1px |
fullWidthOnMobile |
boolean |
boolean |
false |
boolean |
align |
string |
string |
"center" |
"center", "left", "right" |
lockedWidth |
string, null |
string, null |
null |
any integer with px postfix that follows the format 1px, null |
lockedHeight |
string, null |
string, null |
null |
any integer with px postfix that follows the format 1px, null |
maxHeight |
string |
integer with px postfix |
"338px" |
any integer with px postfix that follows the format 1px |
maxWidth |
string |
integer with px postfix |
"600px" |
any integer with px postfix that follows the format 1px |
width |
string |
integer with px postfix |
"600px" |
any integer with px postfix that follows the format 1px |
iconColor |
string, object |
HEX color, color variable, "transparent" |
"#FF0000" |
any HEX color that follows the format #ABABAB, "transparent", Color variable |
iconSize |
string |
integer with px postfix |
"50px" |
any integer with px postfix that follows the format 1px |
iconType |
string |
string |
"youtube" |
"play", "play-box", "play-box-outline", "play-circle", "play-circle-outline", "youtube" |
Video Attrs
Property |
Type |
Values |
Default |
Acceptable values |
link |
string, object |
URL, link variable |
"" |
any URL, Link variable |
altText |
string, object |
string, text variable |
"" |
any string, Text variable |
videoId |
string |
string |
"" |
any videoId from vimeo or youtube |
videoProvider |
string |
string |
"" |
"vimeo", "youtube" |
previewBaseUrl |
string |
URL |
"" |
Video element backend base URL |
thumbnailBaseUrl |
string |
URL |
"" |
Video element backend base URL |
src |
string |
URL |
"https://placehold.co/600x338.png" |
any image URL |
Video Default
const default = {
eid: "example",
type: "video",
style: {
align: "center",
iconColor: "#FF0000",
iconSize: "50px",
iconType: "youtube",
lockedWidth: null,
lockedHeight: null,
maxHeight: "338px",
maxWidth: "600px",
width: "600px",
backgroundColor: "",
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundImage: "",
backgroundSize: "auto",
borderRadius: "0px",
borderLeftColor: "#121212",
borderLeftStyle: "solid",
borderLeftWidth: "0px",
borderBottomColor: "#121212",
borderBottomStyle: "solid",
borderBottomWidth: "0px",
borderRightColor: "#121212",
borderRightStyle: "solid",
borderRightWidth: "0px",
borderTopColor: "#121212",
borderTopStyle: "solid",
borderTopWidth: "0px",
marginLeft: "0px",
marginBottom: "0px",
marginRight: "0px",
marginTop: "0px",
paddingLeft: "0px",
paddingBottom: "0px",
paddingRight: "0px",
paddingTop: "0px",
},
attrs: {
link: "",
altText: "",
videoId: "",
videoProvider: "",
previewBaseUrl: "",
thumbnailBaseUrl: "",
src: "https://placehold.co/600x338.png",
},
customData: {},
}
Code
Code Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "code" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
customData |
object |
object |
any information that is not provided by our json |
placeholder |
object |
object |
element, except fullwidth, block-level-conditional, block-level-loop, body, column, branch. This is used to show different content inside the editor that hides the actual content |
Code Style
Currently not in use.
Code Attrs
Property |
Type |
Values |
Default |
Acceptable values |
title |
string |
string |
"Your title" |
any string |
content |
string |
string |
"" |
any HTML string |
style |
string |
string |
"" |
any AMP supported css |
isAmp |
boolean |
boolean |
false |
boolean |
Code Default
const default = {
eid: "example",
type: "code",
style: {},
attrs: {
title: "Your title",
content: "<your-code></your-code>",
style: "",
isAmp: false,
},
placeholder: {},
customData: {},
}
Social
Social Properties
Property |
Type |
Values |
Description |
eid |
string |
string |
has to be unique within the full JSON, cannot be "root" |
type |
string |
string |
element type, has to be "social" |
style |
object |
Read more |
see style properties of this element |
attrs |
object |
Read more |
see attr properties of this element |
customData |
object |
object |
any information that is not provided by our json |
Social Style
Currently not in use.
Social Attrs
Property |
Type |
Values |
Default |
Acceptable values |
elements |
array |
object |
{} |
any element object that contains the 3 parameters that are detailed below |
elements.type |
string |
string |
"" |
"Blogger", "Facebook", "Instagram", "Linkedin", "Medium", "Pinterest", "Snapchat", "SoundCloud", "Spotify", "Telegram", "TikTok", "Tumblr", "Twitter", "Vimeo", "Vkontakte", "WeChat", "YouTube" |
elements.link |
string |
URL |
"" |
any URL |
elements.src |
string |
string |
"" |
any string that targets the icon without the base URL |
align |
string |
string |
"center" |
"center", "left", "right" |
color |
string |
string |
"colorful" |
"colorful", "black", "grey", "white" |
iconSet |
number |
integer between 1 and 5 |
4 |
1 (flat), 2 (square), 3 (roundedSquare), 4 (circle), 5 (transparentCircle) |
size |
number |
any integer |
40 |
any integer |
layout |
string |
string |
"horizontal" |
"horizontal", "vertical" |
spacing |
number |
any integer |
10 |
any integer |
hideOnMobile |
boolean |
boolean |
false |
boolean |
hideOnDesktop |
boolean |
boolean |
false |
boolean |
reorderOnMobile |
boolean |
boolean |
false |
boolean |
baseUrl |
string |
URL |
"https://cdn.chamaileon.io/assets/" |
any URL that targets the CDN where you store your social icons |
Social Default
const default = {
eid: "example",
type: "social",
style: {},
attrs: {
elements: [
{
type: "Facebook",
link: "https://www.facebook.com/",
src: "img/Facebook/fb-4-colorful.png",
},
{
type: "Linkedin",
link: "https://www.linkedin.com/",
src: "img/Linkedin/li-4-colorful.png",
},
{
type: "Instagram",
link: "https://www.instagram.com/",
src: "img/Instagram/ig-4-colorful.png",
},
{
type: "Twitter",
link: "https://www.twitter.com/",
src: "img/Twitter/tw-4-colorful.png",
},
],
align: "center",
color: "colorful",
iconSet: 4,
size: 40,
layout: "horizontal",
spacing: 10,
hideOnMobile: false,
hideOnDesktop: false,
reorderOnMobile: false,
baseUrl: "https://cdn.chamaileon.io/assets/",
},
customData: {},
}
Changelog
4.1.0
Added
bold
, italic
and underline
properties to button style
bold
, italic
and underline
properties to typed-text style
- validation and conversion tools for
customData.externalElementDefaultJson
that is used with the new externalElements feature (more details in the Editor External elements section)
4.0.0 or older
- This is the starting point of the documentation