Framer Integration

Overview

The Framer integration uses the Sight AI Framer plugin to sync articles and categories from Sight AI directly into your existing Framer CMS collections. The plugin uses API key authentication and allows you to map Sight AI content fields to your collection fields.

Requirements

• Framer account – With CMS capabilities
• Existing CMS collection – You must create a collection in Framer before syncing
• Sight AI API key – Generated from the Framer integration page in Sight AI
• Framer Desktop or Web – To install and use the plugin

Setup Instructions

Step 1: Generate an API Key in Sight AI

1. Log in to Sight AI at app.trysight.ai
2. Navigate to Integrations → Framer
3. Click Generate API Key
4. Copy and save your API key securely – you won't be able to see it again

Step 2: Create Your CMS Collection in Framer

Before using the plugin, you need to create a CMS collection in Framer with the fields you want to sync. The plugin syncs to existing collections only.

Recommended fields for a blog/articles collection:

• Title – Text field
• Slug – Slug field
• Content/Body – Rich text (Formatted Text) field
• Featured Image – Image field
• Summary/Excerpt – Text field (optional)
• Category – Collection reference field (optional, for category linking)
• Published Date – Date field (optional)

Step 3: Install the Sight AI Framer Plugin

1. Open your Framer project
2. Click on the Plugins icon (puzzle piece) in the toolbar
3. Search for "Sight AI"
4. Click Install

You can also install directly from the Framer Marketplace.

Step 4: Connect and Sync

1. Open the Sight AI plugin in Framer
2. Enter your API key from Step 1 and click Next
3. Select an existing CMS collection from the dropdown
4. Choose your data source:
   • Articles – Sync your generated articles
   • Categories – Sync your article categories
5. Map your fields:
   • Select which slug field from the source data to use for item IDs
   • For each Framer field, select the corresponding source field or choose "Don't sync"
6. Click Import to sync the content to your collection

Understanding Field Mapping

The plugin auto-matches fields by name when possible, but you can customize the mapping:

• Framer Field – The field in your existing Framer collection
• Source Data – The corresponding field from Sight AI (title, content, featured_image, etc.)
• Don't sync – Skip this field and don't populate it

Fields are matched by case-insensitive name comparison. For example, a Framer field named "Title" will automatically map to the source "title" field.

Available Source Fields

When syncing Articles, the following fields are available:

• title – Article title (text)
• slug – URL-friendly slug (text)
• content – Full article content (formatted text/HTML)
• featured_image – Main article image (image)
• meta_description – SEO meta description (text)
• author – Author name (text)
• published_at – Publication date (date)
• category – Category reference (collection reference)

When syncing Categories, the following fields are available:

• name – Category name (text)
• slug – URL-friendly slug (text)

Syncing Workflow

Initial Sync

1. Open the Sight AI plugin
2. The plugin will detect your saved API key if you've used it before
3. Select your collection and data source
4. Configure field mappings
5. Click Import to sync all content

Re-syncing Content

To update your Framer collection with new or updated content:

1. Open the plugin again
2. It will remember your previous configuration
3. Click Import to sync changes

The plugin updates existing items (matched by slug) and adds new items. Items that exist in Framer but not in Sight AI are preserved unless manually removed.

Category Sync

When you sync categories through the Framer plugin, they automatically sync back to Sight AI. This enables:

• Selecting Framer categories when generating new articles in Sight AI
• Maintaining category consistency between both platforms
• Article-to-category linking using collection references

Publishing to Your Site

After syncing articles to your Framer CMS:

1. Review the synced articles in your CMS panel
2. Make any final edits if needed
3. Publish your Framer site to make articles live

Note: Framer integration does not support auto-publish. Articles need to be manually synced through the plugin and your site published through Framer.

Troubleshooting

No Collections Available

• Create at least one CMS collection in Framer before using the plugin
• Ensure your Framer plan supports CMS functionality
• Try refreshing the plugin

API Key Not Working

• Verify you copied the full API key (they start with "sight_")
• Check that the API key hasn't been regenerated in Sight AI
• Generate a new API key if the current one isn't working

Sync Failed

• Ensure your Framer collection has the expected field types
• Check that required fields are properly mapped
• Verify you have articles in "Ready" status in Sight AI
• Check your browser console for error details

Images Not Appearing

• Ensure you mapped the featured_image field to an Image type field
• Verify your Framer plan supports CMS images
• Try re-syncing the articles

Field Mapping Issues

• Check that field types match (text to text, image to image, etc.)
• Rich text/HTML content should map to a Formatted Text field
• Category references require the categories collection to exist first

Disconnecting

To disconnect the Framer integration:

1. Go to Integrations → Framer in Sight AI
2. Click Disconnect Integration
3. Confirm the disconnection

This will invalidate your API key and remove cached category data. Your existing articles in both Sight AI and Framer will not be affected.

Next Steps

• Generate articles to sync
• Set up search engine indexing
• Track your AI visibility