Kit Developer Documentation

The color picker allows creators to customize content to better reflect their branding and style. It is commonly used to allow the creator to change the color of backgrounds, buttons and text to better fit in with their email templates.

Compatibility

Plugin type	Availability	Additional notes
Content blocks
Media source

Properties

string

required

color - the type of the component

string

required

A unique internal-only identifier that is posted to an app’s plugin server to share values inputted by the creator

string

required

Creator-facing identifier that is shown in the plugin environment

string

Default color value that is pre-filled when the component first loads (e.g. "#ff0000")

boolean

Determines whether the creator must select a color before proceeding

string

Brief creator-facing explanation that clarifies the component’s purpose and usage. (256 character limit. Supports markdown: [text](url), **bold**, and *italic*)

boolean

default:"false"

When set to true, displays a “Transparent” toggle that allows creators to set the color to transparent. Defaults to false.

object array

Allows for the field to be shown conditionally. dependent on other fields. See dependencies page for more details.

Show properties

string

required

Name of the dependent field

string

Value for the dependent field required to show this field. To show when any value is inputted, leave out this property.

Best practices

Automatic styling

When using the color 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

p
h1
h2
h3
h4
h5
h6
ol
ul
blockquote
a

Shared styles

“color”,
“font-family”,
“font-size”,
“font-weight”,
“letter-spacing”,
“line-height”,
“text-align”,
“text-transform”,
“margin-top”,
“margin-right”,
“margin-bottom”,
“margin-left”,
“padding-top”,
“padding-right”,
“padding-bottom”,
“padding-left”

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",
    "default": "#ff0000", // optional
    "required": true, // optional
    "help": "help text shown in tooltip to creator while editing", // optional
    "allow_transparent": true, // optional
    "dependencies": [
      {
          "field": "dependent_field",
          "value": "dependent_value" //optional
      }
    ] // optional
  }

  {
    "settings": {
      "background_color": "#C8102E" 
      // ...additional plugin settings
    }
    // ...plugin-specific additional data
  }

Getting started

Building plugins

Color picker

Compatibility

Properties

Best practices

Automatic styling

​Compatibility

​Properties

​Best practices

​Automatic styling

Compatibility

Properties

Best practices

Automatic styling