Viewer Behaviours & Configurator API
This feature allows for interaction with the viewer and its features using JavaScript.
- The API sends and receives events using messages.
- To use the API, first create a configurator in your scene.
- Next, embed the BRIO scene's viewer link in an HTML document.
- Use the following script to get and set configurator values:
<html>
<body>
<div id="button-container">
<h3>Materials</h3>
</div>
<iframe
id="brio-embed"
src="https://view.briovr.com/6f3cd8ae-5495-4006-adbd-1fd6d4334e37" width="600"
height="400" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking"
sandbox="allow-popups allow-same-origin allow-scripts allow-top-navigation"
mozallowfullscreen="true" webkitallowfullscreen="true" onload="loaded()" />
</body>
<script>
function loaded() {
const buttonsContainer = document.getElementById("button-container")
const embed = getEmbed()
// initialize the viewer API and get configurator items
window.addEventListener('message', (ev) => {
console.log('ev', ev)
const data = JSON.parse(ev.data)
if (ev.data && data.command === "MESSAGE") {
if (data.uri === 'brio/v1/engines/embed') {
getConfiguratorData()
} else if (data.uri === 'brio/v1/engines/configurator') {
handleMaterialConfiguratorItems(data.payload)
}
}
})
function getEmbed() {
const iframe = document.getElementById('brio-embed');
return iframe.contentWindow;
}
function getConfiguratorData() {
embed.postMessage(JSON.stringify({
command: "GET",
uri: 'brio/v1/engines/configurator',
}), '*')
}
// parse the recieved configurator items
function handleMaterialConfiguratorItems(configuratorData) {
if (!configuratorData.configurators) {
return
}
const materialItems = configuratorData.configurators.materialItems[0] || configuratorData.configurators.materialItems
console.log("materialItems", materialItems)
materialItems.items.forEach(materialConfiguration => {
const material = materialConfiguration
const button = document.createElement('button')
button.innerText = material.name
button.onclick = (e) => {
setConfiguratorItem({
type: 'materials',
key: materialItems.key,
uuid: material.uuid,
color: '#0000ff'
})
}
buttonsContainer.appendChild(button)
});
}
// sets the selected configurator item
function setConfiguratorItem(payload) {
console.log('setting', payload)
embed.postMessage(JSON.stringify({
command: "SET",
uri: 'brio/v1/engines/configurator',
payload
}), '*')
}
}
</script>
</html>
Viewer URL Signing
This feature allows for the signing and verification of viewer URLs.
If you need URL signing please contact support for api_key
and api_secret
keys.
To sign a viewer url, make the following request which will return a token.
GET https://briovr.com/api/v1/viewer/sign-url?key=&secret=&expiry=&url=
key: api_key
secret: api_secret
expiry: seconds since epoch
url: the viewer url