Sidebar settings components
Example sidebar configuration
type: color
setting config for a color picker.
Example color picker
type: fontFamily
setting config for a font family and font weight picker. Kit will automatically supply a list of email-friendly font families and their fallbacks.
fontFamily
fields as an object with a fontFamily
and a fontWeight
.
Example font picker
Example font weight picker
type: date
setting config for a date picker.
All dates are returned in UTC, ISO8601 format such as: “2024-10-03T07:00:00.000Z”
Example date picker
type: search
setting config for a search input.
request_url
with an empty string search
param. This allows you to autopopulate the search dropdown with default results.
When the creator types into the search input, Kit will make a debounced request to your provided request_url
to retrieve further filtered results.
request_url
with the value
of the option they had previously selected. This allows us to fill the dropdown with your user-friendly label.
The optional dependencies
configuration allows you to wait to display a search input until the creator has entered values for all of the dependency inputs.
request_url
.
You should return an array of objects, each with a label-value pair.
label
will be visible to users; it is used as the text for the result. The value
is not visible to users, but will be sent when requesting HTML for your block.
If something goes wrong, we also accept an errors
array.
multiselect: true
, then the creator will be able to select multiple options. This will be sent as an array of strings to your request_url
.
Example search input
type: select
setting config for a select input, commonly called a “dropdown menu” with a predefined list of options. The chosen value
is not visible to users, but will be sent when requesting HTML for your block.
Example select input
type: text
setting config for a single-line text input useful for entering short snippets of text.
Example text input
required: true
to a setting. We won’t request HTML from your server until all required settings are complete.
help: "some help text"
to any setting and we’ll render a tooltip on your input label with your help text.