Was this page helpful?

UI extensions - Web app tools

This section provides step-by-step instructions to build a UI Extension from scratch and also manage the UI Extensions through the Contentful web app.

Create a new UI Extension

To get started:

  1. Navigate to Settings > Extensions in the Contentful web app.

  2. Select Add a new extension from the Add extension drop down (located at the top right corner).

  3. Enter a Name for the extension and select the Field types where the extension can be used.

In product image with field types for adding a new extension

  1. Before selecting the Hosting option, it is important to understand that Extensions with a total payload less than or equal to 512KB can be hosted by Contentful. Extensions with a total payload greater than 512KB must be Self-hosted and the URL needs to be provided.

  2. If Hosted by Contentful option is selected, build the html file under the Code field. This file must include the markup code, the logic, and the App SDK.

  3. Enter the Parameter definitions and if required select the Render in sidebar check-box.

Create extension

  1. Click Save to create the extension.

  2. Refer the section Assigning UI Extensions to a Field to assign the extension to the particular field where it needs to be used.

Editing a UI Extension

In the Extensions page:

  1. Select Edit corresponding to the desired Extension to be edited.

Edit extension

  1. Perform the required changes and Save the updates.

Deleting a UI Extension

In the Extensions page:

  1. Select Delete corresponding to the desired Extension to be deleted.

Delete extension

Note: Deleting the Extension would restore the default settings (Appearance) on all the fields to which this Extension was assigned.
  1. Confirm the deletion by clicking Delete in the dialog box.

Next steps

Not what you’re looking for? Try our FAQ.