Articles on: Getting Started

Add a DropInBlog Blog to Framer

This guide uses DropInBlog - The Blog Plugin from Framer’s Marketplace, so you won’t need to copy any blog code. The only code you’ll paste is a short override that helps your menu link load the blog. The whole setup takes a few minutes, and if you don’t have a DropInBlog account yet, you can create one from inside the plugin while you install it.

How to Install DropInBlog on Framer

Create Your Blog Page

  1. In Framer’s editor, open Pages in the left-hand menu. You’ll see a list of every page on your site.
  2. Click the plus sign next to Pages, then select New Page from the dropdown. This will add a new page to your pages list.
  3. Rename the page “Blog.” That way, its address ends in /blog, which is short and easy for visitors to remember.

Install the Plugin

  1. Open the DropInBlog - The Blog Plugin page on Framer’s Marketplace.
  2. Click Open Plugin.
  3. You’ll see a dropdown with your Framer projects. Select the project you’re adding the blog to. Framer will open that project, and the DropInBlog - The Blog Plugin window will appear in Framer’s editor.
  4. Click Connect DropInBlog, and the DropInBlog registration page will open in a new window.
  5. Click Continue with Google or click Continue with Email and enter your email and password.
  6. Click Authorize to give Framer access to your DropInBlog account.
  7. Click Close to close the window.

Add the Blog to Your Page

  1. Back in Framer’s editor, you’ll see your blog’s name under Choose your blog in the plugin window. If you have more than one blog, select the one you want on this site.
  2. Click Add Full Blog, and the blog embed will appear on your Framer canvas.
  3. Drag the embed to the spot on your blog page where you want the blog to appear. You’ll see a preview of your blog with its demo posts.
  4. Click Publish, then Update in the top-right corner of the editor to make your blog page live.

Verify the Connection

  1. Open your blog page on your live site. Since it isn’t in your menu yet, type your domain followed by /blog into your browser’s address bar.
  2. Copy the page’s URL from the address bar.
  3. Return to Framer’s editor and go to Canvas → Plugins → Browse All.
  4. Under Recents, click the arrow next to DropInBlog - The Blog Plugin.
  5. Select Manage posts from the dropdown. This will take you to the Posts page of your DropInBlog account.
  6. Click Code & Layout in the left sidebar.
  7. Click Verify Integration, and paste your blog page’s URL if asked. You’ll see a message that your blog is live.
  1. Return to Framer and double-click your navigation component to edit it.
  2. Duplicate one of the existing menu items by selecting it and pressing Control + D or Command + D.
  3. Change the new item’s text to “Blog.”
  4. In the Link to menu on the right-hand side, select your blog page.
  5. Click Publish in the top-right corner of the editor, then select Update in the dropdown. Your blog page and the new menu link go live.

Create a Code File

  1. In the Framer editor, click Assets.
  2. Click the plus sign next to the Assets section and select Code file. This will open a pop-up where you can set up the file.
  3. Name the file DropInBlogOverride and select the New override option.
  4. Click Create, and you’ll be taken to the code editor.
  5. Delete the existing code first, then paste the following into the code editor:
// 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
           }
       },
   }
}

Apply the Code Override to Navigation

  1. In the Framer editor, double-click your navigation component to edit it, then select the Blog menu item.
  2. On the right-hand side, click the plus sign next to Code overrides.
  3. Next to File, select DropInBlogOverride, and next to Override, select DropInBlogLink.
  4. Publish your Framer site to make all the changes live. In the top-right corner, click Publish, then select Update in the dropdown.

Where Your Framer Blog Lives

Your blog is hosted on DropInBlog’s servers but appears on your own domain, on the page you created. Your URLs will follow this format:

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

If your site uses a free domain, your blog’s address will start with your-site-name[.]framer[.]website.


Once you turn on the SEO Supercharger (the last step in Verifying the Integration), your post URLs will no longer include the ?p=.

If You Already Have a Framer CMS Blog

Framer has its own CMS. If you built a blog with a Collection, those posts stay where they are and keep working until you remove them, so your site will have two blogs. 


If you want to move the blog you created with Framer’s Collections to DropInBlog, you’ll first need to use a plugin to export your blog from Framer. You can use a free plugin like Framer’s CMS Export or choose another plugin from the Marketplace. Once your content is exported to a CSV file, you can import it into DropInBlog:

  1. Open the Import/Export page in DropInBlog.
  2. Next to CSV Import, under Blog Post CSV, click the upload button.
  3. Once the file is uploaded, click Map CSV Fields and map the uploaded content with DropInBlog’s fields.
  4. Click Import.
  5. Set up 301 redirects in Framer to direct your blog’s visitors to a new address.

Verifying the Integration

The Verify Integration step confirms that DropInBlog and Framer are connected. To check that your posts display correctly, publish a test post:

  1. On the Posts page in DropInBlog, click Add Blog Post.
  2. Add some text, an image, and a link, then publish the post.
  3. Open your live Framer site and click Blog in your menu. Your new post appears at the top of the list.
  4. Open the post and check that the text, image, and link all display correctly.

One More Step: Turn On the SEO Supercharger

If your test post shows up, your Framer blog is working, and Google indexes your posts as they are. Some other crawlers and link previews only read a page’s raw HTML, though, so they don’t see everything Google does.


Turning on the SEO Supercharger serves every post as flat static HTML that those crawlers can read too, and it gives your posts clean URLs. It’s included in every DropInBlog plan.


You’ll need a custom domain with its DNS hosted at Cloudflare. On Framer, a custom domain needs one of its paid plans. The blog plugin doesn’t turn on the SEO Supercharger for you, so you’ll need to set it up yourself by following the steps in the SEO Supercharger guide.

Styling

Your blog picks up your Framer site’s fonts and colors, so it should look native out of the box. To change link colors, fonts, or font sizes, go to Code & Layout → Design → Design Customizations in DropInBlog, then click Save Design Customizations. Most settings in this section are set to Inherit, which uses the values from your Framer site.


For anything that’s not automatically applied to your site, add your own CSS under Custom CSS, in the Advanced Options section below Design. You can also switch the Blog Layout there. Grid is the default.

Troubleshooting

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

  • Check that you published your site. Changes in Framer’s editor don’t reach your live site until you click Publish, then Update in the top-right corner.
  • Check that the embed is on your blog page. Open the page in Framer’s editor. If you don’t see the DropInBlog embed, click Add Full Blog in the plugin window, drag the embed onto the page, and publish again.
  • Check that your menu link points to the blog page. Double-click your navigation component, select the Blog item, and make sure Link to is set to go to your blog page.
  • Check that the plugin shows your blog. If nothing appears under Choose your blog, reopen the plugin, click Connect DropInBlog, and make sure you click Authorize at the end.
  • Check that the right blog is selected. If you have more than one blog, select the correct one under Choose your blog, then publish again.
  • If the blog only appears after you refresh the page, check the code override. Select the Blog item in your navigation component and confirm that Code overrides shows DropInBlogOverride as the file and DropInBlogLink as the override. Then publish again.
  • If Verify Integration doesn’t show your blog as live, check the Blog URL. In DropInBlog, go to Settings and make sure Blog URL matches your live blog page exactly, especially if you renamed the page or connected a custom domain after the install.

If none of this helps, contact DropInBlog support through the Message us chat and include a link to your blog page.

Limitations

Your posts live in DropInBlog, so a few Framer features don’t cover them:

  • Your posts aren’t Framer CMS items, so they don’t show up in Collection lists or Dynamic Filters. Solved: DropInBlog has its own categories and author pages, plus an RSS feed in Settings, under Blog URL.
  • Framer’s site search won’t find your posts because it only searches your Framer pages. Solved: turn on DropInBlog’s blog search, which searches every post on your DropInBlog blog.
  • Framer’s sitemap doesn’t list your posts. Solved: DropInBlog builds its own XML sitemap automatically. Find it in Settings, under Blog URL, and submit it to Google Search Console.
  • The SEO Supercharger can’t run on Framer’s free domain. Solved: connect a custom domain, which comes with Framer’s paid plans.

Updated on: 02/11/2026