Framer Integration

With DropInBlog, you can add a blog to your Framer site in two ways:

1. By adding the DropInBlog component to your Framer site.
2. Or by adding the Cloudflare add-on to your Framer site.

For the first blog integration method, the DropInBlog component, please review the step-by-step guide on our blog.

For the second blog integration method, follow the steps outlined below.

Cloudflare add-on blog integration

This blog integration method embeds your blog directly into your Framer website by using our SEO Supercharger (w/ Cloudflare connection).

To use this integration method, you need to connect your DropInBlog account to Cloudflare and have your domain’s DNS hosted on Cloudflare.

Once you complete this step, follow these five simple steps:

1. Create a page where you want your blog to appear or use an existing one.
2. Add the Cloudflare component to that page.
3. Add your Cloudflare API token to the Settings page of your DropInBlog account.
4. Create a code override to have your blog page load instantly.
5. Apply the code override to your site’s navigation.

1: Create a new page

Create a page where you want your blog to appear by clicking on the plus sign next to Pages. Then select New Page from the dropdown, and assign it a slug (i.e., /blog).

Step 2: Paste the Cloudflare add-on

Select your blog page using the left-hand side menu of the editor, then copy the Framer component URL below and paste it onto your blog page.

https://framer.com/m/Cloudflare-N7TW.js@N9t9OAA8Q5r1HybPrdiB

After that, you’ll see the Cloudflare component on your blog page, as shown in the screenshot below.

Before you proceed to the next step, update your site to save your changes.

Step 3: Add your Cloudflare API token

For the integration to work, you need to connect your DropInBlog account to Cloudflare.

To do that, open the Settings page of your DropInBlog account. Then, paste the API token you’ve previously generated in your Cloudflare account into the field next to Connect.

Step 4: Add a code override to your site’s navigation

Next, to ensure smooth navigation, you’ll need to add a small override script to your Framer site.

To apply the override script, select the Assets tab, then click on the plus sign next to Code, and choose New Code File.

In the pop-up that opens, set the title to DropInBlogOverride, select the New Override option, and click on the Create button to open the code editor.

Once in the editor, delete the default code that’s already there.

Then, copy and paste the following inside the editor:

// 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
           }
       },
   }
}

Step 5: Apply the code override to your site’s menu

Before you save your changes, you need to apply the code script you’ve just created to your site’s menu.

Here’s how:

• Open your site’s navigation component.
• Double-click on it to edit it.
• Select the blog menu item.
• Using the menu on the right, click on the plus sign next to Code Overrides to expand the section.
• In the dropdown menu, set the File to DropInBlogOverride and Override to DropInBlogLink.

When you update your site, check your new Framer blog to ensure everything works as it should.

Happy blogging!

Updated on: 16/12/2025