API Example

API requests as like Interior preview
Room A
Room B
Bird's-eye view
Note

A style that switches between rooms and bird's-eye views when using XR content for viewing real estate and facilities.
Also, the fact that the Viewer itself is not over-decorated and has a very simple shape is intended to allow the creator in charge of the parent page to freely decorate the XR content.
The feature of Web-XR Studio is the freedom to reflect the creator's intentions, not the conventional package.

Example Code

<head>
    <script src="https://web-xr.studio/jp/api"></script>
</head>
<body>
    <!-- XR content -->
    <div class="xrstudio" data-id="{xrID}" data-option="noConfig, onlyPageFull"></div>
    <!-- Panel part: "xrs-wide" class is attached "xrs-wide--on" modifier, when this page become pageFull. -->
    <ul class="panel__wrapper xrs-wide">
        <li id="panel_1" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_2" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_3" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_4" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_5" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_6" class="panel xrs-wide"><img src="xxx..jpg"></li>
    </ul>
    <!-- Message part -->
    <div id="msg"></div>
</body>
<script>
    let i;
    const $msg = document.getElementById('msg');
    const panels = [0];
    const msg = [
        'Click on the above panels.',
        'Room A',
        'Room B',
        "Bird's-eye view",
        'Living B',
        'Corridor C',
        "Bird's-eye view"
    ];
    $msg.textContent = msg[0];
    for (i = 1; i <= 6; i++) {
        panels.push(document.getElementById('panel_' + i));
        panels[i].addEventListener('click', (e) => {
            const _id = e.target.id.replace('panel_', '');

            $msg.textContent = msg[_id];
            xrsApi[0].postMessage({act: 'case', id: _id}, '*');
        });
    }
</script>

<style>
    // "xrs-wide" class is attached "xrs-wide--on" modifier, when this page become pageFull.
    // Also note that the description is such that the dots are connected because it is in the same hierarchy as "ai-msg".
    //
    // xrs-wide -> xrs-wide--on : All adapted when the page is full
    // xrs-wide-# -> xrs-wide-#--on : When multiple XR contents are installed, change # to a number and handle them individually.
    .panel__wrapper.xrs-wide--on {
        position: fixed;
        bottom: 5%;
        left: 25%;
        width: 50%;
        z-index: 10000;
        height: 270px!important;
    }

    .panel.xrs-wide--on {
        width: 48%;
        border: 1px solid;
        border-radius: 5px;
        margin: 2px 1%;
        height: 130px;
    }
</style>