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.

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

5. 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 UI Extensions SDK.

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

7. Click Save to create the extension.

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

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

2. Confirm the deletion by clicking Delete in the dialog box.