Editing widgets

The guide to customizing entry editor

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.

Available widgets

The table below presents an overview of all the widgets available in the Contentful entry editor.

Name Description Field type
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)

Configuring widgets

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

How widgets work

Single line

Text input field displayed as a single line. The widget supports only plain text and removes any formatting options and line-breaks from the input.

This widget is a default option for the Short text field.

Multi-line text

Text input field displayed as a text area. The widget supports only plain text and removes any formatting options from the input.

Markdown editor

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…)
Blockquote
Horizontal rule
Code block
Lists (ordered and unordered)
Indent
Bold
Italic
Links (to assets and external pages)

This widget is a default option for the Long text field.

Radio button

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 editor

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.

Rating scale

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 picker

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.

Location

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 (card view)

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”.

Object field

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 preview

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.

Slug generator

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

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.

Kaltura video

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).

Ooyala video

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).

Discover Contentful

Learn how Contentful works

Read about our content management infrastructure, our flexible APIs and our global CDN.
View key features

See how our customers use Contentful

From apps and sites to digital signage and iBeacon campaigns — we deliver content everywhere.
Explore other customers