Articles on: Getting Started

Add a DropInBlog Blog to Lovable

To add a blog to your Lovable site, you paste DropInBlog’s blog prompt into Lovable, then give Lovable your blog ID and an API key. Lovable builds the blog into your app, so posts are server-rendered with clean URLs from the start.


Before you start: you’ll need an active DropInBlog account (you can test the integration with the free trial) and a Lovable account, free or paid.

How to Install DropInBlog on Lovable

  1. Log in to your Lovable account and select the project you want to create a blog for.
  2. Open the Code & Layout page of your DropInBlog account and copy the blog prompt under Step 1.
  3. Paste the prompt into the prompt box in the Lovable editor. After Lovable processes it, it will ask for your blog ID and API key.
  4. On the Code & Layout page, copy the blog ID under Step 2 and paste it into the matching field in Lovable.
  5. Click the Generate API key button under your blog ID, then click Copy on the right.
  6. Return to Lovable, paste the API key into the API key field on the left, and click Submit.
  7. Publish your Lovable site to make the blog live. If the site is already published, open the Publish dialog and click Publish changes.
  8. Copy your blog page’s link from the live site.
  9. Go to the Code & Layout page in DropInBlog and click the Verify Integration button near the bottom of the page. 
  10. If you see a Blog Page URL section, paste your blog link below it and click Check Integration. A green box confirms your blog is live.

Where Your Lovable Blog Lives

Your posts are stored in DropInBlog, and your Lovable app renders them on its own pages, so the blog is part of your site rather than an embed. Your URLs look like this:

  • your-domain-name/blog (blog homepage)
  • your-domain-name/blog/blog-post-title (individual blog posts)

Verifying the Integration

Publish a test post to confirm your content displays properly:

  1. Open the Posts page in DropInBlog and click Add Blog Post.
  2. Add some text, an image, and a link, and publish the post.
  3. Open the post on your Lovable site and check that the text, image, and link all display correctly.

Styling

Your blog picks up your Lovable app’s fonts and colors, so it should blend in with the rest of your site. To adjust them, go to Code & Layout → Design → Design Customizations in DropInBlog. For anything else, add your own CSS under Custom CSS, in the Advanced Options section below Design.

Troubleshooting

If your blog isn’t showing up, check these first:

  • Check that you published your changes. Lovable only deploys the version you publish. Later changes don’t go live until you click Publish changes.
  • Check that the Blog URL in DropInBlog matches your live blog page. In DropInBlog, go to Settings and make sure Blog URL matches your blog’s address exactly.
  • If you lost your API key, generate a new one. On the Code & Layout page, click Manage your keys under Step 2, then click Add API Key. Name the key, set Access Type to Public, and under Has access to, select Specific blog(s) and choose the blog you use on your Lovable site.
  • If you moved your Lovable project to TanStack Start, run DropInBlog’s blog prompt again. It updates your blog for the new setup.

If none of this helps, contact DropInBlog support and include a link to your blog page.

Limitations

The blog lives inside your app, with one thing to keep in mind:

  • Your app’s main sitemap won’t list your blog posts. Solved: submit the blog’s sitemap (your-domain-name/blog/sitemap.xml) to Google Search Console alongside your main one.

Updated on: 07/10/2026