Articles on: Getting Started

Add a DropInBlog Blog to Framer (Embed)

There are two ways to add a blog to Framer with DropInBlog. The method explained here uses DropInBlog’s embed component, and it’s the faster of the two. If you’d rather serve your blog as flat static HTML with clean URLs right away, use the Cloudflare component method instead.


Setting up the embed component takes a few minutes. You paste the component onto a Framer page, add your blog ID, and apply a small code override to your menu so blog links load correctly.

How to Install DropInBlog on Framer With the Embed Method

The setup has three parts: adding the component, linking the blog in your menu, and adding the code override.

Add the Embed Component

  1. In Framer, open Pages, click the plus sign, and select New Page.
  2. Rename the page to something short like “blog,” so its slug is /blog.
  3. Copy the DropInBlog embed component URL: https://framer.com/m/EmbedJs-PAnj.js@UBuvnkomPujy2cfffKEk
  4. Select your blog page and paste the component onto it.
  5. Copy your blog ID from the Code & Layout page of your DropInBlog account.
  6. In Framer, click the embed component, find the Embed section on the right, and paste your ID into the Blog ID field.
  7. Click Publish to save your changes.
  1. Add a blog link to your site’s navigation. 
  2. If your menu is a component, copy one of its menu items, rename it “Blog,” and link it to your new blog page.

Add the Code Override

The override makes your blog load fully when visitors open it from your menu. Without it, they’d have to reload the page to see your posts.

  1. In the Assets tab, scroll down to Code, click the plus sign, and select New Code File.
  2. Name the file DropInBlogOverride, choose New Override, and click Create to open the code editor.
  3. Delete the default code, then paste the following:
// dropinblogOverride.ts
import { Override } from "framer"

export function DropInBlogLink(): Override {
   return {
       onClick: (e: MouseEvent) => {
           e.preventDefault()
           e.stopPropagation()

           const el = e.currentTarget as HTMLElement
           const href = el.getAttribute("href")

           if (href) {
               window.location.href = href
           }
       },
   }
}
  1. Double-click your navigation component to edit it, then select the blog menu item.
  2. On the right, click the plus sign next to Code Overrides, set File to DropInBlogOverride, and set Override to DropInBlogLink.
  3. Click Publish in the top right, then copy your blog page’s link from the live site.

Where Your Framer Blog Lives

DropInBlog stores your posts, and the embed component shows them on your own Framer domain, on the page you created. With a /blog slug, your URLs look like this:

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

The ?p= drops off when you turn on the SEO Supercharger, covered at the end of Verifying the Integration.
Framer has its own CMS. If you built a blog with it, those posts stay in their Collection and keep working until you remove them.

Verifying the Integration

Publish a test post to check that everything loads:

  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 your live Framer site, click the blog link in your menu, and open the new post.
  4. Check that the text, image, and link all display correctly, and that the blog loads without a page refresh.

One More Step: Turn On the SEO Supercharger

If the test post shows up, your Framer blog works, and Google already indexes posts that load this way. Several other crawlers and link previews only read a page’s raw HTML, so they don’t see the posts.
Turning on the SEO Supercharger gives every post a flat static HTML version they can read, removes ?p= from your URLs, and makes pages load faster. It’s part of every DropInBlog plan. On Framer, it means switching to the SEO Supercharger method.
Follow the SEO Supercharger method guide to make the switch.

Styling

Your blog takes on your Framer site’s fonts and colors, so it should look native from day one. To adjust link colors, fonts, or font sizes, go to Code & Layout → Design → Design Customizations in DropInBlog and click Save Design Customizations. 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 entered your blog ID. Click the embed component and make sure the Blog ID field matches the ID on DropInBlog’s Code & Layout page.
  • Check that you published your site after adding the component and the code override.
  • If the blog only appears after a page refresh, check the code override. Make sure the blog menu item uses File: DropInBlogOverride and Override: DropInBlogLink.
  • 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 none of this helps, contact DropInBlog support and include a link to your blog page.

Limitations

Since your posts live in DropInBlog, a couple of Framer features don’t cover them:

  • Your posts aren’t Framer CMS items. They won’t show up in Framer’s Collection lists or Dynamic Filters. Solved: DropInBlog has its own categories and author pages, plus an RSS feed (in Settings, below Blog URL).
  • Framer’s sitemap won’t list your posts. Solved: DropInBlog creates its own XML sitemap for your blog. Find it in Settings, below Blog URL, and submit it to Google Search Console.

Updated on: 07/10/2026