Installing Compose

To install Compose:

  1. Log into Contentful web app.

  2. In the top pane, click Apps and select Manage apps.

  3. Navigate to Compose and click Install. Complete the installation by going through the installation steps.

  4. Click Open. Compose is displayed.

  5. Start creating pages within the Compose app according to one of the following options:

  • Start with an example - Selecting this option will open a preset project that can be used as a template.

  • Create your own - Selecting this option will open Getting started page where you can configure your project on your own from scratch.

Spaces and environments

Compose is installed individually for every environment. When you install Compose, it’s content model is created in the environment that you are currently working in.

You can switch to a different space or environment when logged in to Compose. If Compose wasn’t installed in that space/environment, you will be prompted to install it.

NOTE: We recommend using Compose for new projects and installing it in a space where there is no existing content. This way you won’t risk mixing up content from different projects and breaking the production.

Compose content model requirements

Compose content model is based on two content types: Compose: Page and Metadata: SEO. They are created programmatically when you start working on your first project with Compose.

Metadata: SEO content is used to add SEO metadata to the pages you create in Compose.

Compose: Page serves as a container for another content type called page that is used to set up fields you will have in your Compose page. You can link more than one page to the Compose: Page content type to have several page types in Compose.

Page is a custom content type with custom fields that defines how your page in Compose will look like. The mandatory field for all page content types is a Text field that should have a Field ID with a value “name”. The rest of the fields can be of any type.

Was this helpful?
add-circle arrow-right remove style-two-pin-marker subtract-circle