You can run custom validation before the stream launches, for example checking a password, verifying a token, or gating access behind a form submission.

Setup

Add data-callback to the launch button with the name of your validation function:

<div class="yom-player-placeholder"
     data-yom-stream-id="1"
     data-game-id="my-game"
     style="width: 100%; aspect-ratio: 16/9;">
</div>

<input type="text" class="yom-name-input" data-yom-stream-id="1" placeholder="Your name">
<input type="password" id="password" placeholder="Enter password">
<button class="yom-launch-button"
        data-yom-stream-id="1"
        data-callback="validatePassword">
  Start Game
</button>

Define the Callback

Your function receives two parameters: onSuccess and onFailure. Call one of them based on your validation result.

function validatePassword(onSuccess, onFailure) {
    const password = document.getElementById('password').value;

    if (password === 'correct-password') {
        onSuccess();   // Stream launches
    } else {
        onFailure();   // Launch is cancelled, button resets
    }
}

The callback is invoked when the player clicks the launch button, before the iframe is created. If the function throws an error, the launch is cancelled and the error is logged.

Use Cases

Password-gated access: Restrict streams to users with a code
Form validation: Require fields to be filled before launch
External auth: Call your own API to verify the user, then call onSuccess() in the response handler
Age verification: Prompt for age confirmation before allowing play

Custom Authentication

Setup

Define the Callback

Use Cases