> ## 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 using the Content Delivery API (CDA). Your app can then render content driven pages, product catalogs, blogs, or documentation powered by the content stored in Contentful.
With Contentful, your app can:
* Fetch published entries, assets, and content types from your space
* Deliver content through Contentful's CDN backed Content Delivery API
* Build dynamic pages and layouts powered by your CMS content
* Filter and paginate entries by content type, locale, or field values
* Render rich text fields in your app UI
The Contentful connector is **read only**. It does not support creating, updating, or deleting content. All content management happens in the Contentful web app or through the Contentful Management API.
## Common use cases and example apps
| Example app | Example prompt | Description |
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Marketing and landing page sites** | *Use Contentful and build a marketing site where the homepage and feature pages are loaded from Contentful.* | **Build marketing pages powered by CMS content.**
The app fetches page entries from Contentful and renders them as components so editors can update text and images without changing code. |
| **Product catalog apps** | *Use Contentful and build a product catalog that shows products stored in my Contentful space with category filters.* | **Display product listings managed in Contentful.**
The app fetches product entries, renders product cards, and supports filtering and pagination based on fields stored in the CMS. |
| **Blog and editorial platforms** | *Use Contentful and build a blog that loads articles from Contentful and renders rich text and images.* | **Create a blog backed by Contentful content.**
The app fetches article entries, resolves linked assets, and renders rich text fields as formatted content. |
| **Documentation sites** | *Use Contentful and build a documentation site where each doc page is stored as an entry in Contentful.* | **Build documentation driven by CMS content.**
The app fetches documentation entries and generates navigation and pages from the content structure in Contentful. |
| **Multilingual content apps** | *Use Contentful and build an app that loads content in the user's language using Contentful locales.* | **Serve localized content from Contentful.**
The app fetches entries in the requested locale and renders translated content based on the user'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.**
The app fetches event entries, sorts them by date fields, and renders upcoming events that editors maintain in the CMS. |
## How to connect Contentful
Workspace **admins** and **owners** can connect Contentful.
You can create multiple Contentful connections using different API keys or different spaces. This can be useful for separating development and production environments or connecting multiple Contentful spaces.
When the connection is created, Contentful becomes available across all projects in the workspace.
### Prerequisites
Before connecting Contentful, make sure you have:
* A Contentful account with a space that contains published content
* A **Content Delivery API (CDA) access token** for that space
* Your **Space ID**
* Lovable workspace owner or admin role
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.
### Step 1: Find your space ID and create a CDA access token
Your Space ID and CDA access token are both available in the Contentful web app.
**To find your Space ID:**
1. Log in to [app.contentful.com](https://app.contentful.com).
2. Open the space you want to connect.
3. Go to **Settings → General settings**.
4. Copy the **Space ID**.
See Contentful documentation for detailed instructions: [Find space ID ](https://www.contentful.com/help/spaces/find-space-id)
**To create a Content Delivery API access token:**
1. In the same space, go to **Settings → API keys**.
2. Click **Add API key** or open an existing key.
3. Give the key a name such as `Lovable integration`.
4. Copy the **Content Delivery API access token**.
See Contentful documentation for detailed instructions: [Authentication](https://www.contentful.com/developers/docs/references/authentication/)
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.
### Step 2: Connect Contentful to Lovable
1. Open **Connectors** → **App connectors** and select **Contentful**.
2. Click **Add connection**.
3. Enter a **Display name**, for example `Contentful Prod`.
4. Enter your **Space ID**.
5. Enter your **Content Delivery API access token**.
6. Click **Connect**.
When connected, your Lovable apps can start fetching content from your Contentful space.
## How to unlink projects from a {connector_0} connection
Editors and above can remove specific projects from a connection without deleting the connection entirely. The connection will remain available for other projects.
To unlink projects:
Open **Connectors**, then go to **App connectors**, and select **{connector_0}**.
Open the connection you want to manage.
Under **Linked projects**, check the projects you want to unlink.
Click **Unlink projects** and confirm.
When unlinked, those projects will no longer have access to {connector_0} through this connection. If a project needs {connector_0} again, you can link it to any available connection.
## How to delete a {connector_0} connection
Workspace admins and owners can delete {connector_0} connections.
Deleting a connection is permanent and cannot be undone. It will remove the credentials from all linked projects, and any apps using this connection will stop working until a new connection is added.
Before deleting, review the **Linked projects** section to see which projects are currently using the connection.
To delete a connection:
Open **Connectors**, then go to **App connectors**, and select **{connector_0}**.
Open the connection you want to remove.
Review the **Linked projects** section.
Under **Delete this connection**, click **Delete** and confirm.