Integrations

Framer

Publish to a Framer CMS collection.

Grandranker syncs articles into your Framer site's CMS, so every article becomes a real Framer page. There are two ways to connect:

The Framer auto-publish setup in Grandranker

  • Framer Plugin (recommended): install the Grandranker plugin inside the Framer editor and sync articles into an "Articles" CMS collection.
  • Framer Auto-Publish (Server API): hands-off publishing. Grandranker pushes articles straight into your Framer CMS and triggers a deploy. No editor needed.

What you need: edit access to your Framer project. For Auto-Publish, you also need a Framer API key from Site Settings. The Framer Server API is currently in open beta and free.

How to Connect

Framer Plugin

  1. In Grandranker, open Integrations → Add New Integration at app.grandranker.com/integrations/create and pick Framer Plugin.
  2. Open your Framer project. From the top menu choose Plugins → Open Plugin from URL and paste the plugin URL shown in Grandranker.
  3. Back in Grandranker, click Generate token. The token scopes the plugin to this domain's published articles. Copy it now. It won't be shown again.
  4. In the Framer plugin panel, paste the token, pick your domain, and click Sync articles.
  5. An "Articles" collection appears in your Framer project. Bind a CMS detail page to it and every article becomes a real Framer page at /<slug>.

Re-running Sync is safe. Articles match by ID and are upserted in place. New schema fields are added. Existing ones are never removed.

Framer Auto-Publish (Server API)

  1. Open your Framer site in the editor. Go to Site Settings → General → API and generate a new API key. Save it. Framer only shows it once.
  2. Copy the project URL from your browser address bar. It looks like https://framer.com/projects/abc123….
  3. In Grandranker, pick Framer on the Add New Integration page and paste the Framer project URL and Framer API key.
  4. Set the CMS collection name (default Articles). It must match an existing collection in your Framer site. If it doesn't exist, Grandranker creates it.
  5. Choose whether to enable Publish + deploy after sync. When off, articles are upserted into the CMS but the site is not republished.
  6. Click Save & connect.

Publishing & Verifying

With the plugin, articles arrive in your Framer CMS when you click Sync articles in the plugin panel. With Auto-Publish, a daily sync runs at 06:00 UTC. Publishing an article in Grandranker also triggers a sync within about 60 seconds. Your Framer site republishes automatically. You can also click Sync now on the integration page at any time. It shows your last sync timestamp.

To verify, open the CMS panel in your Framer project and check the Articles collection for new items, then confirm the article pages render at their /<slug> URLs on your published site.

Troubleshooting

Articles are in the CMS but not on the live site

  • Plugin method: syncing fills the CMS, but you need a CMS detail page bound to the Articles collection, and the site must be published in Framer.
  • Auto-Publish: check the Publish + deploy after sync toggle. When it's off, the CMS is updated but the site is not republished. Publish manually in Framer or turn the toggle on.

The connection token or API key was lost

Both are shown only once. For the plugin, click Generate a new one in Grandranker and paste the new token into the plugin panel. For Auto-Publish, generate a fresh API key in Framer's Site Settings → General → API and save it on the integration page (the key field shows "saved. Leave blank to keep current." once one is stored).

Sync created a second collection

The CMS collection name must exactly match the collection you already use (default Articles). If the names differ, Grandranker creates a new collection with the configured name. Fix the name in the integration settings so it matches your existing collection.

Last sync says "never"

The integration is saved but hasn't run yet. Click Sync now, or publish an article in Grandranker to trigger a sync. If it still doesn't update, re-check the project URL and API key.

Questions? Contact us at [email protected].