Add a DropInBlog Blog to Framer (Cloudflare)

There are two ways to add a blog to Framer with DropInBlog. The method explained here uses the Cloudflare component with the SEO Supercharger. It takes a little more setup, and your posts are served as flat static HTML with clean URLs from the start. For the quicker setup, use the embed component method instead.

How to Install DropInBlog on Framer With the Cloudflare Component

The setup has three parts: adding the component, connecting Cloudflare, and adding the code override.

Add the Cloudflare Component

1. Create a page for your blog by clicking the plus sign next to Pages, selecting New Page from the dropdown, and giving it a slug (for example, /blog). You can also use an existing page.
2. Add a header and footer to the page so visitors can move between your blog and the rest of your site.
3. Select your blog page in the left-hand menu, then copy this Framer component URL and paste it onto the page: https://framer.com/m/Cloudflare-N7TW\.js@N9t9OAA8Q5r1HybPrdiB. The Cloudflare component appears on your blog page.
4. Update your site to save your changes.

Connect Cloudflare

5. Open the Settings page of your DropInBlog account.
6. Paste the API token you generated in Cloudflare into the field next to Connect. The API token guide shows how to create the token.

Add the Code Override

The override makes your blog links do a full page load. Without it, visitors who click a blog link from your menu would need to refresh the page for the blog to appear.

6. In Framer, open the Assets tab, click the plus sign next to Code, and choose New Code File.
7. Set the title to DropInBlogOverride, select New Override, and click Create to open the code editor.
8. 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 target = e.target as HTMLElement

           // clicked directly on an <a>
           if (target.tagName === "A") {
               const href = target.getAttribute("href")
               if (href) window.location.href = href
               return
           }

           // clicked on something inside <a> (e.g., styled text)
           const link = target.closest("a")
           if (link) {
               const href = link.getAttribute("href")
               if (href) window.location.href = href
           }
       },
   }
}

9. Open your site’s navigation component and double-click it to edit it.
10. Select the blog menu item, click the plus sign next to Code Overrides in the right-hand menu, and set File to DropInBlogOverride and Override to DropInBlogLink.
11. Update your site, then copy your blog page’s link.
12. Go to the Code & Layout page in DropInBlog and click Verify Integration. If asked, paste your blog link and click Check Integration. You’ll see a message that your blog is live.

Where Your Framer Blog Lives

Your posts are stored in DropInBlog, and the SEO Supercharger serves them as flat static HTML on your own domain, under the page you created. With a /blog slug, your URLs look like this:

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

The code override makes your blog links do a full page load. Without it, visitors who click a blog link from your menu would need to refresh the page for the blog to appear.

Verifying the Integration

Publish a test post to make sure everything works:

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 blog from your Framer site’s menu, click the new post, and check that the text, image, and link all display correctly.

Styling

Your blog picks up your Framer site’s fonts and colors, so it should match your design. 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 updated your Framer 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 your DropInBlog account is connected to Cloudflare. In DropInBlog, go to Settings and confirm your Cloudflare API token is saved under Connect.
• If you use Cloudflare’s Rocket Loader, turn it off for your domain. Framer recommends disabling it for sites behind Cloudflare.

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

Limitations

Because your posts don’t live in Framer, one Framer feature doesn’t cover them:

• Framer’s sitemap won’t list your posts. Solved: the SEO Supercharger gives you a live sitemap that updates with every new post. Find it in Settings, below Blog URL, and submit it to Google Search Console.
• 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).

Updated on: 07/10/2026