Framer Integration

Connect your Framer website with Rank Sector for automated content publishing.

How Framer Integration Works

The Rank Sector Framer integration connects your Rank Sector account with Framer CMS collections. Articles generated in Rank Sector are synced to your Framer CMS, where they can be rendered using your custom-designed collection pages.

Setup Instructions

Step 1: Create Integration & Get API Key

In your Rank Sector dashboard, navigate to Integrations and select Framer. Rank Sector will generate a unique API key for your Framer integration. Copy this key for the next step.

Step 2: Install Content Plugin in Framer

Open your Framer project and go to the Plugins panel. Search for the Rank Sector content plugin and install it into your project.

Step 3: Connect Plugin with API Key

Open the Rank Sector plugin within Framer and paste the API key you copied from the Rank Sector dashboard. Click Connect to authenticate the integration.

Ensure your API key is copied exactly as shown in the Rank Sector dashboard. The key is case-sensitive and should not contain extra spaces.

Step 4: Set Up Your Collection

In Framer, create a new CMS collection for your Rank Sector articles (or use an existing one). Map the following fields to ensure all content is properly synced:

  • Title — Article title
  • Content — Full article body (rich text)
  • Slug — URL-friendly identifier
  • Featured Image — Hero/cover image
  • Meta Title — SEO title
  • Meta Description — SEO description

Step 5: Map Fields & Import Articles

Use the Rank Sector plugin interface in Framer to map your Rank Sector article fields to the corresponding CMS collection fields. Once mapped, click Import to sync existing articles. Future articles will sync automatically.

Step 6: Style Your Articles

Customize the design of your article pages in Framer to match your site's visual identity. Use Framer's design tools to create collection pages that display your Rank Sector content with your preferred layout, typography, and styling.

What Gets Synced

The following data is synced from Rank Sector to your Framer CMS collection:

  • Article content — Full rich text body
  • Featured images — Cover/hero images
  • Meta data — SEO title and description
  • Tags — Article categories and tags
  • Slug/URL — URL-friendly article identifier

Troubleshooting

API key not working

If the API key is rejected, navigate back to your Rank Sector dashboard and regenerate the key. Copy the new key and paste it into the Framer plugin settings.

Content not showing

Verify that your CMS collection field mapping is correct. Each Rank Sector field must be mapped to the appropriate Framer collection field.

Images not loading

Check your Framer image settings and ensure that external images are allowed. Verify that the image URLs from Rank Sector are accessible. If images still fail to load, try re-importing the affected articles.

After making changes to your CMS collection structure in Framer, you may need to re-map your fields in the Rank Sector plugin to ensure continued syncing.

Start creating magic today with a free trial!

Get Started For Free →