Page History
...
- 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
srcto 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).
...