Viewer API

Realize 3D expression on your website

Viewer API installation

Installation using the Viewer API is based on the API's support for full screen, AR/VR compatible browser determination, Furthermore, it automatically handles the appropriate loading using Intersection Observer API. Therefore, it is a very easy installation method.
You can also operate XR content externally via the API.

NOTE: Appropriate loading means that if the 3D content of XR Studio is not included in the first view, it will not be loaded unnecessarily, and it will be judged after the scrolled 3D content is visualized. I will. So no wasted traffic.

  1. On your computer, move to the XR Studio 3D Unit you want to embed.
  2. From the HTML code displayed in [Installation Web Viewer API], copy the script tag to be placed in and the div tag to be placed anywhere in .
  3. Paste the .xrstudio tag where you want to display the XR content in the HTML of your blog or website.
  4. If you want to set a link to transition to AR or VR, insert .xrs_ar or .xrs_vr in the A tag class.
    This class automatically determines the XR/VR compatible environment and displays or hides the link.
    (In the future, we plan to auto-insert the appropriate links for the href attribute of A tags that have these classes. Currently, please enter them manually.)
  5. When operating XR contents from the outside, send window.postMessage() to xrsApi[].
    For details, here

API installation example:

<head>
    <!-- Load API file in head tag -->
    <script src="https://web-xr.studio/jp/api"></script>
</head>
<body>
    <!-- Place the following tags in the position where you want to display the XR content in the body tag -->
    <div class="xrstudio" data-id="[your xrID]"></div>
    <!-- Set a VR link at any position in the body tag -->
    <a class="xrs_vr" href="https://web-xr.studio/jp/vr/[your xrID]">Link to VR</a>
    <!-- Set a VR link at any position in the body tag -->
    <a class="xrs_ar" href="https://web-xr.studio/jp/ar/[your xrID]">Link to AR</a>
</body>

Check the domains referenced by the system

Usually, the domain of the URL displayed in the URL window of the browser is the domain that you can grasp, In the case of WiX or GoogleSite, is there a redirect internally? It seems that there is a difference between the visible domain and the visible domain.
Apparently, the domain that was provisionally distributed as a sub-domain might be that kind of thing.
Wix-like services may require equivalent support. (Even with such services, there may be no problem if you use your own domain) Follow the procedure below to check the domain referenced by the system.

  1. Add an element from WiX Edit>Add>Embed>Custom>HTML iFrame.
  2. Click the [Enter code] of the element and select [Code] from the radio button to insert the edited -Code 3-.
  3. Check the URL output in the iFrame pasted on the preview and public page.
<!-- Verify domain -->
<iframe src="https://web-xr.studio/api/mydomain"></iframe>

Verify domain

You can find the domain by writing the following code in

Wix Element and opening it on the production site.
Please delete after confirmation.