## Overview

Embed content from any website (as iframe). The Inline Frame widget embeds external web content directly into a cplace page using an HTML iframe. It displays content from a fixed URL specified during widget configuration, allowing users to view and interact with external websites or web applications without leaving the cplace interface.

This is a **static embedding widget** - the URL is defined once during configuration and remains the same regardless of which page displays the widget. For context-dependent URLs that change based on page attributes, use the Dynamic Inline Frame widget instead.

## Use Cases

### External Documentation Integration
Embed user manuals, help documentation, or tutorials from external documentation systems directly in cplace pages. Users can access reference materials without leaving their workflow.

### Dashboard Embedding
Display real-time analytics, reports, or metrics from BI tools or monitoring systems. This creates a consolidated view where users can see data from multiple systems in one place.

### Third-Party Tool Integration
Show content from Jira, Confluence, or other third-party tools that the organization uses alongside cplace. This enables seamless integration with existing tools in the organizational ecosystem.

### Map Display
Embed maps from services like OpenStreetMap or Google Maps to show office locations, project sites, or geographic data with visual representation.

### Custom Internal Applications
Integrate specialized internal tools or custom web applications hosted within the organization. This provides a unified interface for accessing various organizational tools.

### Static Hosted Content
Display custom HTML/JavaScript visualizations or tools served from within the cplace instance using relative URLs (e.g., `/static/custom-widgets/visualization.html`).

## Design Considerations

### When to Use Inline Frame

- **Fixed content**: The embedded content is the same for all pages and users
- **Company-wide resources**: General documentation, shared dashboards, or common tools
- **Simple configuration**: Just need to enter a URL without complex attribute mapping
- **Static external content**: Content that doesn't depend on page context

### When to Use Dynamic Inline Frame Instead

- URLs need to include values from page attributes (e.g., project IDs, external system references)
- Different pages should show different external content based on their data
- The embedded content needs to be filtered or parameterized by page context

### Browser and Network Requirements

- External sites must allow iframe embedding (not blocked by X-Frame-Options or Content-Security-Policy headers)
- Users must have network access to the target URL
- HTTPS URLs are recommended to avoid mixed content warnings
- Corporate firewalls may affect access to external URLs

### Security Validation

The widget includes built-in security measures:
- JavaScript URLs are blocked to prevent XSS attacks
- Data URLs are not allowed
- URLs are validated against tenant-specific security policies
- Relative URLs are automatically converted to absolute URLs using the tenant's external URL

## Common Pitfalls

- **External site blocks embedding**: Many websites set X-Frame-Options headers that prevent iframe embedding. If content doesn't display, check the browser console for frame-blocking errors. Consider using the Dynamic Inline Frame widget in "button mode" as an alternative.

- **Mixed content warnings**: When cplace runs on HTTPS but the embedded content uses HTTP, browsers may block the content or show warnings. Always use HTTPS URLs when available.

- **Network access issues**: Users may not be able to access external URLs due to corporate firewalls or VPN requirements. Verify that all intended users have network access to the embedded content.

## Alternatives

| Alternative | When to Consider |
|-------------|-----------------|
| **Dynamic Inline Frame** | URL needs to change based on page attributes |
| **Rich String with Links** | External site blocks iframe embedding; simple link is sufficient |
| **Low-Code Widget** | Need full control over rendering or API-based integration instead of iframe |

## Related Patterns

- **Documentation portal** - Use Inline Frame widgets on landing pages to embed company-wide documentation or training materials
- **Dashboard consolidation** - Place multiple Inline Frame widgets on a dashboard page to aggregate views from different systems
- **Tool integration hub** - Create a page with iframe widgets linking to various external tools the team uses