Webflow Integration

Connect your Webflow site once, and every article SEOLadders writes goes straight into your Webflow blog: the title, the full article, the cover image and a short summary. There is nothing to install. You copy one key from Webflow, paste it into SEOLadders, and pick your blog. Setup takes about 5 minutes.

Video walkthroughComing soon

Before you start

Make sure you have these three things:

  • A Webflow site you can edit. You need to be the owner or have admin access.
  • A blog collection in that site. In Webflow, a “collection” is the list your blog posts live in. If you are not sure whether you have one, step 1 shows you how to check and how to make one.
  • A site that has been published at least once. Webflow will not accept new blog posts on a site that has never been published. Step 2 covers this.

1. Make sure your site has a blog collection

  1. Go to webflow.com, log in, and click your site.
  2. Click Open site in Webflow (the blue button at the top right). This opens the editor, which Webflow calls the Designer.
  3. At the top left, click CMS. You will see a list called CMS Collections.
  4. If you see a collection for your blog (often called Blog Posts), you already have one. Skip to step 2.
  5. If it says No collections, click Create a Collection, then choose the Blog Posts template. It comes with everything SEOLadders needs.
  6. Click Create Collection (the blue button at the top).

Making your own collection instead?

It needs one Rich Text field for the article itself. An Image field for the cover and a Plain Text field for the summary are nice to have. Do not make any other field required, or Webflow will turn the article away.

2. Publish your Webflow site once

  1. Still in the Webflow editor, click Publish at the top right.
  2. Tick your site address (it ends in .webflow.io, or your own domain if you have one connected) and click Publish to selected domains.
  3. Wait for the green confirmation.

You only need to do this once. After that, SEOLadders adds each new article on its own without publishing your whole site again.

3. Copy your API token from Webflow

The API token is a key that lets SEOLadders add blog posts to your site. It only works for this one site.

  1. Go back to your Webflow dashboard and click your site's Site settings.
  2. In the menu on the left, click Apps & Integrations.
  3. Scroll down to API access and click Generate API token.
  4. Name it SEOLadders.
  5. Set the permissions:
    • CMS: Read and write
    • Pages: Read and write (lets the site audit fix page titles and descriptions when you press Apply)
    • Assets: Read and write (for image alt text)
    • Sites: Read-only
    • Leave everything else as it is.
  6. Click Generate token, then copy the token straight away.

Webflow only shows the token once

If you close the window before copying it, no problem: generate a new one and use that instead. Keep the token private, like a password.

4. Connect Webflow in SEOLadders

  1. In SEOLadders, open Content → CMS Integration and click the Webflow card.
  2. Paste the token into Site API Token and click Load sites.
  3. Under Site, pick your site. Wait a moment while your collections load.
  4. Under Collection, pick your blog collection (for example Blog Posts).
  5. Now tell SEOLadders which Webflow field gets which part of the article. If you used the Blog Posts template, pick:
    • Body (Rich Text): Post Body
    • Featured image: Main Image
    • Excerpt: Post Summary
    The title and web address are filled in for you.

    Using a different blog template? The rule is the same: Body is the big text field your posts are written in, Featured image is the main picture at the top of a post, and Excerpt is the short summary shown on your blog list.

  6. Leave Publish live switched on if you want articles to appear on your site straight away. Switch it off to have them arrive in Webflow as drafts you publish yourself.
  7. Click Test connection. It should say Connected.
  8. Click Save configuration. You are connected.

Do not pick Name or Slug for Excerpt

Name is the article title and Slug is its web address. Both are already filled in automatically, and choosing either one for Excerpt would overwrite them.

Auto-publish is on by default

Once Webflow is connected, every finished article from your content calendar is sent to Webflow automatically. If you would rather check each article first, turn on review mode in Content → Auto Blog.

5. Publish your first article

  1. In SEOLadders, open Content → Content History and click any finished article.
  2. Click Publish at the top right.
  3. In Webflow, open the editor, click CMS, then your blog collection. The article is there, with its title, text, cover image and summary.

With Publish live on, the article is also live on your site at yoursite.webflow.io/[collection URL]/[article]. If you made a new collection called Blog Posts, the collection URL is usually post.

Article page looks empty?

That means your blog page design has nothing on it yet, not that the article is missing. In the Webflow editor, open Pages → Blog Posts Template, add a heading and a Rich Text block, and connect them to Name and Post Body. Then click Publish. Webflow's ready-made blog templates already have this done.

Want a page that lists all your articles?

If your site does not have a blog page yet, add a page called Blog in Webflow, drop a Collection List on it and connect it to your blog collection. Every new article SEOLadders publishes then shows up there on its own.

What gets sent to Webflow

Webflow fieldWhat goes in it
NameThe article title
SlugThe end of the article's web address
Body (Rich Text)The full article: headings, text, images, tables and links. Images are copied into your Webflow site automatically
Featured imageThe article's cover image
ExcerptA short summary of the article (its meta description)

Publishing the same article again updates the same Webflow post, so you never get duplicates and the web address stays the same.

Tables are styled for you

Comparison tables arrive with borders and spacing already, so there is no code to add. They sit in their own block inside the article. To change an article, edit it in SEOLadders and press Publish again, rather than editing it in Webflow: that keeps the tables and everything else exactly as written.

If something goes wrong

  • “The site is not published”: publish your Webflow site once (step 2), then publish the article again.
  • The article's web address shows “Page not found”: your blog page is not live yet. This happens when the blog collection was created after your last successful Webflow publish. Publish your Webflow site again and reload the page.
  • Webflow shows the article as “Changes in draft”: a newer version is waiting. This happens when Publish live is switched off in SEOLadders. Open the article in Webflow and click Publish, or turn Publish live on and publish it again from SEOLadders.
  • “This Webflow site has no CMS collections yet”: create a blog collection (step 1), then pick your site again in SEOLadders.
  • “Invalid Webflow API token”: the token was copied wrong or deleted. Generate a new one (step 3) and paste it in.
  • An error that mentions scopes or permissions: the token is missing access. Generate a new one with CMS, Pages and Assets set to Read and write, and Sites: Read-only.
  • Webflow says a field is required: your collection has a required field SEOLadders does not fill in, such as an author or category. Make that field optional in Webflow.
  • Your Webflow site will not publish at all: that is a problem inside the Webflow site itself, often in its custom code. Webflow's error message names the part to fix, and Webflow support can help.

Still stuck? Contact us from your avatar menu → Support and we will set it up with you. Not on Webflow? See all destinations.