Editing widgets are modular elements extending the functionality of the Contentful entry editor. They provide custom functions, enhanced features or alternative styles allowing you to tailor the editing workflow to your specific needs. It’s important to emphasize that editing widgets do not change the underlying data or how end-users view that data; widgets only determine how editors view and interact with data.
Here is a practical illustration, imagine that a certain team is using the Contentful CMS to power a movie recommendation engine. Among other things, editors have to rate each movie on a scale from 1 to 10. Since ratings are commonly visualized using a star system, configuring the rating field to behave like a rating scale would simplify the entry process and prevent typos from slipping into the database.
Switching to a rating scale, then, would alter the way editors enter data for the better, while ratings will continue to be stored as integers.
The table below presents an overview of all the widgets available in the Contentful entry editor.
|Single line text||Text input field displayed as a single-line text box||Text|
|Multi-line text||Text input field displayed as a multi-line text box||Text|
|Markdown editor||Text editor that supports text formatting with markdown syntax||Text|
|Radio button||A list of predefined options displayed as an inline list||Text, number|
|Dropdown list||A list of predefined options displayed as a collapsable menu||Text, number|
|Number editor||Number input field displayed as a single-line text box||Number|
|Rating scale||Number input field displayed as an interactive scale||Number|
|Date picker||Date input field displayed as an overlay calendar||Date|
|Location||Geolocation input field displayed as a combination of an interactive map and an address search field||Location|
|Reference (link view)||Reference entry displayed as an inline link||Reference|
|Reference (card view)||Reference entry displayed as a card with a summary information||Reference|
|Object field||JSON input field displayed as a multi-line text box||JSON Object|
|Media asset preview||Asset preview field displayed as an inline image||Media|
|Media asset gallery||Asset preview field displayed as a grid of thumbnails||Media|
|Slug generator||Text field auto-generating a slug and checking for its uniqueness||Text (short)|
|Embedded content||Text input field auto-embedding valid media objects found in a provided URL||Text (short)|
|Kaltura video||Text input field embedding videos hosted on Kaltura platform||Text (short)|
|Ooyala video||Text input field embedding videos hosted on Ooyala platform||Text (short)|
Before jumping into configuration options, it is useful to remember that every field in your content type comes with a default widget. Thus you only need to go through the setup process when the current widget inhibits the flow of the editorial team.
To set a widget (or change it’s options), open your Content type, then for each field navigate to settings > Appearance and select an appropriate widget. The changes will take effect once the new field settings are saved and the content type is (re)published.
At the moment of writing, it is not possible to configure widgets via API. Please note that some widgets (e.g. Ooyala, Kaltura) are only open to customers on enterprise plans and have to be activated prior to use by contacting our support staff
This widget is a default option for the Short text field.
Text input widget that supports basic text formatting using markdown syntax. Markdown allows users to write using an easy-to-read, easy-to-write plain text format, which is later converted to a structurally valid HTML. The widget comes with a preview option (toggle in the top right corner) and a toolbar for most popular formatting options, including:
|Block elements||Span elements|
|Headers (heading 1, 2, 3…) |
Lists (ordered and unordered)
Links (to assets and external pages)
This widget is a default option for the Long text field.
The widget allows users to select a single value from a predefined list of options displayed as inline radio-buttons. Note that available options have to be configured using the predefined values rule in the validation tab. At the moment, the maximum number of options is capped at 50. The widget can be used in a combination with both - text and number fields.
The widget allows users to select a single value from a predefined list of options displayed as an expandable menu. Note that available options have to be configured using the predefined values rule in the validation tab. At the moment, the maximum number of options is capped at 50. Note that the widget can be used in a combination with both - text and number fields.
Number input field accepting only numerical values. When non-numerical values are entered, users are alerted to the fact, and non-numerical values are ignored. Similarly, when a decimal number is entered into the integer field, the decimal part of the input is skipped. Please note that the number editor expects a full stop to be used as a decimal mark.
This widget is a default option for the Number field.
The widget allows numerical values to be entered via an interactive rating scale. The scale can be configured to be anywhere between 1 and 20 points. Currently, the widget displays rating shapes as circles only. User input is stored internally as an integer.
Date input field prompting users to select a value from a calendar overlay. The widget can be configured to expect a date only, date and time without a timezone, and date and time with a timezone. Time input, similarly, can be displayed in 24 Hour or AM/PM notation.
Contentful stores date values as ISO 8601-encoded strings following the standard notation “2013-05-02T13:00:00Z”. The time arguments (hours, minutes, seconds) are optional and taken to be zero when not given. Similarly, when timezone argument is missing, it is set to “Z” corresponds to the zero UTC offset.
Geo-location input field giving users three options to enter data: drop a pin on an interactive map, search for an address or directly enter geographical coordinates using a decimal degrees notation (e.g. “Latitude: 40.738413 | Longitude: -73.976784”). Regardless of the input method, Contentful stores location as geo-coordinates expressed in latitude and longitude.
Reference field displaying a linked entry as a block element with a title and a status indicator. Entries can be rearranged in a list by dragging and dropping them. When entry title is missing, or content type does not have a title field, the linked entry will be displayed as “Untitled”.
This widget is a default option for the Reference field.
Reference field displaying a linked entry as an inline card with a title, status indicator, thumbnail, and a teaser info. Thumbnail and teaser are optional and will only appear if the linked entry contains the relevant information. Entries can be rearranged in a grid by dragging and dropping them. When entry title is missing, or content type does not have a title field, the linked entry will be displayed as “Untitled”.
JSON input field that only accepts a valid JSON. Any changes to the existing code have to be saved manually by clicking on a submit button or reverting to an earlier version of the code. Note that invalid JSON inputs will not be stored in Contentful.
Media asset field displaying a linked asset as a block element. Additional controls allow users view asset metadata (filename and type, its size and dimensions) and edit image assets in the built-in image editor.
This widget is a default option for the Media asset field.
Media asset field displaying a linked asset as a 120*120 px thumbnail, multiple assets are arranged in a grid. For non-image assets, the widget displays a default icon and an asset title.
The slug widget generates a web-friendly slug based on the value of the title field and verifies its uniqueness by looking at the published entries of the same content type. When the title is missing, the widget automatically generates a placeholder slug based on the current date and time.
Default length of the slug is 75 characters or less, but it can be manually extended to 250 characters. Note that the slug widget only works when a Content type has a designated title field. While the widget stops tracking changes in the title field once an entry is published, users can update the generated slug manually at any time.
Embedded content widget parses a provided URL and automatically embeds found media objects as block elements within the entry editor. Note that Contentful stores only the entered URL.
Supported formats include videos, images, presentations, streaming services, status updates and other rich media from more than 300 providers. The full list of providers can be found on the external partner page.
The widget enables users with an existing Kaltura account to search for videos hosted on the Kaltura platform and attach an ID of a selected video to an entry. Selected videos are embedded as block elements within the entry editor.
Please note that to use Kaltura widget in your space, you need to activate the integration by providing Contentful customer support representatives with your valid Kaltura API credentials (Organization ID, API key, and a secret phrase).
The widget enables users with an existing Ooyala account to search for videos hosted on the Ooyala platform and attach an ID of a selected video to an entry. Selected videos are embedded as block elements within the entry editor.
Please note that to use Ooyala widget in your space, you need to activate the integration by providing Contentful customer support with your valid Ooyala API credentials (Organization ID, Partner ID, user ID and password as well as optional values like Category ID).