{
"type": "color",
"name": "background_color",
"label": "Background color",
"required": true, // optional
"help": "help text shown in tooltip to creator while editing" // optional
}
{
"settings": {
"background_color": "#C8102E"
// ...additional plugin settings
}
// ...plugin-specific additional data
}
{
"type": "color",
"name": "background_color",
"label": "Background color",
"required": true, // optional
"help": "help text shown in tooltip to creator while editing" // optional
}
{
"settings": {
"background_color": "#C8102E"
// ...additional plugin settings
}
// ...plugin-specific additional data
}
Plugin type | Availablity | Additional notes |
---|---|---|
Content blocks | ||
Media source |
color
- the type of the componentcolor picker
for content blocks, alongside the settings object, Kit also shares data on the styles used within the email template - allowing your plugin to assume the styling of the email automatically, to make it feel as native as possible.
Details on the style data available can be found below:
Supported HTML elements
Shared styles
Example request
{
"settings": {
"postId": "default-to-generosity-id-123",
"favoriteColor": "#ff0000"
},
"styles": {
"p": {
"color": "rgb(45, 45, 47)",
"font-family": "Charter, Georgia, Times, \"Times New Roman\", serif",
"font-size": "18px",
"font-weight": "400",
"letter-spacing": "normal",
"line-height": "27px",
"text-align": "start",
"text-transform": "none",
"margin-top": "18px",
"margin-right": "0px",
"margin-bottom": "18px",
"margin-left": "0px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
},
"h1": {
"color": "rgb(0, 0, 0)",
"font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"font-size": "28px",
"font-weight": "700",
"letter-spacing": "normal",
"line-height": "42px",
"text-align": "start",
"text-transform": "none",
"margin-top": "0px",
"margin-right": "0px",
"margin-bottom": "0px",
"margin-left": "0px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
},
"h2": {
"color": "rgb(0, 0, 0)",
"font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"font-size": "21px",
"font-weight": "700",
"letter-spacing": "normal",
"line-height": "31.5px",
"text-align": "start",
"text-transform": "none",
"margin-top": "21px",
"margin-right": "0px",
"margin-bottom": "21px",
"margin-left": "0px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
},
"h3": {
"color": "rgb(0, 0, 0)",
"font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"font-size": "16.38px",
"font-weight": "700",
"letter-spacing": "normal",
"line-height": "24.57px",
"text-align": "start",
"text-transform": "none",
"margin-top": "16.38px",
"margin-right": "0px",
"margin-bottom": "16.38px",
"margin-left": "0px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
},
"h4": {
"color": "rgb(0, 0, 0)",
"font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"font-size": "14px",
"font-weight": "700",
"letter-spacing": "normal",
"line-height": "21px",
"text-align": "start",
"text-transform": "none",
"margin-top": "0px",
"margin-right": "0px",
"margin-bottom": "0px",
"margin-left": "0px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
},
"h5": {
"color": "rgb(0, 0, 0)",
"font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"font-size": "14px",
"font-weight": "700",
"letter-spacing": "normal",
"line-height": "15.4px",
"text-align": "start",
"text-transform": "none",
"margin-top": "0px",
"margin-right": "0px",
"margin-bottom": "0px",
"margin-left": "0px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
},
"h6": {
"color": "rgb(0, 0, 0)",
"font-family": "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"font-size": "14px",
"font-weight": "400",
"letter-spacing": "normal",
"line-height": "21px",
"text-align": "start",
"text-transform": "none",
"margin-top": "0px",
"margin-right": "0px",
"margin-bottom": "0px",
"margin-left": "0px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
},
"ol": {
"color": "rgb(45, 45, 47)",
"font-family": "Charter, Georgia, Times, \"Times New Roman\", serif",
"font-size": "18px",
"font-weight": "400",
"letter-spacing": "normal",
"line-height": "27px",
"text-align": "start",
"text-transform": "none",
"margin-top": "18px",
"margin-right": "0px",
"margin-bottom": "18px",
"margin-left": "18px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
},
"ul": {
"color": "rgb(45, 45, 47)",
"font-family": "Charter, Georgia, Times, \"Times New Roman\", serif",
"font-size": "18px",
"font-weight": "400",
"letter-spacing": "normal",
"line-height": "27px",
"text-align": "start",
"text-transform": "none",
"margin-top": "18px",
"margin-right": "0px",
"margin-bottom": "18px",
"margin-left": "18px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
},
"blockquote": {
"color": "rgb(55, 63, 69)",
"font-family": "\"open sans\", \"helvetica neue\", Helvetica, Arial, sans-serif",
"font-size": "17.5px",
"font-weight": "400",
"letter-spacing": "normal",
"line-height": "25px",
"text-align": "start",
"text-transform": "none",
"margin-top": "17.5px",
"margin-right": "0px",
"margin-bottom": "17.5px",
"margin-left": "0px",
"padding-top": "10px",
"padding-right": "20px",
"padding-bottom": "10px",
"padding-left": "20px"
},
"a": {
"color": "rgb(32, 177, 150)",
"font-family": "\"open sans\", \"helvetica neue\", Helvetica, Arial, sans-serif",
"font-size": "14px",
"font-weight": "400",
"letter-spacing": "normal",
"line-height": "20px",
"text-align": "start",
"text-transform": "none",
"margin-top": "0px",
"margin-right": "0px",
"margin-bottom": "0px",
"margin-left": "0px",
"padding-top": "0px",
"padding-right": "0px",
"padding-bottom": "0px",
"padding-left": "0px"
}
}
}
{
"type": "color",
"name": "background_color",
"label": "Background color",
"required": true, // optional
"help": "help text shown in tooltip to creator while editing" // optional
}
{
"settings": {
"background_color": "#C8102E"
// ...additional plugin settings
}
// ...plugin-specific additional data
}
Was this page helpful?