Customize the 3D Viewer to build brand consistance experiences and configurators
This guide will help you to adapt individual changes to the VRxs 3D viewer. Our Javascript based API will enable you to change buttons, icons, backgrounds and even more. All functions are documented here, but should you have any questions, always feel free to reach out to support@augmenteers.com.
Before you start
Please make sure that your plan allows you to use the API. You can find this information in your account settings. If the API is not available to you, please contact support@augmenteers.com.
Quick Start
To get started, you need to do the following:
- Embed our iframe as usual and add the following query parameters to the source URL:
- viewer_api=true, enables the API
- controls=false (optional), hides the controls
- btn_start=false (optional), hides the start button
- Add a unique id to the iframe element, so that you can get a reference by using document.getElementById().contentWindow.
- Call a function by sending a specific message with the postMessage-API from your page to the iframe.
To see how this could look like, take a look at our Example. You can find all information about the available functions and their parameters here. Just navigate through the documentation on the left.
Example
<div class="augmenteers-embed-wrapper">
<iframe id="augmenteersIframe"
src="https://viewer.augmenteers.com/embedded-model/b5ee0af5ec2cd3a3d19a373d03b19d0a?controls=false&btn_start=false&viewer_api=true"
frameborder="0" allow="fullscreen" mozallowfullscreen="true" webkitallowfullscreen="true">
</iframe>
</div>
<script type="text/javascript">
const iframe = document.getElementById("augmenteersIframe").contentWindow;
function startViewer() {
iframe.postMessage({action: "startViewer"}, "*");
}
</script>
<button onclick="startViewer()">
Start Viewer
</button>