Blocs

Les blocs sont des sections divisées de manière logique dans Site Builder, regroupant des composants ayant des fonctionnalités similaires.

Header

Le bloc dans l’en-tête du site. Le Header affiche les informations utilisateur et contient des éléments de navigation. Vous pouvez épingler le bloc pour qu’il reste visible à l’écran lors du défilement du site.

Fonctionnalités principales :

• Ajout de boutons de navigation, d’achat ou de redirection vers d’autres pages.
• Ajout d’un sélecteur de langue pour le site.
• Configuration d’un bouton d’authentification sur le site.
• Affichage des informations sur l’utilisateur authentifié.

Sidebar

Menu de navigation pour passer d’une page du site à une autre. Il s’affiche sous forme de barre latérale gauche sur ordinateur et devient une barre fixe en bas de l’écran sur les appareils mobiles.

Barre latérale dans la version bureau du site :

Barre latérale dans la version mobile du site :

Fonctionnalités principales :

• Configuration du menu de navigation.
• Ajout de boutons pour accéder à Google Play, App Store ou une autre boutique d’applications.
• Ajout de boutons vers votre page sur les réseaux sociaux.

Lead block in the Single game page template

Bloc avec des informations sur le jeu vendu sur le site Web.

Fonctionnalités principales:

• Personnalisation de la mise en page du texte.
• Affichage des informations sur le jeu : titre, développeur.
• Affichage des plateformes de distribution du jeu.
• Ajout de tags avec du contenu personnalisé.
• Configuration des fonctions des boutons :
  • Regarder des vidéos
  • Faire défiler jusqu’à un bloc
  • Rediriger vers un lien
  • Acheter un objet
• Personnalisation du style des boutons.

Lead block in Web Shop template

Bloc contenant des informations sur votre Web Shop et les principales informations sur le jeu.

Fonctionnalités principales :

• Personnalisation des informations sur le jeu : icône, titre, développeur.
• Personnalisation des cartes avec des descriptions des fonctionnalités du site.

Si nécessaire, personnalisez le bloc :

1. Ajoutez des images ou une vidéo comme arrière-plan personnalisé.
2. Pour configurer les cartes d’information, activez les bascules correspondantes :
   • Show icons
   • Show titles
   • Show descriptions

Call-to-action

Bloc pour attirer l’attention de l’utilisateur sur les actions clés du site.

Fonctionnalités principales :

• Ajout d’un champ pour l’e-mail de l’utilisateur afin de s’abonner aux actualités du jeu.
• Ajout d’un bouton pour acheter un objet, de liens vers Google Play/App Store ou vers un autre site Web.
• Affichage des logos de plateformes, sur lesquels un clic redirige l’utilisateur vers votre page sur cette plateforme.
• Lightbox avec une vidéo YouTube/Vimeo.

Fast Login

Le bloc Fast Login met en avant l’étape d’authentification obligatoire et simplifie le parcours d’achat des utilisateurs.

L’apparence du bloc et ses fonctionnalités dépendent de la méthode d’authentification sélectionnée.

Si l’authentification via ID utilisateur est configurée pour le site, le bloc Fast Login affiche un champ pour saisir l’ID et un bouton de connexion.

Fonctionnalités principales:

• Authentification utilisateur sans transition supplémentaire vers la fenêtre modale.
• Configuration du contenu du bloc. Vous pouvez activer et configurer les sections suivantes :
  • Titre
  • Description
  • Instructions pour trouver l’ID utilisateur
  • Arrière-plan personnalisé

Si l’authentification via Xsolla Login est configurée pour le site, un bouton supplémentaire appelant à l’autorisation s’affiche dans le bloc Fast Login. Lorsque vous cliquez sur ce bouton, une fenêtre modale s’ouvre pour l’autorisation via l’une des méthodes Xsolla Login.

Fonctionnalités principales :

• Configuration du texte du bouton appelant à l’autorisation
• Configuration d’un arrière-plan personnalisé

Gallery

Bloc avec des images, des captures d’écran et des vidéos pour renforcer l’intérêt de l’utilisateur pour le jeu.

Fonctionnalités principales :

• Ajout d’images et de vidéos aux diapositives.
• Lecture de vidéos sur la page de destination via un lien YouTube.
• Défilement des diapositives avec du contenu.
• Aperçu de la vidéo ou de l’image précédente et suivante dans le slider.
• Affichage de flèches pour faire défiler le contenu.

News

Fonctionnalités principales :

• Publication d’articles, d’actualités, d’annonces, de changelogs du jeu
• Regroupement des articles par catégories et affichage des catégories sous forme d’onglets

Cards

Bloc universel pour afficher des informations sur le jeu ou le magasin. Dans ce bloc, vous pouvez ajouter des cartes avec n’importe quel contenu.

Fonctionnalités principales:

• Ajout de cartes avec textes, images et boutons.
• Configuration des fonctions des boutons :
  • Regarder des vidéos
  • Faire défiler jusqu’à un bloc
  • Rediriger vers un lien
  • Acheter un objet
• Ajustement des dimensions des cartes et du positionnement des éléments.
• Personnalisation de la disposition en grille des cartes.
• Alignement du contenu dans les cartes.

Il n’y a pas de taille d’image recommandée dans le bloc Cards, car vous pouvez ajuster vous‑même le ratio de la carte et de l’image.

Promo slider

Bloc avec une galerie contenant des bannières de jeu, des titres et leurs descriptions.

Fonctionnalités principales :

• Possibilité d’ajouter un bouton pour acheter des objets, naviguer vers un lien ou vers Google Play/App Store.
• Défilement cyclique des diapositives avec contenu.
• Affichage des flèches de navigation pour les jeux.
• Ajout d’un champ pour l’e-mail de l’utilisateur afin de s’abonner aux actualités du jeu.
• Affichage de liens vers votre page sur différentes plateformes.

Description

Bloc avec la description du jeu et des images.

Fonctionnalités principales :

• Affichage d’images et de descriptions textuelles.
• Deux options de disposition pour les images et le texte : horizontale et verticale.
• Agrandissement des images ou navigation vers un lien en cliquant sur l’image.

Promo codes

Bloc pour utiliser des codes promo et des coupons sur le site.

Fonctionnalités principales :

• Application par l’utilisateur de codes promo pour recevoir des bonus sur les achats.
• Application de coupons pour des récompenses immédiates.
• Ajout de code JS personnalisé pour étendre les fonctionnalités du bloc.

Game editions

Le bloc permet d’afficher des informations détaillées sur un jeu et de présenter les caractéristiques des différentes éditions de ce jeu.

Fonctionnalités principales :

• Modèles de style pour le lot et style personnalisé.
• Ajustement de la disposition des composants : les boutons, les titres et les descriptions peuvent être réorganisés.
• Configuration des listes d’avantages pour chaque édition du jeu.
• Mise en avant du lot le plus avantageux — vous pouvez marquer une édition du jeu comme recommandée à l’achat.

Store

Bloc pour vendre des clés de jeu (hors modèle Web Shop), des objets virtuels, des lots et des packages de monnaie virtuelle. Le bloc contient des sections créées automatiquement ; vous pouvez les supprimer et en créer de nouvelles.

Fonctionnalités principales :

• Vente d’objets en jeu et de clés de jeu.

• Affichage de toutes les informations sur les objets : prix, promotions, noms, descriptions, images, contenu des lots, limites d’achat.

• 4 styles de cartes d’objet.

• Navigation entre les sections à l’aide d’onglets par type d’objet.

• Personnalisation des titres de blocs et de sections.

• Prévisualisation des objets de démonstration.

• Défilement horizontal sur les appareils mobiles.

• Bouton supplémentaire pour l’invite d’authentification.

Si nécessaire, personnalisez le bloc et ajoutez :

• le titre
• l’affichage des noms des groupes d’objets
• des onglets pour une navigation rapide dans le magasin
• un arrière-plan personnalisé

Pour ce faire, activez les bascules correspondantes.

Vous pouvez également configurer le bouton d’invite à l’authentification dans la section Login button.

Pour configurer l’affichage des objets dans le magasin :

1. Ajoutez une section de magasin et, dans la liste déroulante, sélectionnez le type et le groupe d’objets que vous souhaitez vendre sur le site.

2. Dans la section du magasin, sélectionnez le style Item card :

• Featured. Cette disposition de carte permet d’attirer l’attention des utilisateurs sur des objets ou des offres spéciales.

• Dans les paramètres de la disposition de carte, vous pouvez :
  • masquer ou afficher l’image et la description d’un objet
  • ajuster ou agrandir l’image d’un objet
  • modifier la couleur du texte
  • utiliser un arrière‑plan personnalisé pour le carrousel

• Nous vous recommandons d’utiliser cette disposition pour :
  • promouvoir des offres de bonus et de remise
  • mettre en avant des objets et des offres avec des limitations définies
  • présenter des lots

• Horizontal. Cette disposition de carte permet de placer le nom, la description et le prix de l’objet à droite de l’image.

• Dans les paramètres de la disposition de carte, vous pouvez :
  • masquer ou afficher la description d’un objet
  • ajuster ou agrandir l’image d’un objet
  • activer ou désactiver le défilement horizontal sur les appareils mobiles
  • utiliser un arrière‑plan personnalisé pour la section

• Vertical. Cette disposition de carte permet de placer le nom, la description et le prix de l’objet en bas de l’image.

• Dans les paramètres de la disposition de carte, vous pouvez :
  • masquer ou afficher la description d’un objet
  • ajuster ou agrandir l’image d’un objet
  • activer ou désactiver le défilement horizontal sur les appareils mobiles
  • utiliser un arrière‑plan personnalisé pour la section

• Large. Nous recommandons d’utiliser cette disposition de carte pour les lots et les bonus. Elle permet d’afficher la composition de la carte sur la page de destination sans cliquer sur la carte.

• Dans les paramètres de la disposition de carte, vous pouvez :
  • masquer ou afficher la description d’un objet
  • ajuster ou agrandir l’image d’un objet
  • activer ou désactiver le défilement horizontal sur les appareils mobiles
  • utiliser un arrière‑plan personnalisé pour la section

3. Si nécessaire, personnalisez la disposition de la carte en activant les bascules correspondantes dans les paramètres de disposition.

4. Pour masquer la section lorsqu’elle est vide, activez la bascule Hide section if empty.

Reward system

Bloc pour ajouter un système de récompenses. Il permet d’obtenir des points de valeur lors des achats, de les stocker et de compléter des chaînes de récompenses. Les points de valeur ne sont pas dépensés lorsque vous recevez une récompense.

Fonctionnalités principales :

• Choisir une chaîne de récompenses configurée dans le magasin en jeu.
• Étendre les fonctionnalités du bloc, par exemple ajouter du texte, un bouton ou une image, via du code JS.

Offer chain

Comportement sur la page :

• Les offres sont présentées sous forme de slider horizontal avec des cartes d’objet.
• Chaque offre peut avoir l’un des statuts suivants :
  • Réclamée — l’objet a été acheté ou obtenu gratuitement.
  • Disponible — l’objet peut être acheté ou obtenu gratuitement.
  • Verrouillée — l’objet n’est pas encore disponible, car le précédent n’a pas été réclamé ou acheté.
• Chaque offre peut avoir l’un des types de prix suivants :
  • Gratuit — l’objet peut être obtenu gratuitement.
  • $X.XX — l’objet est disponible à l’achat.
• L’offre disponible est mise en évidence. Le bouton affiche soit Claim pour les offres gratuites, soit $X.XX pour les offres payantes.
• Lorsque l’utilisateur clique sur le bouton de la carte d’offre active, l’action correspondante est déclenchée : ouverture de l’interface de paiement ou attribution gratuite de l’objet.

Social media widgets

Bloc donnant accès aux réseaux sociaux du jeu pour une interaction plus efficace avec les utilisateurs.

Fonctionnalités principales :

• Ajout de widgets pour Facebook, Twitter, Discord et Twitch.
• Deux types d’affichage de widget.
• Choix du thème sombre ou clair sur Twitter et Discord.

FAQs

Bloc avec les réponses aux questions fréquemment posées sur votre jeu.

Fonctionnalités principales :

• Réponses prédéfinies aux questions courantes adaptées à la majorité des magasins.
• Ajout de code JS personnalisé pour étendre les fonctionnalités du bloc.

Custom code

Le bloc permet d’utiliser votre code CSS, JS et HTML personnalisé sur le site pour implémenter des fonctionnalités uniques non prévues dans l’interface.

Fonctionnalités principales :

• Synchronisation du code personnalisé sur toutes les versions linguistiques du site, sans migration individuelle.
• Onglets distincts pour CSS, HTML et JS dans le bloc.
• Mise en évidence de la syntaxe intégrée.
• Vignette de code pour faciliter la navigation dans le bloc.

Cart settings

Pour utiliser le panier sur le site Web, procédez comme suit :

1. Dans la section principale du constructeur, allez au bloc Cart settings.

2. Activez la bascule Use shopping cart.

3. Configurez des fonctions supplémentaires du panier (facultatif). Pour ce faire, activez les bascules correspondantes :

1. • Show promo code field : permet aux utilisateurs d'utiliser un code promo ou un coupon dans l'interface du panier ;

1. • Login before shopping cart : ouvre la fenêtre d'authentification lorsque l'utilisateur accède au panier s'il n'était pas connecté auparavant.

System requirements

Bloc avec des informations sur la configuration système minimale et recommandée nécessaire pour exécuter le jeu sur différentes plateformes.

Fonctionnalités principales:

• Deux options d’affichage :
  • Exigences minimales uniquement
  • Exigences minimales et recommandées
• Utilisation d’onglets multiples pour différentes plateformes.

Subscriptions

Bloc permettant aux utilisateurs d’accéder à un ensemble de services selon des conditions définies.

Fonctionnalités principales :

• Définition des icônes pour chaque composant de l’abonnement.
• Définition d’une image pour le plan d’abonnement.

Social quests

Le bloc Social quests vous permet d’ajouter à votre site des tâches qui récompensent les utilisateurs avec des points de fidélité ou des objets du catalogue une fois celles-ci accomplies.

Ces tâches peuvent inclure la connexion d’un compte YouTube, la visite d’une communauté Discord ou le visionnage d’une bande‑annonce de jeu. Les récompenses sont attribuées automatiquement. Les points de fidélité sont immédiatement reflétés dans le solde du compte de l’utilisateur sur le site et peuvent être utilisés au moment du paiement pour régler partiellement des objets. Les objets du catalogue sont livrés dans l’inventaire en jeu, le Backpack ou le portefeuille de l’utilisateur.

Les quêtes sociales permettent d’augmenter l’engagement, de renforcer la fidélité des utilisateurs et de développer votre communauté en transformant les actions sociales en récompenses concrètes.

Consultez la documentation Social quests pour plus de détails sur la configuration du bloc.

Quests

Le bloc Quests affiche les quêtes sous forme de cartes dans votre Web Shop. Chaque carte présente une image, un nom, une description, une récompense et un bouton. Les conditions des quêtes sont basées sur des événements en jeu : des actions des joueurs dans votre jeu que vous envoyez à la plateforme de quêtes, par exemple atteindre un niveau ou gagner un certain nombre de matchs.

Vous pouvez créer et modifier des quêtes uniquement via le Xsolla AI toolkit. Consultez la documentation Quests pour en savoir plus sur l’ajout et la configuration du bloc.

Footer

Bloc situé en bas de la page. Il contient des informations légales et des paramètres de confidentialité.

Fonctionnalités principales :

• Choix du style du bloc : colonnes ou lignes.
• Ajout d’un sélecteur de langue pour le site.
• Ajout de boutons pour partager le lien du site sur les réseaux sociaux.
• Affichage des restrictions d’âge.

Si nécessaire, personnalisez le bloc :

• Choisissez un style de disposition.
• Personnalisez l’arrière‑plan.
• Ajoutez la section Share options et configurez les boutons de partage.
• Ajoutez une section Social media et configurez les liens vers les réseaux sociaux.
• Ajoutez des restrictions d’âge.