Skip to main content
START NOW (FREE)

Viewer API

Viewer Behaviours & Configurator API

This feature allows for interaction with the viewer and its features using JavaScript.

  1. The API sends and receives events using messages.
  2. To use the API, first create a configurator in your scene.
  3. Next, embed the BRIO scene's viewer link in an HTML document.
  4. 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

Related articles