Connect Rank.ai
with Framer

Seamlessly embed AI-driven content into your Framer sites.

Key Features

What You Get with Framer

Content integrates smoothly with your Framer design system, maintaining consistent typography, spacing, and styling.

Content sections update automatically without rebuilding pages. New articles appear instantly on your live site.

Embed AI-generated articles and content blocks into any Framer page with a simple integration setup.

How It Works

Step 1

Link your Framer project to Rank.ai by connecting your site through the integration settings.

Open the Integrations page in your Rank.ai dashboard and select Framer.
Generate an API key for your Framer site and copy it to your clipboard.
Tip: Each Framer site gets its own unique API key for secure communication.

Step 2

Select where AI-generated content should appear on your site and configure display preferences.

Open your Framer project and install the Rank.ai plugin from the Framer plugin store.
Paste the API key from your Rank.ai dashboard into the plugin settings.
Configure which pages or sections should display AI-generated content.
Tip: The plugin automatically inherits your Framer project's typography and color styles.

Step 3

Articles and content blocks publish automatically, styled to match your Framer design system.

Articles publish through the Framer plugin directly to your live site.
Content matches your design system with consistent typography, spacing, and styling.
Pages update automatically without needing to rebuild or redeploy your Framer site.
Tip: New articles appear instantly — no manual publishing step required.