1 of 5

Integrate your Stream

Great that you have come this far.

Congratulations on deploying your stream. Now, it's time to share it with your fans.

Follow the steps below to integrate your metaverse into your website.

Quick Start

Add the YOM Core script to your HTML: Insert this line inside the <head> tag of your HTML file:

<script src="https://temp-yom-branding.s3.eu-west-1.amazonaws.com/yom-core.js"></script>

Create a target div for your stream: Place this div within the desired location in your webpage and replace data-streamurl with your personalized stream url:

<div id="yomTarget-1" data-streamurl="${STREAM_URL}"></div>

Add User Input and Launch Button somewhere on your page:

<input type="text" id="yomInput-1" placeholder="Your Name">
<button id="yomLaunch-1">Start Experience</button>

That's it! You now have a basic YOM integration. Launch your page to see it in action.

Troubleshooting

If you encounter issues:

Check your browser console for error messages.
Ensure all required scripts are loaded correctly.
Verify that stream URLs are correct and accessible.

For further assistance, contact our team at info@yom.ooo.

Custom Authentication

You can define your own custom functions to validate user input on button click. To achieve this add data-callback="{someFunction}" to the launch button. Then define your custom function in a JS file that accepts two parameters: onSuccess, onFailure.

Example

We have as an example the following HTML elements:

<input type="text" id="yomInput" placeholder="your name" autofocus>
<input type="password" id="password" placeholder="Enter password">
<button type="submit" data-callback="validatePassword" id="yomLaunch-1">start the experience</button>

In the following example function we perform simple front-end validation to match the data-callback="validatePassword"attribute defined in the yomLaunch-1 button:

function validatePassword(onSuccess, onFailure) {
    const passwordInput = document.getElementById('password');
    const enteredPassword = passwordInput.value;
    const hardcodedPassword = 'secure123';  // This is the hardcoded password

    if (enteredPassword === hardcodedPassword) {
        onSuccess();  // Call the success callback if the password is correct
    } else {
        onFailure();  // Call the failure callback if the password is incorrect
    }
}

Event Handling

With YOM you can build custom web widgets that communicate directly with the stream via the postToYOM function:

postToYOM('AdjustSetting', {settingValue: 'newValue'});

This function facilitates sending commands or adjustments to the stream. Do ensure you register events inside of your game project, to bind the events to certain functions.

Example

We assume you have 3 buttons on your webpage (#spawnBot, #removeBot, #clearBot). On click we can trigger content within the stream using the postToYOM function:

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('spawnBot').addEventListener('click', function() {
        postToYOM('SpawnBot', {amount: '1'});
    });

    document.getElementById('removeBot').addEventListener('click', function() {
        postToYOM('RemoveBot', {amount: '1'});
    });

    document.getElementById('clearBot').addEventListener('click', function() {
        postToYOM('ClearBot', {});
    });
});

Listen for Events

Using YOM SDK you can push events from the game to the web browser. From there you can connect your own logic to it.

YOM SDK can automatically push events to the data layer for GTM and GA integration. Configure your GTM to capture these events for detailed interaction tracking.

Multi-Stream Setup

YOM Core supports multiple streams on a single page, enabling rich, interactive webpages that can act as content aggregators.

Create multiple stream containers:

<div id="yomTarget-1" data-streamurl="${STREAM_URL_1}"></div>
<div id="yomTarget-2" data-streamurl="${STREAM_URL_2}"></div>

Add corresponding input fields and launch buttons:

<input type="text" id="yomInput-1" placeholder="Name for Stream 1">
<button id="yomLaunch-1">Start Stream 1</button>

<input type="text" id="yomInput-2" placeholder="Name for Stream 2">
<button id="yomLaunch-2">Start Stream 2</button>

Build widgets for independent streams:

const targetId = '2'; // assuming we want to post to stream 2
postToYOM(targetId, 'AdjustSetting', {settingValue: 'newValue'});

Dynamic Layouts

To dynamically toggle element visibility in response to stream interaction, you can directly utilize the .toggle-on-yom-{targetId}:

<div class="additional-info toggle-on-yom-1">
    Information that should show after a user joins the stream.
</div>

If you want to apply custom css, you can use the data-hook to associate specific UI elements with the stream, allowing for broader layout adjustments when the stream is activated or deactivated:

<div id="yomTarget-1" data-hook="#{somediv}" data-streamurl="${STREAM_URL}"></div>