How to Integrate DropInBlog with Framer

You can integrate DropInBlog into your Framer website in two different ways:

1. Using the DropInBlog Embed (JS Embed)
2. Using the SEO Supercharger (w/ Cloudflare connection). This requires that your domain's DNS is hosted with Cloudflare.

Option 1: Using the JS Embed

This option embeds your blog directly into your Framer website using our JavaScript embed code.

Step 1 - Add the DropInBlog Component

1. Copy the Framer component URL below:

https://framer.com/m/EmbedJs-PAnj.js@UBuvnkomPujy2cfffKEk

2. In Framer, go to the page where you want your blog to appear.  
3. Paste the component URL to add the DropInBlog Embed component to your project.

Step 2 - Add Your DropInBlog ID

1. In your DropInBlog admin, go to Code & Layout.
2. Locate your Blog ID (it looks something like f3b8c1d2-82a5-4b6e-9f34-7a1e9fbc2d11).
3. In Framer, select the DropInBlog Embed component and paste your ID into the Blog ID property in the component controls.

Option 2: Using the Cloudflare Add-On

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

Step 1 - Add the DropInBlog Cloudflare Component

1. Copy the Framer component URL below:  

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

2. In Framer, go to the page where you want your blog to appear.  
3. Paste the component URL to add the DropInBlog Cloudfalre component to your project.

Final Step for Both Options: Add the Override Component

To ensure smooth navigation, you’ll need to add a small override script. This makes sure that when visitors click your blog links on your website the website performs a full page reload (instead of a React rehydration).

Step 1 - Create a New Override File in Framer

1. In the Framer project sidebar, go to  Assets → Code → + New Code File.
2. Set the title to DropInBlogOverride.
3. Choose New Override.
4. Clear out any existing code.

Step 2 - Copy This Code

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

Step 3 = Apply the Override

For any links on your website that naviagte to your blog you will want to apply this code override.

1. Select the link you want to add the code override to.
2. In the right sidebar at the bottom you will see Code Overrides. Set the file to DropInBlogOverride and the override to "DropInBlogLink".

Updated on: 15/11/2025