Development and Utilization Methods for Inline View Components that Transmit Dynamic Data to External Web Pages

BELIVVR

Published in

BELIVVR(EN)

5 min readAug 18, 2024

1. Purpose and Overview of the Document

XRCLOUD, a web-based metaverse, provides features that allow connections to various external web services or pages. The components available in the Spoke web metaverse editor include the link component and the Image component, with the Image component being used to create buttons with images.
However, since a Room is an instantiated space based on a Scene (space project) created with Spoke, you cannot dynamically change the link in a link component or transmit data to the linked external website within the Room.
To address this, XRCLOUD by BELIVVR has created an Inline View component that allows data to be transmitted when users access a Room, and this data is then passed on to the web page connected to the Room. This enables developers using XRCLOUD to transmit data to the web page connected to the Room, allowing for different routing or customized information to be provided to users based on their individual profiles.

2. Data Transmission and Usage Methods of the Inline View

1) Preparation

Place the Inline View component in the Scene.
The Inline View component includes most of the features of the Image component. The key difference is that it allows you to target a specific frame within the hub, created separately as an iframe, for the destination page. Four types of iframes and routing options are provided:
Main: This area displays the 3D space.
Side View: This area displays chat and participants, and is mainly suitable for mobile-style content.
Self Window: The entire page is routed.
New Window: The page is routed in a new tab

2) Invocation

When invoking, use the getRoom API to retrieve the Room’s URL:
https://api.xrcloud.app/api/rooms/{roomId}
The data to be passed is included in the linkPayload as a query parameter:
https://api.xrcloud.app/api/rooms/{roomId}?linkPayload={Data}
Use the private URL from the returned URLs to prevent the expiration of the linkPayload over time and ensure its security.

{
  "id": "f24ee5ba-8f1f-4f7a-86ed-738f95ea1f8b",
  "name": "example room name",
  "size": 10,
  "tags": [],
  "sceneId": "c322b49b-6e12-47d9-b293-b5ab3727459c",
  "createdAt": "2023-07-12T09:27:41.600Z",
  "updatedAt": "2023-07-12T09:27:41.600Z",
  "returnUrl": "<https://www.google.com/>",
  "roomUrl": {
    "public": {
      "host": "<https://room.xrcloud.app:4000/7UizZDL/example-room-name?public=35e75895-9db7-4eee-bae3-87e20ee156dc>",
      "guest": "<https://room.xrcloud.app:4000/7UizZDL/example-room-name?public=a0166051-1eee-44bb-922a-c988d517a0e1>"
    },
    "private": {
      "host": "<https://room.xrcloud.app:4000/7UizZDL/example-room-name?private=fdc306b9-5129-4d83-86d5-52836afeee7e>",
      "guest": "<https://room.xrcloud.app:4000/7UizZDL/example-room-name?private=72dde871-33d7-4aa3-a8a9-73b8b5f0458d>"
    }
  },
  "thumbnailUrl": "<https://api.xrcloud.app/files/852a6f47-3978-4201-a637-9699d7845266.jpg>"
}

3) User Interaction

When a user accesses the Room via the private URL, clicking on the Inline View will navigate to the pre-configured destination URL, with the data passed through linkPayload added as a query parameter named hubsParam.
The InlineViewName will pass the name of the clicked Inline View component, enabling identification of which component the user interacted with to access the page.

3. Use Cases

1) Providing Customized Information for Each User

You can provide customized information by including user identification data in the linkPayload.

When selecting the Inline View component placed on a laptop in the space, the student’s academic system is displayed in the Side View. CNU Metaversity example

2) Providing and Automatically Routing Users to Different Pages

You can offer users the option to navigate to different spaces based on their choices.

A list of classrooms available for entry is displayed in the Side View. Meta Track example

In this case, the Inline View frame uses the Self Window option.
While navigating within XRCLOUD Rooms via links allows for smooth transitions with a fade-out effect, this is not yet supported when navigating with Inline View, leading to a full-page redirection.
Developers (platform owners) can also set up automatic routing instead of providing a user choice.

3) Transmitting Common Data to Content Providers

You can provide common parameters to CPs (Content Providers) who edit and provide spaces, allowing for the transmission of necessary common data across different content.
For instance, on our platform, we aim to maintain user consistency by receiving the platform’s avatar and display name from external content.
Therefore, we established a common platform protocol to transmit the avatar and name via linkPayload and distributed this standard.

Diagram of the platform structure, which transmits avatar and name via XRCLOUD Inline View to CPs

Create Scene

The service admin creates spaces for each CP using XRCLOUD’s Scene Create API.

1–1. CPs can freely use Inline View within the Spoke editor to connect various external content to their Room, including Unity WebGL content.

1–2~4. Once the Scene is deployed on the service platform, a Room is automatically created via the Create Room API, establishing a one-to-one structure.

GetRoom API

The service page used by the user requests a Private URL to access the Room, sending the user’s avatar and name information in the Payload.

3~4. Return Private room URL & Open Room URL

The platform receives the Private URL that the user can access. When this URL is displayed on the screen, the user can click on it to enter the Room.

5. Open Page and Send Payload

When a user clicks on an Inline View component within the Room, the component sends the Payload information and the InlineView name as query parameters to the outlink service page configured during Scene creation.
The CP parses these parameters to handle the avatar and name accordingly.

Example of notification sent to Meta Track Contents providers

The required parameters are passed within hubsParam. In Meta Track, the parameters include class id, user id (uuid), user name, avatar URL, and a token that allows login processing on Meta Track separated by |.
inlineViewName represents the name of the Inline View component defined in Spoke.
Parameters must be accessed through a temporary (private) URL generated when entering a class. Since this is a temporary URL, do not use it as a static URL as it may become inaccessible later. Note: The admin does not have information such as class details or avatar information to send, so the fixed public URL is used instead.