Code & Custom UI
←back to documentation

Code & Custom UI

Use Function Effects, JavaScript, and custom interfaces when no-code tools are not enough.

displayHtml

displayHtml() replaces the in-game HTML overlay with the markup you provide. It is useful for a short notice, a simple HUD label, or a static branded panel that is controlled by a task.

displayHtml('<div>Welcome to the gallery</div>');

What it is for

Use displayHtml() when the content is simple and static:

  • A title card after a task completes.
  • A short message or status label.
  • A lightweight visual overlay with HTML and CSS.

It is re-rendered whenever you call it again. Use a named task to decide when the overlay appears or disappears.

A simple welcome panel

displayHtml(
  '<div style="position:fixed;inset:0;display:grid;place-items:center;' +
  'font:700 28px sans-serif;color:white;background:rgba(0,0,0,.55)">' +
  'Welcome to the gallery' +
  '</div>'
);

Put this JavaScript Function on a task such as ShowWelcome. Use another task to clear it when the player continues.

A small status label

displayHtml(
  '<div style="position:fixed;top:20px;left:20px;padding:10px 14px;' +
  'border-radius:8px;background:rgba(0,0,0,.65);color:white;' +
  'font:600 16px sans-serif">Collect all three stars</div>'
);

Replace or clear the overlay

Calling displayHtml() again replaces the previous markup:

displayHtml('<div style="color:white">New message</div>');

Pass an empty string to clear it:

displayHtml('');

Important limits

Treat displayHtml() as static HTML and CSS in an in-game overlay.

  • Do not rely on script tags inserted in the markup to execute.
  • Do not rely on inline event handlers, window APIs, fetch(), requestAnimationFrame(), or AudioContext.
  • Do not use it for forms, browser navigation, mini-games, or a custom interactive menu.
  • Do not place private data or secrets in the HTML string.

If the content needs clicks, JavaScript in its own page, network access, or two-way communication with Portals, host it as an iframe instead.

A reliable pattern

  1. Create a task such as ShowWelcome.
  2. Put the displayHtml() call on the task’s active behavior.
  3. Create a separate task such as HideWelcome that calls displayHtml('').
  4. Trigger those named tasks from the player action or condition that owns the flow.

This makes the overlay visible in your task graph instead of burying UI state in a large script.