Logo
Docs

Extensions

Enhance your Frontro platform with custom extensions and third-party integrations. Build powerful add-ons that extend functionality, integrate with external services, and create unique experiences for your community.

Overview

Frontro's extension system allows developers and creators to extend the platform's core functionality with custom features, integrations, and user experiences. Whether you want to add new content types, integrate with external APIs, or create custom analytics dashboards, extensions provide the flexibility to tailor Frontro to your specific needs.

What Extensions Can Do

  • Custom Content Types: Create new ways to present and interact with content
  • Third-Party Integrations: Connect with external services and APIs
  • Analytics & Reporting: Build custom dashboards and data visualizations
  • Community Features: Add new social and engagement tools
  • Monetization Tools: Implement custom payment and subscription models
  • Workflow Automation: Streamline content creation and management processes

Extension Architecture

Extensions run in a secure, sandboxed environment with controlled access to Frontro's APIs and user data. This ensures platform stability while giving developers the power to create rich, interactive experiences.

Installing Extensions

Installing extensions on your Frontro platform is straightforward and can be done through the admin dashboard or programmatically via API.

From the Extension Marketplace

  1. Browse Extensions: Navigate to the Extensions section in your admin dashboard
  2. Search & Filter: Find extensions by category, popularity, or functionality
  3. Preview: View screenshots, descriptions, and user reviews
  4. Install: Click install and configure any required settings
  5. Activate: Enable the extension for your platform

Manual Installation

For custom or private extensions, you can install them manually:

# Install via Frontro CLI
frontro extension install ./my-extension.zip

# Install from URL
frontro extension install https://example.com/extension.zip

# Install from npm package
frontro extension install @mycompany/frontro-extension

Extensions can be installed from the marketplace in your dashboard under Settings → Extensions. Configure any required settings (e.g. webhook URLs, external service keys) after installation.

Configuration

Most extensions require some configuration after installation:

  • API Keys: Connect to external services
  • Permissions: Define what data the extension can access
  • Display Settings: Customize how the extension appears to users
  • Webhooks: Configure event notifications and data sync

Creating Extensions

Building your own extensions allows you to create exactly the functionality you need for your platform.

Extension Structure

Every Frontro extension follows a standard structure:

my-extension/
├── manifest.json          # Extension metadata and configuration
├── src/
│   ├── index.js          # Main extension entry point
│   ├── components/       # React components
│   ├── hooks/           # Custom React hooks
│   └── utils/           # Utility functions
├── public/
│   ├── icon.png         # Extension icon
│   └── screenshots/     # Marketplace screenshots
├── docs/
│   └── README.md        # Documentation
└── package.json         # Dependencies and scripts

Manifest File

The manifest.json file defines your extension's metadata and capabilities:

{
  "name": "Custom Analytics Dashboard",
  "version": "1.0.0",
  "description": "Advanced analytics and reporting for your Frontro platform",
  "author": "Your Company",
  "homepage": "https://your-company.com/extensions/analytics",
  "permissions": [
    "analytics:read",
    "users:read",
    "content:read"
  ],
  "entry": "src/index.js",
  "hooks": [
    "dashboard.sidebar",
    "content.view",
    "user.profile"
  ],
  "settings": {
    "apiKey": {
      "type": "string",
      "required": true,
      "description": "API key for external analytics service"
    },
    "refreshInterval": {
      "type": "number",
      "default": 300,
      "description": "Data refresh interval in seconds"
    }
  }
}

Installing and Using Extensions

To add a custom widget or extension (e.g. an analytics dashboard): go to Settings → Extensions, then Install or Browse marketplace. Select the extension and install it; it may appear in the left navigation or in the area it’s designed for. Configure any settings (e.g. API key, refresh interval) in Settings → Extensions → [extension name].

Advanced Extension Features

Extensions can run at key moments (e.g. before or after saving content, before or after login). In the dashboard, open Settings → Extensions → select the extension to see which hooks it uses and to enable or disable them. Configure any options (e.g. which content types to process, which events to track) in the same settings page.

Extension Types

Frontro supports several types of extensions, each designed for different use cases:

UI Extensions

Add new interface elements and user experiences:

  • Dashboard Widgets: Custom analytics, metrics, and quick actions
  • Content Editors: New ways to create and edit content
  • Player Enhancements: Custom video players and interactive elements
  • Theme Extensions: Custom styling and branding options

Integration Extensions

Connect Frontro with external services:

  • Payment Processors: Custom payment gateways and billing systems
  • Email Services: Marketing automation and transactional emails
  • Analytics Platforms: Advanced tracking and reporting
  • Social Media: Cross-platform posting and engagement tools

Workflow Extensions

Automate and streamline platform operations:

  • Content Processing: Automatic transcription, translation, and optimization
  • User Management: Custom onboarding and user lifecycle automation
  • Moderation Tools: Automated content review and community management
  • Backup & Sync: Data backup and multi-platform synchronization

Publishing Extensions

Share your extensions with the Frontro community through the Extension Marketplace.

Submission Process

  1. Prepare Your Extension: Ensure code quality, documentation, and testing
  2. Create Marketplace Listing: Add description, screenshots, and pricing
  3. Security Review: Frontro reviews all extensions for security and compatibility
  4. Approval & Publishing: Once approved, your extension goes live in the marketplace

Marketplace Guidelines

  • Code Quality: Follow Frontro's coding standards and best practices
  • Security: Extensions must pass security audits and follow permission guidelines
  • Documentation: Provide clear installation and usage instructions
  • Support: Maintain your extension and provide user support

Publishing to the Marketplace

To publish an extension: in the dashboard go to Settings → Extensions (or Developer → Extensions). Choose Publish to marketplace, upload your extension package (e.g. a .zip), then fill in the listing: title, description, category (e.g. analytics), pricing (free, paid, or freemium), and screenshots. Submit for review; once approved, the extension appears in the marketplace for other creators to install.

Security & Permissions

Frontro's extension system prioritizes security and user privacy through a comprehensive permission model.

Permission System

Extensions must declare what data and functionality they need access to:

  • Content Permissions: Read/write access to courses, videos, and other content
  • User Permissions: Access to user profiles, analytics, and behavior data
  • System Permissions: Ability to modify platform settings and configurations
  • Network Permissions: Access to external APIs and services

Security Best Practices

  • Minimal Permissions: Only request the permissions your extension actually needs
  • Data Encryption: Encrypt sensitive data both in transit and at rest
  • Input Validation: Validate all user inputs to prevent security vulnerabilities
  • Regular Updates: Keep your extension updated with security patches

All extensions run in a sandboxed environment with limited access to system resources. This ensures that even if an extension has vulnerabilities, it cannot compromise the entire platform.

Permission Examples

Declare permissions in your extension’s manifest.json (e.g. analytics:read, content:write, users:read, webhooks:create, payments:process). In the dashboard, open Settings → Extensions → select the extension to see which permissions it has and to grant or revoke access for your channel.

Best Practices

Follow these guidelines to create high-quality, maintainable extensions:

Development

  • Modular Design: Break your extension into reusable components
  • Error Handling: Gracefully handle API failures and edge cases
  • Performance: Optimize for fast loading and minimal resource usage
  • Testing: Write comprehensive tests for your extension's functionality

User Experience

  • Intuitive Interface: Design interfaces that feel native to Frontro
  • Responsive Design: Ensure your extension works on all device sizes
  • Accessibility: Follow accessibility guidelines for inclusive design
  • Documentation: Provide clear user guides and help documentation

Maintenance

  • Version Control: Use semantic versioning for your releases
  • Backward Compatibility: Maintain compatibility with older Frontro versions
  • User Feedback: Actively collect and respond to user feedback
  • Regular Updates: Keep your extension current with platform changes

Extension SDK Reference

Core APIs

Extensions can access platform data and actions through the extension SDK (e.g. users, content, analytics). Use the SDK's hooks and context (e.g. useSettings, useAuth, useTheme) to build your extension UI and logic. See the extension SDK documentation for your environment for exact usage.

Available Hooks

Extensions can hook into various platform events:

  • content.beforeSave - Before content is saved
  • content.afterSave - After content is saved
  • user.beforeLogin - Before user login
  • user.afterLogin - After user login
  • payment.beforeProcess - Before payment processing
  • payment.afterProcess - After payment processing

Testing Extensions

To test an extension before going live: in the dashboard go to Settings → Extensions → select the extension, then use Test or Preview to run it in a sandbox. Verify that widgets load, hooks run as expected, and settings apply correctly. For published extensions, use the extension’s own test suite or the SDK testing tools as documented for developers.

  • Settings - Channel settings and configuration
  • Analytics - Channel performance and insights
  • Builder - Customize your channel appearance
  • Support - Get help with extensions and integrations

Was this page helpful?