Framer integrationPublish to your Framer blog
Every SEO article lands in your Framer CMS with its title, full text, cover image and summary, and goes live with your site. Connect once with a project API key. Nothing to install.
About ten minutes, once
- 1
Add a blog collection
Create a Blog collection and its pages in Framer, then publish once.
- 2
Connect with an API key
Create a key named SEOLadders in your project settings and paste it with your project address.
- 3
Style the page once
Give links, tables and the cover image their look. Every article after that uses it.
A real CMS item, in your design
Articles take on your site's fonts and colours, so they look like everything else you built.
Full article
Headings, lists, links, tables, images and YouTube videos. Images are copied into Framer.
Cover and summary
Added to your collection's Image and Excerpt fields, ready for your blog list and search results.
Uses your fields
Your template's own fields are reused where they match. Nothing to rebuild.
Live with your site
Each article goes live as soon as it is published, unless you switch deploy off.
Safe republishing
Publishing again updates the same item. No duplicates.
One project only
The API key works for this one Framer project and nothing else.
How to connect Framer to SEOLadders, step by step
About 10 minutes, no code. Follow along in a second tab.
Before you start
- A Framer project you can edit, as owner or editor.
- A web browser for one step: the project's address only shows there, not in the desktop app.
- 1
Make a blog collection
- 1.Open your project, click the Canvas menu at the top left and choose CMS.
- 2.Already have a blog collection? Note its exact name and skip ahead.
- 3.If not, click Add... and name the collection
Blog. No fields to add: SEOLadders adds Image and Excerpt itself.
- 2
Add your blog pages and publish once
- 1.Switch back to Canvas and open the Pages panel.
- 2.Click + next to Pages, then New CMS page → Blog → Detail page. Each article appears on this page.
- 3.Do it again and choose Index for a
/blogpage that lists every article. - 4.Click Publish at the top right.
- 3
Create an API key
- 1.Click the Canvas menu and choose Settings.
- 2.On General, scroll to API Keys and create a key named
SEOLadders. - 3.Copy it straight away. Framer shows it once.
- 4
Copy your project address
- 1.In Chrome or Safari, open your project on
framer.com. - 2.Copy the address from the browser bar. It contains
framer.com/projects/.
Not the live site address
An address ending in
.framer.appor.framer.websiteis your live site, where you will read your articles, not where you connect. - 1.In Chrome or Safari, open your project on
- 5
Connect Framer in SEOLadders
- 1.In SEOLadders, open Content → CMS Integration and click the Framer card.
- 2.Paste the Project URL and the API Key.
- 3.Type the Collection name exactly as it is in Framer, capitals included (for example
Blog). - 4.Leave Deploy to production after publishing on, click Test connection, then Save configuration.
Articles go live on their own
Once you connect, every finished article from your content calendar is published automatically. To check each one first, turn on review mode in Content → Auto Blog.
- 6
Style your article page (once)
Framer decides how articles look and removes styling sent from outside, so a new blog page shows plain links and tables without borders until you style it. Do this once and every article uses it.
- 1.Ask Framer's Agent to add a cover image between the title and the content. Then select the image, click the small + on its Image row in the right panel, and choose the Image field. The row should show a coloured Image tag.
- 2.Ask the Agent:
On the Blog detail page, style links in the brand colour, give tables borders and cell padding without splitting words across lines, make H2 and H3 larger than the body, and use Excerpt as the SEO description. On the /blog page, link each item to its detail page. - 3.Click Publish.
Framer publishes your whole site at once
When an article goes live, unfinished design changes go live too. In the middle of a redesign, switch Deploy to production after publishing off until you are done.
- 7
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 Framer, open CMS → Blog: the article is there. On your live site it is at
/blog/article-name. - 4.Publishing the same article again updates the same post, so you never get a duplicate.
If something goes wrong
- The article is not in your Blog collection
- The collection name didn't match, so a new collection was made. Fix the name in SEOLadders, delete the extra collection, and publish again.
- The article page shows only the title
- Add a text block to the Blog detail page connected to the Content field, then publish.
- No cover image, plain links or tables without borders
- Your article page isn't styled yet: see the styling step.
Still stuck? We set it up with you: contact us from your avatar menu, then Support. Developers can find every field and payload in the Framer docs.
Publishing to Framer, answered
Setup, what gets published and what happens when you update.
See the full platform →You need a Framer project with the CMS and an API key from its settings. SEOLadders adds articles to a CMS collection you name.
It reuses your collection's own fields where the names match (for example Title, Content or Body, Cover or Image) and adds Image and Excerpt only when they are missing. You don't need to create any fields yourself.
Framer applies its own design to everything in the CMS and removes styling sent from outside. A new blog page has no link or table styling yet, so you set it once in Framer. The setup guide gives you a prompt that lets Framer's AI do most of it.
Yes, that is how Framer works: going live publishes the entire project. If you are in the middle of a redesign, switch off Deploy to production after publishing until you are done.
The same Framer item is updated, so there is no duplicate and the address stays the same.
Yes. Switch off Deploy to production after publishing and articles wait in Framer until you publish, or turn on review mode in SEOLadders to approve each one first.
Rank on Google and get cited
by AI on autopilot
Connect your site once and the work runs in the background, it finds the topics, builds the content and authority behind them, then tracks where you land on Google and how often AI platforms recommend you.