Embedding Content Guide

This guide shows you how to embed external content like Figma designs and Wonderful boards directly into your documentation pages.

Embedding Figma Designs

You can embed Figma boards, design files, and prototypes using the FigmaEmbed component:

Figma Embed Props

• url (required): The Figma file URL or embed URL
• title (optional): Descriptive title for the embed
• height (optional): Height in pixels (default: 450)
• allowFullscreen (optional): Enable fullscreen mode (default: true)

Getting a Figma Embed URL

1. Open your Figma file
2. Click the "Share" button
3. Select "Get embed code"
4. Copy the URL from the embed code

Embedding Wonderful Content

Embed Wonderful documents, boards, and pages using the WonderfulEmbed component:

Wonderful Embed Props

• url (required): The Wonderful page/board/document URL
• type (optional): Content type - 'document', 'board', or 'page' (default: 'page')
• title (optional): Descriptive title for the embed
• height (optional): Height in pixels (default: 500)
• allowFullscreen (optional): Enable fullscreen mode (default: true)

Responsive Design

Both embed components are fully responsive and work on all screen sizes:

• Mobile devices: Embeds scale to fit screen width
• Tablets: Embeds maintain aspect ratio
• Desktop: Embeds display at specified height

Best Practices

Accessibility

Always provide descriptive titles for your embeds:

<FigmaEmbed 
  url="..."
  title="User Onboarding Flow Wireframes"
/>

Performance

Use lazy loading for embeds below the fold (enabled by default):

• Embeds only load when scrolled into view
• Reduces initial page load time
• Improves overall performance

Height Guidelines

Choose appropriate heights based on content:

• Figma designs: 450-800px depending on complexity
• Wonderful boards: 500-700px for standard boards
• Wonderful documents: 400-600px for text-heavy content

Examples

Small Embed

For quick previews or thumbnails:

Large Interactive Board

For detailed project boards:

Document Embed

For embedded documentation:

Troubleshooting

Embed Not Loading

If your embed doesn't load:

1. Check that the URL is correct and accessible
2. Verify the content is set to "public" or has proper sharing permissions
3. Ensure embed links are enabled in the source platform
4. Check browser console for any error messages

Performance Issues

If embeds are slow to load:

1. Reduce the number of embeds per page (3-5 maximum recommended)
2. Use smaller height values when possible
3. Consider linking to content instead of embedding for heavy files
4. Ensure source content is optimized

Additional Resources

• Figma Embedding Documentation
• Wonderful Sharing Guide
• Performance Best Practices