> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.dropinblog.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://docs.dropinblog.com/en/article/dropinblog-integration-guide-for-framer-1nalx2l/) 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.
### Link the Blog in Your Menu
8. Add a blog link to your site’s navigation. 
9. 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.
9. In the **Assets** tab, scroll down to **Code**, click the plus sign, and select **New Code File**.
10. Name the file **DropInBlogOverride**, choose **New Override**, and click **Create** to open the code editor.
11. 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
           }
       },
   }
}
```
12. Double-click your navigation component to edit it, then select the blog menu item.
13. On the right, click the plus sign next to **Code Overrides**, set **File** to **DropInBlogOverride**, and set **Override** to **DropInBlogLink**.
14. 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__](https://docs.dropinblog.com/en/article/dropinblog-integration-guide-for-framer-1nalx2l/) 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.