Using Iframes in Portals
What it does
An iframe effect opens a webpage inside Portals. It is useful for a dialogue panel, instructions, a web-based experience, or a branded overlay. This guide covers the no-code controls available in the Interactive Studio panel.
Before you start
- Use a secure
https://URL that you control and have tested in a normal browser. - Connect the Iframe effect to a task state, usually Active.
- Decide what should close it: the player, a task transition, a target URL, or all active iframes.
- Keep essential gameplay understandable even if the external page is unavailable.
Open an iframe
- Select the item that should own the interaction.
- Add an Iframe effect to the desired task state.
- Enter the Iframe URL.
- If the selected item is an NPC and your dialogue setup supports it, choose NPC will animate.
- Test the effect in the space, not only in a browser tab.
Display controls
The Iframe effect reads these URL query options. The Iframe panel can add them for you; do not hand-edit them unless you are deliberately composing a URL.
| Control | Query option | What it does |
|---|---|---|
| Hide Buttons | hideCloseButton=true |
Hides the minimize and close buttons. |
| No Background Blur | noBlur=true |
Opens without blurring the scene behind the iframe. |
| No Mouse Interaction | noPointerEvents=true |
Makes the overlay ignore pointer input. Useful for a display-only panel. |
| Left / Right | left / right |
Positions the iframe from the corresponding side in pixels. |
| Top / Bottom | top / bottom |
Positions the iframe from the corresponding edge in pixels. |
| Width / Height | width / height |
Sets the iframe dimensions in pixels. |
| Layer Order | zIndex |
Controls stacking order; lower values appear underneath higher values. |
For example, an instruction panel can use noBlur=true, left=24, top=24, width=420, and height=260. Test on the display sizes your players use before treating the layout as final.
Close behavior
Use Close Iframe on a task state or a task transition.
- With no target selected, it closes the currently active iframe.
- Choose a specific Iframe URL when only one matching overlay should close.
- Turn on Close All Iframes only when the flow intentionally clears every active overlay.
A reliable dialogue pattern is: Click moves a task to Active → Active opens the iframe → finishing the dialogue moves the task to Completed → Completed closes the iframe.
Send a message from a task
Send Message to Iframes sends a text message to active iframe overlays. You can type ordinary text and use supported replacements in vertical bars:
| Replacement | Inserts |
|---|---|
| ` | username |
| ` | value-label |
| ` | player-value-label |
Leave the vertical bars in place. If a label has no available value, it remains unchanged in the message, which is a useful signal during testing.
Test and troubleshoot
- It does not open: confirm the task reached the state containing the Iframe effect and the URL is valid.
- Players cannot click the overlay: check whether No Mouse Interaction is enabled.
- The panel appears in the wrong place: use one position pair at a time and verify pixel dimensions in the space.
- It will not close: make sure Close Iframe is connected to the task transition you are actually reaching; use Close All Iframes only when that is intentional.
- A replacement is unchanged: confirm the value label matches the label used by the value effect.