Qu'est-ce qu'iFrame lobby et comment l'intégrer
Qu'est-ce que iFrame lobby
iFrame lobby est un module de lobby intégré (catalogue de jeux, bannières, catégories, recherche, démarrage rapide) qui est hébergé par le fournisseur de contenu/agrégateur et s'affiche à l'intérieur de la page de l'opérateur via '
L'idée clé est que l'opérateur n'écrit pas le lobby à partir de zéro, mais qu'il connecte le tout prêt, obtenant un time-to-market rapide, un support de navigateur croisé et des mises à jour sans version de son côté.
Le cas échéant
Démarrage rapide du nouveau fournisseur/vertical.
Besoin d'une vitrine unifiée pour plusieurs pays/marques.
L'opérateur a une commande frontale limitée.
Avantages et inconvénients
Avantages : vitesse, base de code unique, chargement automatique des nouveautés, analyse cohérente du fournisseur.
Inconvénients : moins de contrôle sur le pixel perfect, dépendance à l'aptyme du vendeur, finesse du tracking, contraintes SEO (le contenu de l'iframe n'est pas indexé dans le cadre de votre DOM).
Architecture de base
1. Front (opérateur) : page '/casino 'avec les slots dans lesquels'
2. Espacement auth : le court-circuiteur 'sessionToken' (JWT/opaque) est généré sur le backend de l'opérateur.
3. Provider lobby : valide le token, substitue la langue/monnaie/limites, rend les jeux et bannières.
4. Bus de messagerie : 'window. postMessage 'entre la page et l'iframe pour les événements (équilibre, début du jeu, ouverture de la caisse, etc.).
5. Cashier/KYC/RG : sont appelés du côté de l'opérateur (hors iframe), mais sont accessibles depuis le hall par les commandes.
Exigences minimales de mise en œuvre
Autorisation : short-lived tokens (1-15 min) + rotation transparente (silent refresh).
Sécurité : CSP, 'sandbox' et exact 'allow' pour iframe, filtrage strict 'postMessage'.
Stabilité : contrat d'événement (version, backward-compat), graceful-fallback en cas d'erreur.
UX : grille adaptative, navigation rapide, pré-chargement des cartes, écrans skeleton.
Analyse : événements unifiés (impression, click, launch, error), mapping en Amplitude/GA4.
Exemple d'intégration (HTML + sécurité)
html
<iframe id="providerLobby"
src="https://lobby. example. com/embed? brand=ACME&lang=ru¤cy=EUR&token={{SESSION_TOKEN}}"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
allow="fullscreen; autoplay; encrypted-media; clipboard-read; clipboard-write"
style="width:100%;height:100vh; border:0; display:block; ">
</iframe>
Explications :
- 'sandbox' : activez uniquement les drapeaux souhaités. Ne laissez pas allow-top-navigation sans besoin.
- 'allow' - ajoutez des fiches consciemment ; 'payment' seulement si vous utilisez réellement.
- 'referrerpolicy' : limite les fuites de paramètres.
Content-Security-Policy:
default-src 'self';
frame-src https://lobby. example. com;
script-src 'self' https://lobby. example. com 'unsafe-inline';
img-src 'self' https://lobby. example. com data:;
connect-src 'self' https://api. example. com https://lobby. example. com;
X-Frame-Options pour vos pages ne vous empêche pas d'intégrer vous → le fournisseur est intégré à vous, pas l'inverse.
Génération de token sur le backend (exemple Node/Express)
js import jwt from "jsonwebtoken";
import express from "express";
const app = express();
app. get("/lobby-token", (req, res) => {
const payload = {
sub: req. user. id, brand: "ACME", currency: "EUR", lang: "ru", ts: Date. now()
};
const token = jwt. sign(payload, process. env. LOBBY_JWT_SECRET, {
algorithm: "HS256", expiresIn: "10m", issuer: "acme-casino", audience: "lobby-provider"
});
res. json({ token });
});
Meilleures pratiques : TTL court, audit des champs, clés dans HSM/Secrets Manager, rotation 'kid'.
Messagerie : contrat d'événements
Utilisez 'postMessage' avec la source whitelisting et la validation du schéma.
js
//Hôte (opérateur)
const iframe = document. getElementById("providerLobby"). contentWindow;
const LOBBY_ORIGIN = "https://lobby. example. com";
window. addEventListener("message", (e) => {
if (e. origin!== LOBBY_ORIGIN) return;
const { type, payload } = e. data {};
switch (type) {
case "lobby:ready":
//envoyons les données de démarrage de l'iframe. postMessage({ type: "host:context", payload: {
balance: 125. 40, kycStatus: "verified", limits: { betMax: 100 }
}}, LOBBY_ORIGIN);
break;
case "lobby:resize":
document. getElementById("providerLobby"). style. height = payload. height + "px";
break;
case "lobby:openCashier":
openCashier () ;//votre fonction break ;
case "lobby:launchGame":
launchGame(payload. gameId) ;//peut ouvrir une nouvelle fenêtre/root break ;
case "lobby:requestTokenRefresh":
refreshLobbyToken(). then(t =>
iframe. postMessage({ type: "host:newToken", payload: { token: t } }, LOBBY_ORIGIN)
);
break;
}
});
Événements standard (exemple de jeu) :
- От лобби → хосту: `lobby:ready`, `lobby:resize`, `lobby:openCashier`, `lobby:openRG`, `lobby:launchGame`, `lobby:track`, `lobby:requestTokenRefresh`, `lobby:error`.
- De l'hôte → lobby : 'host : context' (équilibre, local, limites), 'host : newToken', 'host : balanceUpdate', 'host : rgState', 'host : navigation'.
Lancer le jeu à partir du lobby
Deux approches :1. À l'intérieur du même iframe - plus rapide, mais moins de contrôle et plus difficile à suivre.
2. La ruth/fenêtre séparée est plus facile à mesurer, vous pouvez accrocher vos overleys (RG/limites), mieux compatible avec le Web.
Itinéraire minimum :- Le lobby envoie 'lobby : launchGame {gameId}'.
- L'hôte génère 'gameToken' sur son back et ouvre '/game/: id ? token=…`.
- Le jeu prend un token, valide, commence les sessions de paris.
UX et performances
Αдаптив : 3-5 colonnes sur десктопе, 2 - la planchette, 1 - mobile; fixez la hauteur des cartes.
Squelettes et lazy-loading (images 'loading =' lazy ',' fetchpriority = 'low' pour les galeries).
Recherche rapide et filtres : mémorisez les balises sélectionnées dans '? query '/' localStorage'.
Clics par carte : zone de clics ≥ 44px ; support clavier (A11y).
Playcholders bannières : pour que le layout ne soit pas « skakal ».
Politique des médias iOS : vidéo/audio autoplay nécessite le geste de l'utilisateur ; tenez compte de cela dans les vidéos de démonstration.
Conformité et responsabilité du joueur (RG)
Limites et délais : prise en charge de l'affichage des limites actuelles du joueur dans le lobby (read-only), appel du formulaire de changement côté hôte.
Auto-exclusion : événement 'lobby : openRG' → ouvrons votre module RG en dehors de l'iframe.
Yur. - bannières et 18 + : côté hôte, pas à l'intérieur du lobby, afin de ne pas dépendre des créateurs du fournisseur.
GDPR/cookies : le lobby est une tierce partie, réfléchissez au cookie-consentement et au cadre juridique (nécessité contractuelle/intérêt légal).
Localisation et branding
Passez la langue/monnaie/région à 'src' et/ou à 'host : context'.
Admettez les variables white-label : couleurs, logos, polices.
Gardez les blocs « favoris/récents » du côté de l'opérateur afin de ne pas perdre de données lorsque vous changez de fournisseur.
Analyse et métriques
Couche de suivi (exemple) :- `lobby_impression`, `tile_view`, `tile_click`, `search_use`, `category_change`, `launch_game`, `error_view`.
- TTFB-Bet (temps entre le lobby et le premier pari), CR_deposit→launch, catégories CTR/recherche, Profondeur moyenne de visualisation.
Agrégez les événements de l'iframe chez vous ; éviter le « double comptage » avec les pixels du fournisseur.
Plan d'essai de mise en œuvre
1. Sécurité : vérification CSP, absence de drapeaux « allow » et « sandbox » superflus, validation de 'postMessage. origin`.
2. Sessions : expiration du token, silent-refresh, comportement à 401/403.
3. Rezayz : hauteur correcte sur mobile/web view (Android/iOS).
4. Caisse/CUS : scénarios d'ouverture/fermeture des modales par événements du lobby.
5. Indisponibilité du fournisseur : Temporisation, affichage du bouchon et des retraits.
6. Limites RG : afficher et interdire le lancement du jeu lors des blocages.
7. Basculement local/devises : à la volée et au redémarrage.
8. Analyse : comparaison des compteurs hôte vs vendor.
Erreurs typiques (anti-modèles)
Accrocher le listener 'message' sans vérifier 'origin'.
Donner un accès complet à l'iframe ('allow-same-origin allow-top-navigation-by-user-activation' au cas où ').
Jetons de longue durée sans rotation.
S'appuyer sur le contenu du lobby pour le référencement.
Mélanger le cache du joueur et le cache du catalogue du fournisseur (brise la personnalisation).
Exécutez le jeu à l'intérieur du même iframe sans contrôler le suivi et les RG-overleys.
Chèque d'intégration iFrame lobby
- Convenu d'un contrat d'événements (version, types, schémas).
- Réalisé/lobby-token avec TTL ≤ 15 minutes et rotation.
- Configuré CSP, 'sandbox', 'allow', 'referpolicy'.
- Ils ont connecté cashier/KYC/RG et relié les événements 'openCashier '/' openRG'.
- On a réfléchi à la dégradation du fournisseur.
- Vérification de la localisation, devises, bannières d'âge.
- Ont configuré l'analyse (user/session ids de bout en bout).
- Des tests croisés par navigateur et Web mobile ont été effectués.
- Le runbook des incidents et les points de contact avec le vendeur ont été décrits.
Le lobby iFrame est un moyen rapide et pragmatique d'élargir le catalogue de jeux et de réduire le temps sur le marché. La clé d'une intégration saine est une sécurité stricte, un contrat d'événements clair, une autorisation fiable, et un UX/analyste réfléchi du côté de l'opérateur. En faisant cela un jour, vous pourrez mettre à l'échelle les intégrations avec de nouveaux fournisseurs presque "au clic'.