Framer Integration

Framer CMS Sync

Framer is a design-first website builder with a powerful CMS. This integration syncs your published RankHiker articles directly to your Framer CMS collection.

How It Works

Unlike other platforms, Framer doesn't have an external REST API for publishing. Instead, this integration uses a pull-based sync:

1. You install the RankHiker plugin in Framer
2. The plugin fetches your published articles from RankHiker's API
3. Articles appear in your Framer CMS collection automatically

Setup Steps

#### Step 1: Generate an Export API Key

1. Go to Dashboard → Platforms
2. Click Add Platform and select Framer
3. In the Framer dialog, click Generate API Key
4. Copy the generated key (starts with rh_export_)

#### Step 2: Install the RankHiker Plugin in Framer

1. Open your Framer project
2. Go to CMS → Collections
3. Create a new Collection (or select an existing blog collection)
4. Click Plugins → search for "RankHiker Sync"
5. Install the plugin

##### If you can’t find “RankHiker Sync” in the plugin search That usually means the plugin is not published to Framer’s public plugin directory (yet), or you’re using a workspace/account that can’t access it.

You have 2 options:

Option A — Use the plugin in developer mode (recommended for now)

If you have access to the RankHiker codebase (this repo), you can run the Framer plugin locally and open it in Framer from a URL.

1. Start the plugin dev server:

pnpm -C framer-plugin install
   # If syncing against a local RankHiker instance, avoid HTTPS→HTTP “mixed content” by using Vite proxy:
   # Create framer-plugin/.env.local with:
   # VITE_RANKHIKER_API=/api
   # (This proxies https://localhost:5173/api/ → http://localhost:3000/api/)
   pnpm -C framer-plugin dev

1. Then follow Framer’s “Open in Framer” flow from the plugin docs:

- https://www.framer.com/developers/plugins/quick-start#opening-in-framer

(Framer will prompt you for the plugin URL; use the local dev server URL printed by Vite, typically something like https://localhost:5173.)

Option B — Publish the plugin to Framer

If you want the plugin to show up in Framer search for everyone, it must be published via Framer’s plugin publishing workflow.

> If you tell us whether you want private/internal distribution or a public listing, we can help you prepare the plugin for publishing (stable hosted URL, versioning, and release process).

#### Step 3: Configure the Plugin

1. Open the RankHiker plugin in your CMS collection
2. Paste your Export API Key
3. Select your Workspace (optional - to filter articles by workspace)
4. Click Test Connection to verify
5. Click Save Configuration

The plugin will create the following CMS fields:

#### Step 4: Sync Your Articles

1. Click Sync Now in the plugin
2. All published articles from RankHiker will appear in your CMS collection
3. The plugin automatically converts Markdown to HTML for Framer's rich text fields

Incremental Sync

The plugin remembers the last sync date and only fetches articles published after that date. This makes subsequent syncs faster and more efficient.

What Gets Synced

• Published articles only - Drafts and scheduled articles are not synced
• Full content - Title, body, excerpt, tags, and featured image
• Markdown to HTML - Content is automatically converted from Markdown to HTML
• Images - Featured images are included as image URLs

Updating Articles

If you update an article in RankHiker and publish it again, the next sync will update the content in Framer. The plugin uses article IDs to track which items to update.

Deleting Articles

If an article is deleted from RankHiker, the next sync will remove it from your Framer CMS collection as well.

Using Synced Content in Framer

After syncing:

1. Use CMS components to display article content
2. Bind fields like Title, Content, Featured Image to your design
3. The Original URL field links back to RankHiker for reference

Troubleshooting

• Connection failed - Verify your API key is correct and not expired
• No articles appearing - Make sure you have published articles in RankHiker
• Content not rendering correctly - The plugin converts Markdown to HTML automatically; check that your Framer rich text field is configured correctly

Support

• Full documentation: rankhiker.com/docs/integrations/framer-integration
• Framer plugin docs: framer.com/developers