> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovable.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect your app to Contentful

> Connect your app to Contentful to fetch and display published content from your headless CMS, including entries, assets, and rich text.

export const connector_0 = "Contentful"

[Contentful](https://www.contentful.com/) is a headless CMS that separates content management from how content is presented. The Contentful connector lets your Lovable app fetch published content from your Contentful space through the Content Delivery API. It's designed for content-driven pages, product catalogs, blogs, and documentation where editors work in Contentful and your app renders the result.

Contentful is available as an [app + chat connector](/integrations/app-connectors): one shared connection that works in the chat while you build and in your published apps.

With Contentful, your app can:

* Fetch published entries, assets, and content types from your space
* Filter and paginate entries by content type, locale, or field values
* Resolve linked entries and assets so pages render complete content
* Render rich text fields in your app

The Contentful connector is **read-only** and targets the Content Delivery API. It's a good fit when your content is authored in Contentful and your Lovable app is the front end that renders it.

## Common use cases and example apps

These examples show what you can build with Contentful, each with a prompt to start from.

| Example app                      | Example prompt                                                                                                        | Description                                                                                                                                                                                     |
| :------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Marketing and landing pages**  | *Use Contentful and build a marketing site where the homepage and feature pages load from Contentful.*                | **Build marketing pages powered by CMS content.**<br />The app fetches page entries from Contentful and renders them as components so editors can update text and images without changing code. |
| **Product catalog**              | *Use Contentful and build a product catalog that shows products stored in my Contentful space with category filters.* | **Display product listings managed in Contentful.**<br />The app fetches product entries, renders product cards, and filters and paginates on fields stored in the CMS.                         |
| **Blog and editorial site**      | *Use Contentful and build a blog that loads articles from Contentful and renders rich text and images.*               | **Create a blog backed by Contentful content.**<br />The app fetches article entries, resolves linked assets, and renders rich text fields as formatted content.                                |
| **Documentation site**           | *Use Contentful and build a documentation site where each page is an entry in Contentful.*                            | **Build documentation driven by CMS content.**<br />The app fetches documentation entries and generates navigation and pages from the content structure in Contentful.                          |
| **Multilingual content app**     | *Use Contentful and build an app that loads content in the visitor's language using Contentful locales.*              | **Serve localized content from Contentful.**<br />The app fetches entries in the requested locale and renders translated content based on the visitor's language.                               |
| **Event and announcement pages** | *Use Contentful and build an event listing page that loads upcoming events from Contentful and sorts them by date.*   | **Display event listings managed in Contentful.**<br />The app fetches event entries, sorts them by date fields, and renders the upcoming events editors maintain in the CMS.                   |

## How to connect Contentful

Who can create Contentful connections depends on your plan and workspace settings. App + chat connectors are available by default on Free, Pro, and Business plans. On Enterprise plans, they are effectively disabled at first: [Who can create connections and clients](/integrations/admin-controls#who-can-create-connections-and-clients) defaults to **No one** until an admin changes it in **Connectors → Admin settings → App + chat connectors**.

You can create multiple Contentful connections using different spaces or access tokens, which is useful for separating environments (for example, development and production) or connecting several Contentful spaces.

When the connection is created, you can [link it to the projects](/integrations/app-connectors#link-a-connection-to-a-project) where you want to use it. Anyone building in a project can ask Lovable in chat to link their project to it.

### Prerequisites

Before connecting Contentful, make sure you have:

* A Contentful account with a space that contains published content
* The **Space ID** of that space
* A **Content Delivery API access token** for that space
* Permission to **create connections** in your Lovable workspace (see [Who can create connections and clients](/integrations/admin-controls#who-can-create-connections-and-clients))

<Note>
  All API requests made through this connector use your Content Delivery API access token. API usage counts toward your Contentful plan limits, and billing is handled directly by Contentful, not Lovable.
</Note>

### Step 1: Find your Space ID and create an access token

A Content Delivery API access token lets your Lovable app read published content from one Contentful space. Both values you need are in the Contentful web app.

To find your Space ID and create a token:

<Steps>
  <Step title="Open your Contentful space">
    Sign in to [Contentful](https://app.contentful.com/) and open the space you want to connect.
  </Step>

  <Step title="Copy the Space ID">
    Go to **Settings → General settings** and copy the **Space ID**.
  </Step>

  <Step title="Create an API key">
    Go to **Settings → API keys** and click **Add API key**, or open an existing key you want to reuse. Give a new key a descriptive name, for example `Lovable integration`.
  </Step>

  <Step title="Copy the access token">
    Copy the **Content Delivery API - access token**. Do not copy the Content Preview API token. The connector reads published content only.
  </Step>
</Steps>

<Warning>
  Your access token functions like a password. Keep it secure and never share it publicly. You'll need both the Space ID and the access token in the next step.
</Warning>

See Contentful documentation for more: [Find your space ID](https://www.contentful.com/help/spaces/find-space-id) and [Authentication](https://www.contentful.com/developers/docs/references/authentication/).

### Step 2: Connect Contentful to Lovable

You can create multiple connections using different spaces or access tokens.

<Steps>
  <Step title="Open Contentful in Connectors">
    Open [**Connectors**](https://lovable.dev/dashboard?connectors) and select **Contentful**. For the other places to open the catalog from, see [Where to find connectors](/integrations/introduction#where-to-find-connectors).
  </Step>

  <Step title="Add a connection">
    Click **Add connection**.
  </Step>

  <Step title="Configure the connection">
    1. **Display name**: name the connection, for example `Contentful Prod`. This name is only used inside Lovable to identify the connection.
    2. **Space ID**: paste the Space ID you copied from Contentful.
    3. **Content Delivery API access token**: paste the access token.
  </Step>

  <Step title="Choose who can use this connection">
    Under **Who can use this connection**, decide who in your workspace can use the connection. You start as the only person with access:

    * **Only you** (default): leave the access list as is; only you can use the connection and its associated data.
    * **Invite specific people**: add workspace members by email; only you and the people you add can use the connection and its associated data.
    * **Invite entire workspace**: click **Invite entire workspace** to make the connection available to everyone in your Lovable workspace.

    See [Who can use connections and clients](/integrations/admin-controls#who-can-use-connections-and-clients) for more information.
  </Step>

  <Step title="Connect">
    Click **Connect**. Lovable verifies the token against your space through the Content Delivery API before saving the connection.
  </Step>
</Steps>

When connected, anyone building in a project can ask Lovable in chat to link their project to Contentful (based on configured connection-level access). Your Lovable apps can then fetch content from your Contentful space.

## Working with environments

Each connection reads from one space, and Lovable makes the Space ID available to linked projects so you do not repeat it in prompts. Requests use your space's `master` environment unless you ask for another one. To read from a different Contentful environment, name it when prompting Lovable, for example "load the homepage from the `staging` environment".

## Limitations

The Contentful connector is **read-only** and targets the Content Delivery API.

The Contentful connector cannot:

* Create, update, or delete content. Editors continue to manage content in the Contentful web app.
* Fetch draft or unpublished content. The connector reaches the Content Delivery API only, not the Content Preview API.
* Call the Content Management API for content authoring, space configuration, or asset uploads.
* Receive Contentful webhooks or publish events.
* Support per-end-user Contentful login. Each connection represents a single space and access token shared across all projects linked to it.

## Manage your {connector_0} connection

Connections are managed from [**Connectors**](https://lovable.dev/dashboard?connectors): select **{connector_0}**, then open the connection.

* **Unlink projects** to remove {connector_0} access from specific projects while keeping the connection available for others. See [Unlink projects from a connection](/integrations/app-connectors#unlink-projects-from-a-connection) for the steps.
* **Delete the connection** to remove it from the workspace entirely. Deleting is permanent. It removes the credentials from all linked projects, and app features that use {connector_0} stop working until a new connection is added. See [Delete a connection](/integrations/app-connectors#delete-a-connection) for the steps and who can delete.


## Related topics

- [Connect your app to Workday](/integrations/workday.md)
- [Connect your app to Notion](/integrations/notion.md)
- [Connect your app to Granola](/integrations/granola.md)
- [Connect your app to Slack](/integrations/slack.md)
- [Connect your app to Inngest](/integrations/inngest.md)