How to Connect Your Framer Site to Lovarank

This article explains how to set up the Framer integration so you can automatically sync and publish articles from Lovarank to your Framer CMS collections.

What It Does / Why It Matters

The Framer integration enables you to publish content directly from Lovarank to your Framer site's CMS collections. Instead of manually copying content into Framer, you can write, optimize, and sync articles from Lovarank. This saves time and keeps your content workflow centralized.

How to Use It

Step 1: Create the Integration in Lovarank

1. In your Lovarank account, navigate to the Framer integration page
2. Enter an Integration Name to identify this connection (e.g., "My Framer Site")
3. Copy the API Key displayed on the page by clicking the copy button
4. Keep this page open - you'll need to return here after setting up the plugin in Framer

Step 2: Install the Lovarank Plugin in Framer

1. Open your Framer project
2. Go to CMS Collections in the left sidebar
3. Click Add Plugin
4. Search for and select Lovarank from the plugin library
5. Click Install or Add to Project

Step 3: Configure the Plugin in Framer

1. When prompted, paste the API Key you copied from Lovarank
2. Select which CMS collection fields you want to sync with Lovarank
3. Map the fields appropriately
4. Click Import Articles or Save to complete the setup

Step 4: Complete the Integration and Test it

1. Return to your Lovarank tab
2. Click Create Integration to finalize the integration
3. In the CMS collection created by the Lovarank plugin, click on the Sync button to get the articles

Your Framer site is now connected to Lovarank!

Common Issues & Fixes

"Invalid API key" error

• Ensure you copied the entire API key without extra spaces
• The key is case-sensitive - copy it exactly as shown
• Try generating a new integration in Lovarank if the key isn't working

"Plugin not found" error

• Make sure you're searching in the correct plugin library in Framer
• Check that you have editor access to the Framer project
• Verify you're using a Framer plan that supports CMS and plugins

"No collections available" error

• Ensure your Framer project has at least one CMS collection created
• Check that the collection has fields that can accept content
• Refresh the plugin and try again

Articles not syncing

• Verify the API key is correctly entered in the Framer plugin
• Check that field mapping is configured correctly
• Ensure your Framer CMS collection isn't at its item limit
• Try disconnecting and reconnecting the integration

Missing content or images

• Review field mapping to ensure all content types are matched correctly
• Check that image fields in Framer are mapped to Lovarank's image field
• Verify rich text fields are used for article content

"Connection failed" error

• Confirm your Framer site is published or at least saved
• Check that you have the necessary permissions in Framer
• Ensure your internet connection is stable

Tips & Best Practices

• Set up your CMS collection first in Framer with appropriate fields (title, content, featured image, author, date, etc.) before connecting
• Test with one article to verify field mapping and formatting before bulk publishing
• Keep your API key secure - don't share it publicly or commit it to version control
• Name your integration clearly if you manage multiple Framer sites, so you can easily identify which is which
• Map all relevant fields including SEO metadata, categories, and tags for better organization
• Check your Framer plan limits to ensure you have enough CMS items available
• Document your field mapping so team members know which Lovarank fields correspond to which Framer fields

Updated on: 07/11/2025