Blocs

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

Pour trouver tous les blocs, dans le projet dans le Compte éditeur, accédez à la section Storefronts > Websites et appuyez sur Open Site Builder dans le volet du site.

En-tête

Le bloc Header situé dans l’en-tête du site affiche des informations sur l’utilisateur et contient des éléments de navigation. Fixez le bloc afin qu’il reste visible à l’écran lors du défilement du site.

Fonctionnalités principales :

• Ajout de boutons pour la redirection sur une page, l’achat d’objets ou la navigation 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é.

Barre latérale

Menu de navigation permettant de parcourir les pages du site. Il s’affiche sous forme de barre latérale à gauche sur ordinateur et devient une barre fixe en bas de l’écran sur mobile.

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.
• Ajouter des boutons pour accéder à Google Play, à l’App Store ou à un autre magasin d’applications.
• Ajouter des boutons pour accéder à votre page sur les réseaux sociaux.

Bloc Lead dans le modèle Single game page

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

Fonctionnalités principales :

• Personnalisation de la disposition 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.

Bloc Lead dans le modèle Web Shop

Bloc contenant des informations sur votre Web Shop et les principales caractéristiques du 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 des actions clés du site.

Fonctionnalités principales :

• Ajout d’un champ dédié à la collecte de l’adresse e-mail de l’utilisateur pour l’abonnement aux actualités du jeu ;
• Ajout d’un bouton d’achat d’objets, ainsi que de liens directs vers Google Play/App Store ou tout autre site Web ;
• Affichage des logos de plateformes, sur lesquels l’utilisateur clique pour accéder à votre page sur chaque 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 caractéristiques dépendent de la méthode d’authentification sélectionnée.

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

Fonctionnalités principales :

• Authentification utilisateur sans transition supplémentaire vers une 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é.

Lorsque l’authentification via Xsolla Login est configurée pour le site, un bouton d’authentification supplémentaire s’affiche dans le bloc de Fast Login. En cliquant sur ce bouton, une fenêtre modale s’ouvre pour l’authentification à l’aide de l’une des méthodes Xsolla Login.

Fonctionnalités principales :

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

Le bloc Fast Login est automatiquement ajouté aux sites créés avec le modèle Web Shop. S’il n’apparaît pas sur votre site, vous pouvez l’ajouter manuellement dans le constructeur de site.

Galerie

Bloc avec des images, des captures d’écran et du matériel vidéo pour augmenter 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 de diapositives avec du contenu ;
• Aperçu de la vidéo ou de l’image précédente et suivante dans la diapositive ;
• Affichage des flèches pour faire défiler le contenu.

Nouvelles

Bloc pour la publication d’articles sur votre site Web.

Fonctionnalités principales :

• Publication d’articles, de nouvelles, d’annonces, de changelogs de jeu ;
• Regroupement d’articles par catégories et affichage des catégories sous forme d’onglets.

Cartes

Bloc universel pour afficher des informations sur le jeu ou le magasin. Ce bloc permet d’ajouter des cartes avec tout type de contenu.

Fonctionnalités principales :

• Ajout de cartes avec du texte, des images et des boutons.
• Configuration des fonctions de 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 de la carte.
• Personnalisation de la disposition en grille des cartes.
• Alignement du contenu à l’intérieur des cartes.

Il n’y a pas de taille d’image recommandée pour le bloc Cards, car vous pouvez ajuster le rapport d’aspect de la carte et de l’image selon vos besoins.

Curseur promotionnel

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

Fonctionnalités principales :

• Ajout d’un bouton pour l’achat d’objets et la navigation 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 dédié à la collecte de l’adresse e-mail de l’utilisateur pour l’abonnement aux actualités du jeu ;
• Affichage de liens vers votre page sur différentes plateformes.

Description

Bloc avec la description et les images du jeu.

Fonctionnalités principales :

• Affichage des images et de la description textuelle ;
• 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.

Codes promo

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

Fonctionnalités principales :

• Application de codes promo par l’utilisateur 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

Bloc permettant d’afficher des informations détaillées sur un jeu et sur ses différentes éditions.

Fonctionnalités principales :

• Modèles de style pour le bundle 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’atouts pour chaque édition du jeu ;
• Mise en avant du bundle le plus avantageux : vous pouvez marquer une édition du jeu comme recommandé pour l’achat.

Store

Bloc dédié à la vente de clés de jeux (sauf modèle Web Shop), d’objets virtuels, de lots et de packages de monnaie virtuelle. Il contient des sections créées automatiquement, que vous pouvez supprimer ou remplacer par 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 de bien ;
• Navigation dans les sections à l’aide d’onglets de type de bien ;
• Personnalisation des titres de blocs et de sections ;
• Prévisualisation des objets de démo ;
• Défilement horizontal sur les appareils mobiles ;
• Bouton supplémentaire pour l’invite d’authentification.

Si nécessaire, personnalisez le bloc en ajoutant :

• title
• l’affichage des noms des groupes des objets ;
• des onglets pour naviguer rapidement dans le magasin ;
• un arrière-plan personnalisé

Pour ce faire, activez les bascules correspondantes.

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

Pour configurer l’affichage des objets dans le magasin :

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

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

• Featured. Cette disposition vous permet d'attirer l'attention des utilisateurs sur des objets ou des offres spéciales.

• Dans les paramètres de 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 cette disposition pour :
  • promouvoir des bonus et des réductions ;
  • mettre en avant des objets et des offres soumis à des restrictions ;
  • présenter des lots.

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

• Dans les paramètres de 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 vous permet de placer le nom, la description et le prix de l'objet en bas de l'image.

• Dans les paramètres de 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 de voir la composition de la carte sur la page d'accueil sans avoir à appuyer dessus.

• Dans les paramètres de 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 en activant les bascules correspondantes dans les paramètres de disposition de la carte.
4. Pour masquer la section lorsqu’elle ne contient aucun contenu, activez la bascule Hide section if empty.

Système de récompense

Bloc pour ajouter un système de récompense. Il permet à l’utilisateur de gagner des points de valeur sur ses achats, de les stocker et de collecter des chaînes de récompenses. Les points de valeur ne sont pas consommés lorsqu’une récompense est obtenue.

Fonctionnalités clés :

• Choix d’une chaîne de récompenses configurée dans le magasin en jeu ;
• Extension des fonctionnalités du bloc en ajoutant du texte, un bouton ou une image via du code JS.

Chaîne d’offres

Bloc permettant d’ajouter une chaîne d’offres configurée dans le Compte éditeur. L’utilisateur reçoit l’objet gratuitement ou l’achète avec de la monnaie réelle pour débloquer l’offre suivante dans la chaîne. Les offres peuvent être gratuites ou payantes.

Comportement sur la page :

• Les offres s’affichent sous forme de carrousel 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é — 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 sans paiement ;
  • X,XX $ — l’objet est disponible à l’achat.
• L’offre disponible est mise en évidence. Le bouton affiche Réclamer pour une offre gratuite ou X,XX $ pour une offre payante.
• 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.

Widgets pour réseaux sociaux

Bloc donnant accès aux réseaux sociaux du jeu pour une interaction plus efficace avec l’utilisateur.

Fonctionnalités principales :

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

FAQ

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 plupart des magasins ;
• Ajout de code JS personnalisé pour étendre les fonctionnalités du bloc.

Code personnalisé

Bloc permettant d’utiliser un code CSS, JS et HTML personnalisé sur le site pour implémenter des fonctionnalités uniques non fournies dans l’interface.

Fonctionnalités principales :

• Synchronisation du code personnalisé sur toutes les versions linguistiques du site sans nécessité de migration individuelle ;
• Onglets distincts pour CSS, HTML et JS à l’intérieur du bloc ;
• Mise en évidence de la syntaxe intégrée ;
• Vignette de code pour une navigation aisée à l’intérieur du bloc.

Paramètres de panier

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

1. Dans la section principale du constructeur, accédez au bloc Cart settings.
2. Activez la bascule Use shopping cart.
3. Configurez les 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.

Configurations système

Bloc avec des informations sur les exigences système minimales et recommandées pour l’exécution du jeu sur différentes plateformes.

Fonctionnalités principales :

• Deux options d’affichage :
  • Seulement les exigences minimales ;
  • Exigences minimales et recommandées.
• Utilisation de plusieurs onglets pour différentes plateformes.

Subscriptions

Bloc permettant à l’utilisateur d’accéder à un ensemble de services en fonction de conditions spécifiques.

Fonctionnalités principales :

• Configuration des icônes pour chaque composant de l’abonnement ;
• Configuration d’une image pour le plan d’abonnement.

Quêtes sociales

Le bloc Social quests permet d’ajouter à votre site des tâches qui récompensent les utilisateurs par des points de fidélité 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 de la bande-annonce d’un jeu. Les points de fidélité sont attribués automatiquement et apparaissent immédiatement dans le solde du compte de l’utilisateur sur le site. Ils peuvent ensuite être utilisés lors du paiement pour régler partiellement les objets.

Les quêtes sociales stimulent l’engagement, renforcent la fidélité des utilisateurs et développent votre communauté en récompensant les actions sociales avec des avantages concrets.

Référez-vous à la documentation des quêtes sociales pour des informations détaillées sur la configuration du bloc.

Pied de page

Bloc situé en bas de la page, contant 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 d’un bouton 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 vos réseaux sociaux.
• Ajoutez des restrictions d’âge.

Liens utiles