WorkReels Embed Routes

This directory contains embeddable widgets that can be displayed in iframes on external websites.

Routes

/embed/[companyId]/projects

Displays a company’s projects in a responsive grid layout.

File: [companyId]/projects.astro

Features:

• Company branding (logo + name)
• Responsive grid (1-3 columns)
• Infinite scroll loading
• Only shows “In Progress” and “Completed” projects
• Status badges
• Links to full project details
• Error handling

Usage:

<iframe 
    src="https://workreels.ai/embed/COMPANY_ID/projects"
    width="100%"
    height="600"
    frameborder="0"
    title="WorkReels Projects">
</iframe>

Layout

All embed routes use EmbedLayout.astro which provides:

• Minimal HTML structure (no header/footer)
• Cross-origin embedding support
• Base fonts and styles
• Optimized for iframe contexts

Components

EmbedProjectsGrid.tsx

Simplified version of CompanyProjectsGrid designed for embeds.

Key differences from CompanyProjectsGrid:

• No session storage caching
• Simpler scroll behavior
• Links open in new tab
• Optimized for embedded context
• Uses companyId instead of slug for clarity

API Dependencies

Embed routes use these API endpoints:

1. Company Metadata

   GET /company/{companyId}

   Returns: company info (name, logo, etc.)

2. Projects List

   GET /company/{companyId}/projects?status=in_progress,completed&limit=12&offset=0

   Returns: paginated projects list

Adding New Embed Types

To add a new embed type (e.g., /embed/[companyId]/timeline):

1. Create new file: [companyId]/timeline.astro
2. Use EmbedLayout for consistent structure
3. Create dedicated React component if needed
4. Follow existing patterns for:
   • Error handling
   • API fetching
   • Responsive design
   • Loading states

Example structure:

---
import EmbedLayout from "../../../layouts/EmbedLayout.astro";
import YourComponent from "../../../components/YourComponent.tsx";

export const prerender = false;

const companyId = Astro.params.companyId;
// Fetch data, handle errors
---

<EmbedLayout title="..." description="...">
  <main class="p-4">
    {/* Your content */}
  </main>
</EmbedLayout>

Testing

Test locally:

npm run dev

Visit:

• Demo: http://localhost:4321/embed-demo?company=YOUR_COMPANY_ID
• Direct: http://localhost:4321/embed/YOUR_COMPANY_ID/projects

Documentation

See root-level documentation:

• EMBED_DOCUMENTATION.md - Complete usage guide
• EMBED_QUICKSTART.md - Quick start for all audiences
• EMBED_FEATURE_SUMMARY.md - Technical overview
• EMBED_CHECKLIST.md - Launch checklist
• embed-example.html - Working HTML example

Security

• HTTPS only in production
• CORS headers configured for cross-origin embedding
• No sensitive data exposed
• Sandboxed iframe execution
• Input validation on companyId parameter

Performance

• Server-side rendering (SSR)
• Lazy loading images
• Infinite scroll pagination
• Minimal bundle size
• Optimized for embedded contexts

Browser Support

• Chrome/Edge: Latest 2 versions
• Firefox: Latest 2 versions
• Safari: Latest 2 versions
• Mobile: iOS Safari, Chrome Mobile