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
- Log in to Sight AI at app.trysight.ai
- Navigate to Integrations → Framer
- Click Generate API Key
- 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
- Open your Framer project
- Click on the Plugins icon (puzzle piece) in the toolbar
- Search for "Sight AI"
- Click Install
You can also install directly from the Framer Marketplace.
Step 4: Connect and Sync
- Open the Sight AI plugin in Framer
- Enter your API key from Step 1 and click Next
- Select an existing CMS collection from the dropdown
- Choose your data source:
- Articles – Sync your generated articles
- Categories – Sync your article categories
- 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"
- 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
- Open the Sight AI plugin
- The plugin will detect your saved API key if you've used it before
- Select your collection and data source
- Configure field mappings
- Click Import to sync all content
Re-syncing Content
To update your Framer collection with new or updated content:
- Open the plugin again
- It will remember your previous configuration
- 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:
- Review the synced articles in your CMS panel
- Make any final edits if needed
- 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:
- Go to Integrations → Framer in Sight AI
- Click Disconnect Integration
- 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.