UI Extensions

Can I customize the Contentful Web App?

Yes, the Contentful Web App uses components (called appearances) to make the fields of a content type editable. UI Extensions are enabling developers to replace these components with HTML5 applications so the editing experiences of the Contentful Web App can be customized.

What are common use cases for UI Extensions?

Customizing the authoring experience:

  • creating custom drop downs or other interactions (e.g. creating a rating dropdown with stars)
  • rendering field values in a custom way (e.g. diff of two values)
  • reading values from other fields or even entries
  • evaluating state of child entries
  • etc..

Integrating with 3rd party services through an API

  • connect to a translation service such as Smartling
  • connect to a digital asset management system such as Bynder
  • connect to an e-commerce or personalization service such as Shopify or Optimizely

You could have a look at our samples repository for more inspiration.

How can I install a UI Extension?

There is three ways to install UI Extensions:

Is it possible to externalize configuration from the code of a UI Extension?

Yes, configuration can be added on space and on field level. - See the API documentation on configuration - How to read configuration from the UI Extension SDK during runtime.

Can I implement an OAuth flow from a UI Extension?

Yes, it is possible to complete an OAuth flow from a 3rd party hosted UI Extension. Requirements:

  • host the UI Extension yourself (using the src property)
  • have an OAuth app with a 3rd party configured
  • initialize the flow from the UI Extension into a new window, once complete pass the token back to the extension via window.postMessage
  • use window.localStorage to make token persistent in the user's session