Logo

Framer

Learn how to integrate Hovers with Framer to sync your articles and content to your Framer site using the Framer CMS.

Framer Integration

Hovers integrates with Framer, allowing you to sync your articles and content to your Framer site using Framer's CMS. This integration enables your Framer plugin to fetch articles from Hovers and display them on your Framer website.

Benefits of the Framer Integration

  • Content Sync: Automatically sync your Hovers articles to your Framer site
  • Real-time Updates: Keep your Framer site up-to-date with your latest content
  • Flexible Publishing: Control which articles appear on your Framer site
  • Rich Content Support: Sync full article content including markdown, HTML, images, and metadata
  • Secure API Access: Token-based authentication ensures secure content access

How It Works

The Framer integration uses a pull-based model where a Framer plugin fetches content from Hovers:

  1. Generate API Token: Create a secure API token in Hovers for your Framer site
  2. Install Framer Plugin: Use a Framer plugin that connects to Hovers' API
  3. Sync Content: The plugin fetches articles from Hovers and creates CMS entries in Framer
  4. Automatic Updates: The plugin can periodically sync to get the latest content

Setting Up the Framer Integration

Prerequisites

Before connecting Hovers to Framer, ensure you have:

  1. A Hovers account with content/articles created
  2. A Framer site where you want to display the content
  3. Access to install plugins in your Framer project

Connection Steps

  1. Navigate to the "Integrations" section in your Hovers dashboard
  2. Select "Framer" from the available integrations
  3. Enter your Framer site URL (e.g., https://your-site.framer.website)
  4. Click "Generate API Token"
  5. Important: Copy the generated API token immediately - you'll only see it once!
  6. Save the token securely - you'll need it to configure your Framer plugin

API Token Security

  • The API token is shown only once when generated
  • Store it securely (password manager, secure notes, etc.)
  • If you lose the token, you can generate a new one (the old one will be invalidated)
  • Each token is unique to your site and cannot be used for other sites

Using the Framer Integration

Configuring Your Framer Plugin

Once you have your API token, configure your Framer plugin:

  1. Install the Hovers Framer plugin in your Framer project
  2. Enter your Hovers API token in the plugin settings
  3. Enter your Hovers site ID (found in your Hovers dashboard)
  4. Configure sync preferences (automatic sync, manual sync, etc.)

API Endpoints

The Framer integration exposes the following API endpoints for your plugin:

List Articles

GET /api/framer/articles?token=YOUR_TOKEN&siteId=YOUR_SITE_ID

Query Parameters:

  • token (required): Your API token
  • siteId (required): Your Hovers site ID
  • page (optional): Page number for pagination (default: 1)
  • limit (optional): Number of articles per page (default: 20, max: 100)
  • status (optional): Filter by status (published, draft, scheduled)
  • since (optional): ISO date string - only return articles created after this date

Response:

{
  "articles": [
    {
      "id": "uuid",
      "title": "Article Title",
      "slug": "article-slug",
      "body": "markdown content...",
      "body_html": "<p>HTML content...</p>",
      "excerpt": "Meta description",
      "featured_image": "url or null",
      "status": "published",
      "created_at": "2024-01-01T00:00:00Z",
      "updated_at": "2024-01-01T00:00:00Z",
      "metadata": {
        "keywords": ["keyword1", "keyword2"],
        "seo_data": {}
      }
    }
  ],
  "pagination": {
    "page": 1,
    "limit": 20,
    "total": 100,
    "total_pages": 5
  }
}

Get Single Article

GET /api/framer/articles/{articleId}?token=YOUR_TOKEN&siteId=YOUR_SITE_ID

Response:

{
  "id": "uuid",
  "title": "Article Title",
  "slug": "article-slug",
  "body": "markdown content...",
  "body_html": "<p>HTML content...</p>",
  "excerpt": "Meta description",
  "featured_image": "url or null",
  "status": "published",
  "created_at": "2024-01-01T00:00:00Z",
  "updated_at": "2024-01-01T00:00:00Z",
  "metadata": {
    "keywords": ["keyword1", "keyword2"],
    "seo_data": {},
    "outline": [],
    "content_settings": {},
    "schema_data": {}
  }
}

Content Fields

Each article includes the following fields:

  • id: Unique identifier for the article
  • title: Article title
  • slug: URL-friendly slug
  • body: Article content in markdown format
  • body_html: Article content in HTML format (converted from markdown)
  • excerpt: Meta description or excerpt
  • featured_image: URL to the featured image (if available)
  • status: Article status (published, draft, scheduled)
  • created_at: ISO timestamp of creation
  • updated_at: ISO timestamp of last update
  • metadata: Additional metadata including keywords, SEO data, outline, and schema

Filtering and Pagination

Use query parameters to filter and paginate results:

Get only published articles:

GET /api/framer/articles?token=YOUR_TOKEN&siteId=YOUR_SITE_ID&status=published

Get articles with pagination:

GET /api/framer/articles?token=YOUR_TOKEN&siteId=YOUR_SITE_ID&page=2&limit=10

Get articles updated after a specific date:

GET /api/framer/articles?token=YOUR_TOKEN&siteId=YOUR_SITE_ID&since=2024-01-01T00:00:00Z

Advanced Features

Incremental Sync

Use the since parameter to implement incremental syncing:

  1. Store the timestamp of your last sync
  2. On the next sync, use that timestamp as the since parameter
  3. Only new or updated articles will be returned
  4. Update your stored timestamp after a successful sync

Rate Limiting

The API implements rate limiting to ensure fair usage:

  • Limit: 100 requests per 60 seconds per token
  • Response: If rate limited, you'll receive a 429 Too Many Requests status
  • Recommendation: Implement exponential backoff in your plugin

Error Handling

The API returns standard HTTP status codes:

  • 200: Success
  • 400: Bad Request (missing required parameters)
  • 401: Unauthorized (invalid or expired token)
  • 404: Not Found (article doesn't exist)
  • 429: Too Many Requests (rate limit exceeded)
  • 500: Internal Server Error

Troubleshooting

Connection Issues

If you're having trouble connecting:

  1. Verify Token: Ensure your API token is correct and hasn't been regenerated
  2. Check Site ID: Confirm you're using the correct site ID from your Hovers dashboard
  3. Test API: Use curl or a REST client to test the API endpoints directly
  4. Check Logs: Review your Framer plugin logs for detailed error messages

Content Not Syncing

If content isn't appearing in Framer:

  1. Check Status: Ensure articles have the status you're filtering for
  2. Verify Permissions: Confirm your API token hasn't been revoked
  3. Test Endpoint: Manually test the API endpoint to verify it returns data
  4. Plugin Configuration: Verify your Framer plugin is configured correctly

Token Issues

If you need to regenerate your API token:

  1. Go to the Integrations section in Hovers
  2. Click on the Framer integration
  3. Click "Disconnect" to remove the old connection
  4. Click "Connect" again to generate a new token
  5. Update your Framer plugin with the new token

Best Practices

To maximize the benefits of the Framer integration:

  • Regular Syncs: Set up automatic syncing to keep your Framer site updated
  • Status Management: Use status filters to control which content appears on your site
  • Error Handling: Implement proper error handling in your Framer plugin
  • Caching: Consider caching article data in your plugin to reduce API calls
  • Monitoring: Track sync success rates and handle failures gracefully

Security Considerations

  • Token Storage: Store API tokens securely in your Framer plugin configuration
  • HTTPS Only: Always use HTTPS when making API requests
  • Token Rotation: Periodically regenerate tokens for enhanced security
  • Access Control: Only share tokens with trusted team members
  • Revocation: Immediately revoke tokens if they're compromised

Support

If you need help with the Framer integration:

  1. Check this documentation for common issues
  2. Review the API endpoint responses for error details
  3. Contact Hovers support with your site ID and error messages
  4. Provide details about your Framer plugin configuration

By leveraging the Framer integration, you can seamlessly sync your Hovers content to your Framer site, keeping your website up-to-date with your latest articles and content.