Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Web browsers Browser messages
Difficulty Advanced

Build Interactive 2D Browsers in Banter

BanterBrowser renders a web page on a surface inside a Banter space. The component can enable interaction, run browser actions, and exchange messages with the loaded page.

Browser Surface Workflow

Create the browser GameObject, add BanterBrowser with a URL and page dimensions, then enable interaction or run only the actions the experience needs.

  1. Create and position the browser surface.
  2. Add BanterBrowser with the page URL, size, and pixel density.
  3. Connect browser actions and message listeners after the component is ready.

Create a Browser Surface

const browserObject = new BS.GameObject({
  name: "InfoBrowser",
  localPosition: new BS.Vector3(0, 1.4, 2)
});

const browserComponent = browserObject.AddComponent(
  new BS.BanterBrowser({
    url: "https://example.com",
    mipMaps: 4,
    pixelsPerUnit: 1200,
    pageWidth: 1280,
    pageHeight: 720,
    actions: ""
  })
);

The page width and height describe the browser viewport. The GameObject Transform controls its location and orientation in the Banter space.

Enable or Disable Interaction

browserComponent.ToggleInteraction(true);

Disable interaction when the page is intended only as a display. Enable it when players need to click or operate the rendered page.

Browser Actions

Banter's official browser documentation lists actions for:

  • delaying the next action
  • clicking at browser viewport coordinates
  • clicking from a 3D world point
  • sending a keypress
  • scrolling
  • running JavaScript in the page
  • navigating backward and forward
  • posting a message to the page

The current JavaScript SDK exposes RunActions():

browserComponent.RunActions(
  "click2d,0.5,0.5"
);

The advanced browser documentation describes a fixed action structure with an action type plus numeric and string parameters. Match the parameter positions documented for the action being used.

Run Actions after Page Load

The official advanced browser page also documents afterLoadActions for work that should run after the browser loads. The current BanterBrowser constructor exposes an actions field.

Use automatic actions only for repeatable page behaviour that you control and can test reliably. A page layout change can invalidate coordinate-based clicks.

Send a Message into the Browser

The official action name for sending a message is postmessage:

browserComponent.RunActions(
  "postmessage,Hello from the space"
);

Inside the loaded web page, listen for Banter messages:

window.addEventListener("bantermessage", (event) => {
  console.log(event.detail.message);
});

Send a Message Back to the Space

The official browser page uses:

window.bantermessage(
  "Hello from the webpage"
);

On the Banter GameObject, listen for the browser message:

browserObject.On("browser-message", (event) => {
  console.log(event.detail);
});

The official documentation distinguishes space browsers from the browser in the user's menu. It states that space browsers can communicate with the space but not directly with one another.

Open and Message the Menu Browser

BanterScene exposes:

scene.OpenPage("https://example.com");
scene.SendBrowserMessage("hello from space");
scene.DeepLink("https://example.com", "welcome");

Use these scene methods for the user's menu browser rather than a browser component placed on a GameObject.

Common Questions

Why does my automated browser click hit the wrong control?

Check the browser viewport dimensions and the coordinate parameters. Coordinate automation can also break when the loaded page changes its layout.

Why does the webpage not receive my Banter message?

Register the page's bantermessage listener and verify that the browser action uses the documented postmessage action.

Official References

Related Navigation