WebFrame Connection

Introduction

Integrating the Web Frame into your website is a powerful way to seamlessly embed gaming content from BETCORE suite of products. This article explores the methods available for connection, detailing how you can integrate the Frame to deliver an immersive user experience.

In general, there are two primary approaches for integrating the Frame into your website:

Embedding the frame.js on the Partner's Site

Embedding the Frame using a JavaScript loader script. This approach dynamically inserts the Frame onto your page, manages communication between domains through PostMessage, and adapts its layout – such as height and scroll behavior – seamlessly to match the design of your site.

Direct URL Linking to the Product Page

Direct URL linking, where you construct a URL that includes the necessary query parameters and hash fragments to load the desired product screen. This option provides a simpler, more static way to integrate the Frame, allowing you to control the displayed content by modifying the URL directly.

Both methods are designed to ensure a smooth and consistent user experience, whether you require a dynamic, script-driven integration or a straightforward link-based implementation.

Note that the recommended approach may vary depending on the product chosen.

Please see below the details on:

TVBET, BetOnGames, ElCasino Integration

You also have the option to enable Demo Mode for testing product features without involving monetary transactions.

For additional details or if you have any questions, please contact your Account manager.

Demo Mode

BETCORE provides the ability to embed a demo frame on your Partner site. This feature enables players to test the product capabilities in a risk-free environment.

For demo access, please contact your Account manager.

To launch the demo mode:

Choose the proper product URL.

Pass the parameters listed below to the query.

Parameter	Description
lng	Language code.
clientId	Partner’s client identifier.
category	Game category. For BetOnGames, ElCasino and LiveGames (TvBet).
token	Client token.

For example:

TVBET

BetOnGames

ElCasino

URL: https://tvbetframe.com
Demo: https://tvbetframe.com/?lng=en&clientId=5730&token=TvBet-DemoSite-User-BET#/

TVBET, BetOnGames, ElCasino Integration

Embedding frame.js (preferred)

This is the primary and preferred approach.

Theframe.jsscript serves as a loader to inject the Frame directly into your web page. It runs on the parent page and dynamically inserts the Frame with the necessary attributes. The aim is a seamless integration – without introducing scrollbars, additional iframes, or distracting elements.

Script: https://tvbetframe.com/assets/frame.js

ThePostMessagemethod is used to facilitate data exchange between domains by:

Sending the frame’s height (frame_height).

Receiving the current scroll position of the Partner page (frame_scroll_position).

If your website design does not allow integrattion of a full-height Frame, you should include thescrollContainerparameter in the loader script to indicate the scrollable element.

Sample code for integration using the loader

<script type="text/javascript" src="https://tvbetframe.com/assets/frame.js"></script>
<script>
  (function () {
      TvbetFrame({
          'lng'        : 'en',
          'clientId'   : '5730',
          'token'      : 'TvBet-DemoSite-User-BET',
          'server'     : 'https://tvbetframe.com',
          'floatTop'   : '#fTop',
          'containerId': 'tvbet-game',
          'page'       : 'lobby'
      });
  })();
</script>

Parameter	Description	Required
clientId	Partner's client identifier.	Yes
token	API user refresh token. If omitted, the Frame opens with an unauthorized user.	Yes
server	Server URL provided by your Account manager.	Yes
lng	Language code for setting the interface language. Default: en	Yes
singleGame	Opens the Frame for a specific game by ID. Hides the lobby, results, bet history, and rules for other games. The game must match a certain category, otherwise an error will be returned. Takes precedence over game_id.	No
containerId	ID of the container element where the frame will be embedded. Default: tvbet-game	No
game_id	Opens a specific game by its ID. The game must match a certain category, otherwise an error will be returned.	No
category	Opens a specific category of games in the Lobby. Possible values: LiveGames (TvBet), ElCasino, or BetOnGames.	No
page	The initial page to go to when launching. Possible values: lobby, results, betHistory, howToPlay, tournaments, promocodes. Note: When specifying tournaments or promocodes, make sure they are activated in the Backoffice on your client.	No
floatTop	CSS selector for a fixed or floating top block. Can be used if your site employs a floating menu.	No
exitUrl	Home page URL to exit the game. Overrides Backoffice settings.	No
tagId	Frame identification tag. If set, it will be passed in requests to the Partner API. See more on Tags.	No
scrollContainer	CSS selector of the element with overflow: scroll. If overflow: scroll is used on any element above the Frame, set it to that element's CSS selector. Otherwise, set it to false.	No

Direct Linking

If for some reason the Frame loader code is not suitable for your page, you can connect the Frame via a link and specify all the necessary frame event handlers/listeners via JavaScript.

Please see the details on Frame events.

Required URL Parameters

To successfully embed a frame via a direct link, it is important to enable the parameters listed below.

Parameter	Description	Required
clientId	Partner's client identifier.	Yes
token	API user refresh token. If omitted, the Frame opens with an unauthorized user.	Yes
lng	Language code for setting the interface language. Default: en	Yes
category	Opens a specific category of games in the Lobby. Possible values: LiveGames, ElCasino, or BetOnGames.	Yes
singleGame	Opens the Frame for a specific game by ID. Hides the lobby, results, bet history, and rules for other games. The game must match a certain category, otherwise an error will be returned. Takes precedence over game_id.	No
exitUrl	Home page URL to exit the game. Overrides Backoffice settings.	No
tagId	Frame identification tag. If set, it will be passed in requests to the Partner API. See more on Tags.	No

The hash fragment in the URL indicates the target page.

Hash Fragment	Description
game/game_id	Points to a specific game identified by its ID. Replace game_id with the actual game ID. The ID provided must match the selected category.
lobby	Directs to the Lobby page.
results	Directs to the Results page.
betHistory	Directs to the Bet History page.
howToPlay	Directs to the How to Play page.
tournaments	Opens the Tournaments page. Ensure the Tournaments are enabled in your client's Backoffice.
promocodes	Opens the Promo codes page. Ensure the Promo codes are enabled in your client's Backoffice.

Domain names (server URLs) are provided by your Account manager.

Examples

Specific game in LiveGames category

https://tvbetframe.com/?lng=en&clientId=5730&category=LiveGames&token=TvBet-DemoSite-User-BET#/game/23

Promocodes page for BetOnGames

https://frame.bet-on-games.com/?lng=en&category=BetOnGames&clientId=7990&token=DemoSite-User-BET#/promocodes

Lobby for ElCasino

https://frame.elcasinoplay.com/?lng=en&Category=ElCasino&clientId=6299&token=EC-DemoSite-User-BET#/lobby

Frame events

The integrated frame.js supports several custom events to enhance user experience.

Event	Description
tvbet_height	Dynamically adjusts the Frame’s height based on its content. Provides the ability to expand or contract the Frame preventing from appearing the unnecessary scroll bars.
tvbet_scrolling	Enables or disables scrolling inside the Frame, depending on content overflow. This is useful in situations where the content inside the Frame exceeds the visible area.
tvbet_scrollto	Provides smooth scrolling to specific positions within the Frame's content. Improves the user experience by automatically scrolling to relevant sections or points of interest.
tvbet_exit_url	Redirects users to the Partner’s homepage when exiting the Frame.
tvbet_max_height	Sets a maximum frame height, ensuring that it does not exceed the specified size.
tvbet_vh	Important for dynamically adjusting the user interface when the user resizes the browser window.
tvbet_orientation	Activated when the orientation changes, requiring the frame to recalculate and adjust the sizes and positions of elements within it.
tvbet_scroll_position	Keeps the content updated within the frame when the user scrolls the content.

While frame.js includes all necessary handlers, you can add custom listeners to further control the Frame’s behavior.

Example

The example shows how to add additional event listeners to improve control over the behavior and appearance of a frame on your web page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<iframe
style="width: 1px; min-width: 100%"
src="https://tvbetframe.com?lng=en&clientId=5730&token=TvBet-DemoSite-User-BET"
frameborder="0"
scrolling="no"
allowfullscreen=""
allow="autoplay"
id="tvbet-iframe"
></iframe>
<script>
const iframe = document.getElementById('tvbet-iframe');

// Object containing handlers for each type of event data
const eventHandlers = {
    // Handler for adjusting the height of the iframe
    tvbet_height: (data, iframe) => {
        const height = parseInt(data.tvbet_height, 10);
        iframe.style.height = `${height}px`;
    },
    // Handler for setting the scrolling attribute of the iframe
    tvbet_scrolling: (data, iframe) => {
        iframe.setAttribute('scrolling', data.tvbet_scrolling);
    },
    // Handler for scrolling the window to a specific position relative to the iframe
    tvbet_scrollto: (data, iframe) => {
        const startingTop = window.pageYOffset;
        console.log(document.body.scrollHeight - data.tvbet_scrollto < window.innerHeight);
        let targetTop =
            document.body.scrollHeight - data.tvbet_scrollto < window.innerHeight
                ? document.body.scrollHeight - window.innerHeight
                : data.tvbet_scrollto;

        targetTop += iframe.getBoundingClientRect().top + window.pageYOffset;
        if (targetTop - startingTop) {
            window.scrollTo({ top: targetTop, behavior: 'smooth' });
        }
    },
    // Handler for redirecting the window to a specified URL
    tvbet_exit_url: (data) => {
        window.location.href = data.tvbet_exit_url;
    },
    // Handler for setting the max height of the iframe
    tvbet_max_height: (data, iframe) => {
        iframe.style.maxHeight = data.tvbet_max_height;
    },
};

// Function to extract event data from a JSON string
const getEventData = (value) => {
    try {
        return value ? JSON.parse(value) : false;
    } catch (e) {
        return false;
    }
};

// Function to listen for messages from the iframe
const listenMessage = (event) => {
    const data = getEventData(event.data);
    if (!data) return;

    for (const key in data) {
        if (key in eventHandlers) {
            eventHandlers[key](data, iframe);
        }
    }
};

window.addEventListener('message', listenMessage, false);

// Function to get the window's height
const getVh = () => {
    let vh = 0;

    if (window.parent === window) {
        vh = window.innerHeight;
    } else {
        try {
            vh = window.parent.window.innerHeight;
        } catch (e) {
            vh = window.screen.height;
        }
    }

    return vh
};
// Function to get the device orientation
const getOrientation = () =>
    window.matchMedia('(orientation: portrait)').matches ? 1 : 2;
// Function to get the scroll position
const getScrollPosition = () => iframe?.getBoundingClientRect().top * -1;

// Function to send message to the iframe
const sendMessage = (data) => {
    if (
        typeof iframe === 'undefined' ||
        typeof iframe.contentWindow === 'undefined' ||
        iframe.contentWindow === null
    ) {
        return;
    }

    iframe.contentWindow.postMessage(JSON.stringify(data), '*');
};

window.addEventListener(
    'resize',
    () => sendMessage({ tvbet_vh: getVh(), tvbet_orientation: getOrientation() }),
    false
);
window.addEventListener(
    'orientationchange',
    () => sendMessage({ tvbet_vh: getVh(), tvbet_orientation: getOrientation() }),
    false
);

document.addEventListener('scroll', () =>
    sendMessage({ tvbet_scroll_position: getScrollPosition() })
);

iframe.addEventListener(
    'load',
    () => sendMessage({ tvbet_vh: getVh(), tvbet_orientation: getOrientation() }),
    false
);
</script>
</body>
</html>

Introduction#

Demo Mode#

TVBET, BetOnGames, ElCasino Integration#

Embedding frame.js (preferred)#

Direct Linking#

Frame events#

Introduction

Demo Mode

TVBET, BetOnGames, ElCasino Integration

Embedding frame.js (preferred)

Direct Linking

Frame events