(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

IFrame

Link to Figma: tba

Overview

• The IFrame component embeds external web content inside your application.
• It keeps the embedded content separate from the main application for security.
• It supports HTML documents, websites, and full web applications.
• It is useful for integrating third-party tools, dashboards, or documentation.

...

• id – Specifies a unique identifier for the component used for programmatic access. For example, "paymentGatewayFrame" enables targeted manipulation of this specific IFrame component through scripts or automated tests.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "payment-gateway-iframe" allows test scripts to reliably locate this component during automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the IFrame can be highlighted during onboarding or tutorial flows to draw user attention to important embedded content.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Payment Gateway", "de-DE": "Zahlungs-Gateway"} provides clear identification during guided tours.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This area displays our secure payment processing system", "de-DE": "Dieser Bereich zeigt unser sicheres Zahlungsabwicklungssystem"} provides detailed instructions during guided tours.

Links

• Figma: tba
• Live style guide: tba

Guidelines

Usage

• Embed third-party pages or apps by setting src to a trusted, task-relevant URL or a template expression (e.g., "${context.reportUrl}").
• Show the IFrame only when prerequisites are satisfied (e.g., a selection exists) so users don’t see empty frames (displayConditions).
• Restrict visibility of sensitive or licensed content to authorized audiences (visibilityPolicySetId).
• Name the instance clearly for authors/QA so it’s easy to find in complex screens (displayName).

...

• Size the frame to the embedded content’s expected viewport; use percentages for flexible layouts and pixels for fixed designs (width, height).
• Add breathing room so the frame doesn’t butt up against adjacent UI (paddingClass).
• For content that should fill the available area, set width: "100%" and an appropriate height to avoid double scrollbars.

Interactions & Events

• Bind lifecycle behaviors to events without duplicating state rules: use ON_INIT for any setup (e.g., preparing dynamic src context), ON_PAGE_LOAD for analytics or marking “ready,” and ON_DESTROY for teardown of timers/listeners.

Visibility & Authorization

...