Framer Integration

Framer Integration Setup

Outrank syncs articles to a Framer CMS collection with the Framer Server API. The article body is synced to the Content rich text field. If an article has a YouTube video, Outrank also syncs the YouTube link to the Video URL field so Framer can render it with a YouTube component.

Outrank only supports editable Framer collections owned by the project. Synced collections connected to external sources are managed by those sources, so Outrank does not create, update, or publish articles into them.

Create The Integration

1. Create or copy the Framer Server API key from your Framer project settings.

2. Open Outrank and go to Integrations.
3. Create a new Framer integration.
4. Enter the framer.com project URL and Framer Server API key in Outrank.
5. Choose whether Outrank should create a new collection or use an existing editable project-owned collection.
6. If using an existing collection, map Title to a text field and Content to a rich text field.
7. Save the integration, then publish or re-publish an article from Outrank.

Outrank automatically creates an Outrank Article ID field in the selected Framer collection. Keep this field in the collection and do not remove it, because Outrank uses it to update the correct CMS item on future syncs. It is not configurable during setup.

Connect Framer Pages

1. Open the Framer project used in the integration.
2. Open the CMS collection selected during setup.
3. Connect the blog listing and blog detail pages to that CMS collection.
4. Render the Content rich text field on the article detail page.
5. Set the Outrank Main Blog Address to the correct URL route where article pages live, for example https://example.app/blog.
6. Use the Server API integration for linked Table of Contents scrolling. Legacy plugin syncs need plugin-side scroll support before linked Table of Contents items can scroll reliably.
7. Add a YouTube component on the article detail page.
8. Bind the YouTube component URL setting to the Video URL CMS field.
9. Set the YouTube component visibility to show only when Video URL is set.
10. Publish the Framer site.

Framer does not render raw YouTube iframes inside CMS rich text as playable videos. Framer's official CMS video setup uses a plain text Video URL field connected to a YouTube, Vimeo, or Video component. Read Framer's guide here .

What Gets Synced

• Outrank Article ID, created automatically in Framer
• Title
• Content rich text
• Featured image
• Meta description
• CreatedAt
• Status
• Author
• Tags
• Video URL when the article contains a YouTube video

Articles without a YouTube video sync an empty Video URL. Use Framer visibility conditions so the YouTube component is hidden when Video URL is empty.

Table of Contents links are generated only when Main Blog Address is set to the Framer collection route. If Main Blog Address is empty, the Table of Contents syncs as a plain text list so Framer does not receive broken in-page links.

Framer removes heading IDs from CMS rich text when rendering the live page. The Server API integration installs Outrank's Framer scroll code so linked Table of Contents items can scroll to the matching headings. Legacy plugin syncs keep their existing content payload unless the plugin adds equivalent support.

The Outrank Article ID field is used for automated Framer publishing. If it is removed from the collection, Outrank will need to recreate it before articles can sync reliably.

Troubleshooting