SiteLift LogoSiteLiftDocs

LovableLovable

Add a blog to an app built with Lovable in three steps: generate a key, add it as a secret, paste one prompt. SiteLift then writes and publishes articles on your schedule and the app shows them as they go live.

How it works

Lovable apps have no CMS for SiteLift to push into, so the connection runs the other way round. Your app reads published articles from the SiteLift Delivery API with a read-only key. Nothing is pushed, nothing is redeployed: when an article reaches its publish date SiteLift marks it published and the app picks it up on the next visit.

The Lovable agent builds the pages for you. You paste a prompt that describes the two endpoints and the two pages, and it generates the /blog list and /blog/{slug} article page in your app’s own design.

Note

Apps built here render in the browser. Google indexes client-rendered pages, but server-rendered ones are picked up faster and more reliably. If organic traffic is the point of the blog, the SiteLift Hosted blog on a subdomain of your domain is the stronger choice and takes a few minutes to set up.

Setup Guide

  1. 1

    Generate the key

    In the SiteLift dashboard open Settings > Integrations, choose Lovable under AI App Builders and click Generate Key. The key is shown once; copy it before closing the dialog. If you lose it, disconnect and generate a new one.

  2. 2

    Add it as a secret in Lovable

    Open Lovable Cloud → Secrets (or the Edge Function secrets of the Supabase project connected to the app) and add a secret with this name and the key as its value:

    bash
    SITELIFT_BLOG_API_KEY=sl_live_your_key_here

    Warning

    The key must only ever be read on the server. Do not prefix it with NEXT_PUBLIC_ or VITE_, and do not let the browser call the SiteLift API directly. The prompt in the next step tells Lovable the same thing.
  3. 3

    Paste the prompt

    Paste this into the Lovable chat. It names the secret but never contains the key, so it is safe to paste as is. Adjust the page paths or the design notes if you want something other than /blog.

    Lovable prompt
    Add a blog to this app, powered by the SiteLift Delivery API.

This is a Lovable project. The key is stored as a Lovable Cloud secret. Call the SiteLift API only from a backend (edge) function that reads the secret, and have the React pages call that function; the browser must never talk to SiteLift directly. Set each page's title and meta tags with the head manager already used in the project (react-helmet-async if none).

API
- Base URL: https://api.sitelift.io/v1/delivery
- Every request sends the header "Authorization: Bearer <value of SITELIFT_BLOG_API_KEY>".
- Never expose the key to the browser (no NEXT_PUBLIC_ or VITE_ prefix, no client-side fetch).
- GET /articles?status=published&page=1&limit=20 → { data: [{ id, title, slug, featuredImageUrl, seoMeta: { title, description }, language, tags, createdAt, updatedAt }], total, page, limit }. Metadata only, no bodies.
- GET /articles/{slug} → the full article: everything above plus contentHtml, contentMarkdown, schemaMarkup (JSON-LD object) and images [{ imageType, imageUrl, altText, caption }]. Returns 404 for unknown or unpublished slugs.
- GET /sitemap → { entries: [{ slug, updatedAt }] } for every published article.

Pages to build
1. /blog: list published articles newest first as cards with the featured image, title, seoMeta.description and date, linking to /blog/{slug}. Paginate with page and limit.
2. /blog/{slug}: render contentHtml as trusted HTML inside a readable article layout (max width about 720px, styled headings, lists, tables, blockquotes, images and links). Use seoMeta.title as the page title, seoMeta.description as the meta description, featuredImageUrl as the og:image, and embed schemaMarkup in a <script type="application/ld+json"> tag. Show a 404 page when the API returns 404.
3. Link /blog from the site navigation and footer. If the site has a sitemap.xml, include every /blog/{slug} from /sitemap in it.

Rules
- Cache API responses for at least 10 minutes; the API allows 100 requests per minute per key.
- Do not rewrite the article HTML; keep its headings, links and images as they are.
- Match the app's existing fonts, colours and spacing.
  4. 4

    Check the result

    Open /blog on the published app. Your published articles should be listed, and each one should open with its title, meta description and JSON-LD in the page source. If you have not published anything yet, the list is empty until the first article reaches its publish date; you can publish one early from the article page in the dashboard.

Tip

Once connected there is nothing to maintain. Articles go live on your SiteLift schedule and the app shows them on the next visit.

Optional: competitor pages

If Competitor Pages is enabled for the site, the same key also serves the “Brand vs X” and “X alternatives” pages. Ask Lovable to add them with a follow-up prompt:

text
Add competitor comparison pages from the same SiteLift API (https://api.sitelift.io/v1/delivery, same Authorization header).
- GET /comparisons → { comparePath, data: [{ id, kind, title, slug, seoMeta: { title, description }, featuredImageUrl, competitor: { name, domain }, publishedAt, updatedAt }] }
- GET /comparisons/{slug} → the same fields plus contentHtml, schemaMarkup and comparisonData.
Route each page at /{comparePath}/{slug} and render a hub at /{comparePath} that lists them. Render contentHtml the same way as blog articles, with seoMeta for the title and description and schemaMarkup as JSON-LD.

Troubleshooting

  • 401 Unauthorized. The secret value does not match the key. Keys are shown once; disconnect in the dashboard, generate a new one and update the secret.
  • Empty list. Only published articles are returned. Check the content calendar for the first publish date, or publish an article early from its page.
  • 429 Too Many Requests. The API allows 100 requests per minute per key. Ask Lovable to cache responses for at least 10 minutes.
  • Unstyled article body. The article HTML uses plain headings, lists, tables and images. Ask Lovable to style those elements inside the article container rather than editing the HTML.

The full endpoint reference, including pagination and every field, is on the Custom API page.

Previous

Webhooks

Next

Bolt