Articles on: Getting Started

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.

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 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 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.

Updated on: 07/10/2026