Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Embedded browser Object events
Difficulty Intermediate

Build an Interactive Browser Kiosk in Banter

BanterBrowser renders a web page on a surface. Its API includes page dimensions, pixel density, mip maps, startup actions, interaction control, scripted actions, and messages sent from browser content.

Browser Kiosk Workflow

Create and position the display surface, add BanterBrowser, then enable interaction and handle browser messages.

  1. Create a plane at the kiosk's viewing position.
  2. Add BanterBrowser with the target URL and page dimensions.
  3. Enable interaction and register browser-message.

Create the Kiosk Surface

const kiosk = new BS.GameObject({
  name: "BrowserKiosk",
  localPosition: new BS.Vector3(0, 1.6, 3),
  localScale: new BS.Vector3(2.4, 1.35, 1)
});

kiosk.AddComponent(
  new BS.BanterPlane({
    width: 1,
    height: 1,
    widthSegments: 1,
    heightSegments: 1
  })
);

The official geometry reference states that BanterPlane faces the negative Z direction. Rotate the kiosk GameObject when the display faces away from the intended viewer.

Add BanterBrowser

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

Use pageWidth and pageHeight for the rendered page dimensions. The component also accepts startup actions through actions.

Enable Page Interaction

kioskBrowser.ToggleInteraction(true);

Pass false when the page should stop accepting interaction:

kioskBrowser.ToggleInteraction(false);

Run a Browser Action

The official example uses a normalized two-dimensional click action:

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

This example sends the action to the centre coordinates used in the official reference.

Receive Messages from the Page

The kiosk GameObject emits browser-message:

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

Inspect event.detail before routing a message into other scene logic.

Keep the Component Reference

Store the component returned by AddComponent() when multiple controls need to enable interaction or run actions:

enableButton.OnClick(() => {
  kioskBrowser.ToggleInteraction(true);
});

disableButton.OnClick(() => {
  kioskBrowser.ToggleInteraction(false);
});

The buttons in this shortened example are existing UIButton elements.

Common Questions

Why does my Banter browser kiosk face away from the viewer?

The official reference states that BanterPlane faces negative Z. Rotate the kiosk GameObject for the final viewing direction.

Why does the Banter browser ignore interaction?

Call ToggleInteraction(true) on the stored BanterBrowser component when the page should accept interaction.

Official References

Related Navigation