Connect your app to Contentful
You can connect your Lovable app to Contentful to get published content like text, images, and entries from your Contentful space. This lets you build apps where content editors manage everything in Contentful and your app displays it.
Anyone building content-driven apps like blogs, marketing sites, or product catalogs needs this when they want to use Contentful as their content source.
Do this, in order
- 1
Sign in to Contentful and open the space you want to connect.
You need to access your Contentful space to find the necessary credentials.
- 2
Go to 'Settings' then 'General settings' and copy your 'Space ID'.
The Space ID tells Lovable which Contentful space to connect to.
- 3
Go to 'Settings' then 'API keys', click 'Add API key' (or open an existing one), and give it a descriptive name like 'Lovable integration'.
You need an API key to allow Lovable to securely access your Contentful content.
- 4
Copy the 'Content Delivery API - access token' from the API key details.
This token is like a password that Lovable uses to read your published content.
- 5
Open 'Connectors' in Lovable, select 'Contentful', and click 'Add connection'.
This starts the process of setting up the connection in Lovable.
- 6
Give your connection a 'Display name' (e.g., 'Contentful Prod'), paste the 'Space ID' and 'Content Delivery API access token' you copied from Contentful.
This provides Lovable with the details it needs to identify and access your Contentful space.
- 7
Under 'Sharing', choose who can use this connection (either keep it private or share it with others in your workspace).
This controls who in your team can use this Contentful connection in their projects.
- 8
Click 'Connect' to finalize the setup.
Lovable will verify your credentials and save the connection, making Contentful content available to your apps.
Paste this into your project
Use Contentful and build a marketing site where the homepage and feature pages load from Contentful.
Words decoded
- Headless CMS
- A content management system (like Contentful) that stores your content but doesn't dictate how it looks. Your app then takes this content and decides how to display it.
- Content Delivery API
- A specific way for your app to ask Contentful for published content. It's read-only, meaning your app can get content but can't change it.
- Space ID
- A unique identifier for your specific Contentful project or 'space' where your content lives.
- Access token
- A secret key that acts like a password, allowing your app to securely connect to and retrieve content from your Contentful space.
- Entries
- Individual pieces of content in Contentful, like a blog post, a product, or a page.
- Assets
- Files stored in Contentful, such as images, videos, or documents.
- Rich text
- Text content that includes formatting like bold, italics, lists, and links, similar to what you'd find in a word processor.
- Paginate
- To break a large list of items into smaller, manageable pages, like showing 10 blog posts at a time instead of all 100.
- Locale
- Refers to a specific language and region, like 'en-US' for American English or 'es-MX' for Mexican Spanish, used for serving translated content.
Where people get stuck
- Do not share your Content Delivery API access token publicly, as it functions like a password.
- Ensure you copy the 'Content Delivery API - access token', not the 'Content Preview API token', as the connector only reads published content.
- Remember that the Contentful connector is read-only; you cannot create, update, or delete content through Lovable.
- The connector cannot fetch draft or unpublished content, only what is live via the Content Delivery API.
- API usage counts towards your Contentful plan limits, and billing is handled by Contentful, not Lovable.
The short version, steps, decoder and prompt on this page are written automatically from Lovable's own documentation and can lag or misread it. The official page is always the authority.