JavaScript Embed API

Open standards & APIs

Control embedded Vuframe® 3D models and Smartvus from your own page with JavaScript: hotspots, textures, objects and more.

The JavaScript Embed API lets your web page talk to an embedded Vuframe® viewer. You send commands with the browser's standard postMessage interface: activate hotspots, change textures, show or hide objects, pause the viewer. You do not need a library; use it to build your own configurator or a 3D background with your own UI.

Control the viewer with JavaScript ​

  1. Embed your 3D model or SmartVu® with an iframe and give the iframe an id.
  2. Get the window of the iframe: const vf = document.getElementById('vuframe').contentWindow;.
  3. Send a command, for example vf.postMessage({ method: 'vf.activate_trigger', id: 'door' }, 'https://embed.vuframe.com');.
  4. See the full list of methods (vf.activate_trigger, vf.set_texture, vf.show_object, vf.hide_object, vf.pause, vf.unpause, vf.ui.list_triggers …) in the Embed API reference.

Good to know: The API works with every framework (React, Vue, plain HTML). Working examples are on GitHub: 3D background and configurator. See also Embed with custom HTML.