> ## 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 Webflow

Paste two code snippets from DropInBlog into a Webflow page, and that page becomes your blog. You add and manage blog content in your DropInBlog account, and it automatically appears on your Webflow site. The setup takes a few minutes.

|| Before you start: Webflow only allows the Code Embed element on sites with an active Site plan, or in a Core, Growth, Agency, or Freelancer Workspace.
## How to Install DropInBlog on Webflow
1. From your Webflow account, open the **Pages** tab.
2. Click the plus sign, then select **Create page** from the dropdown.
3. Enter the name of your page under **Page Title**, then click **Create** in the top right.
4. Optionally, add header and footer components using the **Components** slide-out menu on the left.
5. In the menu on the left, click the plus sign to add an element.
6. Click the **Code Embed** element located in the **Advanced** section.
7. On the **Code & Layout** page of your DropInBlog account, copy the **Blog Script** code.
8. Paste the Blog Script code into the pop-up that opened in Webflow.
9. Return to DropInBlog’s **Code & Layout** page and copy the **Blog Container** code.
10. Paste the Blog Container code inside the Code Embed element, right after the Blog Script code.
11. In Webflow, click **Save & Close** at the bottom right of the pop-up.
12. Publish your changes by clicking **Publish** → **Publish to selected domains**.
13. Open your Webflow site in a new tab, visit your blog page, and copy its URL.
14. Return to DropInBlog’s **Code & Layout** page and click **Verify Integration**. If asked, paste your blog’s URL. You’ll see a message that your blog is live.
## Where Your Webflow Blog Lives
DropInBlog stores your posts on its own servers, and your readers see them on your Webflow domain, on the page you created. The URL structure looks like this:
* `your-domain-name/blog-name` (blog homepage)
* `your-domain-name/blog-name/?p=blog-post-title` (individual blog posts)
The `?p=` in post URLs goes away once you turn on the SEO Supercharger, covered at the end of [Verifying the Integration](#2-verifying-the-integration).
### What Happens to the Blog I Have on Webflow
Adding DropInBlog to your Webflow site doesn’t impact the blog you created with Webflow’s CMS. Your existing posts stay in their Collections and work until you remove them. Instead of running two blogs, you can move the content you created in Webflow’s CMS to DropInBlog:
1. In Webflow, go to **CMS** and click the three dots next to the collection you want to export, then select **Export**.
2. Go to DropInBlog’s **Import / Export** page, click the **Upload File** button to the right of **CSV Import**, then click **Map CSV Fields**.
3. On the following page, connect your CSV fields to DropInBlog’s fields, and click **Import**.
4. Return to Webflow and create 301 redirects from your old blog post URLs to the new ones in **Site settings** → **Publishing** → **301 redirects**.
## Verifying the Integration
To ensure your blog works on your Webflow site, create a new blog post:
1. In your DropInBlog account, go to **Posts** → **Add Blog Post**.
2. Fill out the post title field and add your content inside the content editor.
3. Select the **Published** option in the **Status** section on the right.
4. View your new blog post.
5. Check that your post appears with its text, images, and links intact. If it does, the integration is working.
### One More Step: Turn On the SEO Supercharger
With the test post showing up, your blog is working, and Google can already index posts that load in the browser like these. A few other crawlers and social link previews only look at the page’s raw HTML, so they can miss the post content.

The SEO Supercharger closes that gap. It turns each post into a flat static HTML page, removes `?p=` from your URLs, and speeds up loading. You set it up once, and it comes with every DropInBlog plan.

The[ __SEO Supercharger guide__](https://docs.dropinblog.com/en/article/the-seo-supercharger-w-cloudflare-connection-wyhm09/) walks you through the setup.
## Styling
If you leave the default design settings in DropInBlog unchanged, your blog will inherit fonts and colors from your Webflow site. To change them, go to **Code & Layout** → **Design** → **Design Customizations**. In the **Advanced Options** section below **Design** on the same page, you can also:
* Apply your own CSS under **Custom CSS**.
* Change the blog layout under **Blog Layout**.
## Troubleshooting
If your blog isn’t showing up, check these first:
* Check that the Code Embed in Webflow contains the Blog Script and Blog Container code. For the integration to work, copy and paste both code snippets. If a code snippet is missing, open the Code Embed element in Webflow and add the missing code.
* Check the published site, not the Designer. Webflow shows a placeholder for script code inside the Designer, and the blog only appears when you preview or publish the site.
* Make sure you republished your site after adding the blog code. Click **Publish** whenever you add or change your DropInBlog blog code.
* Check that your site is on a plan that supports Code Embed. Code embeds need an active Site plan, or a Core, Growth, Agency, or Freelancer Workspace.
* Check that you completed the verification step. After adding your blog code and publishing the changes, you may need to add your blog page URL in DropInBlog. If your blog is missing a URL, you’ll need to add it before you can publish a new blog post.
* Check that the Blog URL in DropInBlog matches your live page. In DropInBlog, go to **Settings** and make sure **Blog URL** matches your blog page’s address exactly.
Is your blog still not working? Contact DropInBlog support and include a link to your blog page.
## Limitations
DropInBlog sits alongside Webflow rather than inside it, which affects a few Webflow features:
* Your posts aren’t Webflow CMS items, so you can’t build a Collection list of recent posts elsewhere on your site or sort and filter them with Webflow’s CMS tools. **Solved:** use DropInBlog’s[ __widget code__](https://docs.dropinblog.com/en/article/display-your-blog-posts-on-your-website-with-widget-code-12yhq9w/) to show recent posts on other pages. You’ll find it under **Code & Layout** → **Advanced Options** → **Widget Code**.
* Webflow’s sitemap won’t include your posts. Webflow generates its sitemap from its own pages and CMS items, so your blog posts won’t appear in it. **Solved:** submit DropInBlog’s automatic sitemap (in **Settings**, below **Blog URL**) to Google Search Console.
* **Webflow Localization won’t translate your blog.** It works on content stored in Webflow, and your posts aren’t stored there. If you run a localized Webflow site, the blog stays in the language you write it in. **Solved:** create a separate blog page for each language and add its own blog code with DropInBlog’s [multi-language setup](https://docs.dropinblog.com/en/article/multi-language-integration-html-integration-c2sr2e/).