Quêtes

Aperçu

Le bloc Quests affiche les quêtes sous forme de cartes dans votre Web Shop. Chaque carte affiche les éléments suivants :

• image de la quête
• nom de la quête
• description
• récompense
• bouton

Les utilisateurs remplissent les conditions de la quête et reçoivent la récompense. 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 ajouter le bloc via l’AI toolkit ou manuellement dans Site Builder. Les quêtes elles-mêmes ne peuvent être créées et modifiées que via le Xsolla AI toolkit.

Avantages

Le bloc Quests offre les avantages suivants :

• Engagement : les quêtes donnent aux utilisateurs des objectifs pour revenir sur votre Web Shop et dans votre jeu.

• Sans code : vous pouvez ajouter et configurer le bloc dans Site Builder, ou laisser votre agent IA le faire avec l’AI toolkit.

• Contrôle de l’affichage : vous choisissez quelles quêtes apparaissent, dans quel ordre et combien.

• Customisation : vous pouvez modifier tous les textes des cartes, les images et la disposition pour correspondre au design de votre Web Shop.

Exigences

Pour utiliser le bloc Quests, assurez-vous que :

• Vous avez créé un Web Shop avec Xsolla Site Builder.
• Vous avez configuré Xsolla Login sur votre site.
• Vous avez créé des quêtes pour le projet avec le Xsolla AI toolkit. Le bloc ne peut afficher que des quêtes déjà existantes.

Flux utilisateur

1. L’utilisateur ouvre le Web Shop et voit le bloc Quests avec les cartes de quêtes.
2. L’utilisateur clique sur le bouton d’une carte de quête et se connecte avec Xsolla Login s’il n’est pas encore connecté.
3. L’utilisateur remplit les conditions de la quête.
4. L’état de la carte de quête change en fonction de la progression de l’utilisateur.
5. À la fin de la quête, l’utilisateur reçoit la récompense.

Configurer les quêtes avec l’AI toolkit

Vous pouvez créer et modifier des quêtes uniquement via le Xsolla AI toolkit, qui fonctionne avec des outils de codage IA tels que Claude Code, OpenAI Codex et Gemini CLI. Votre agent IA peut aussi ajouter le bloc Quests à votre site et le mettre à jour.

Pour configurer les quêtes et le bloc avec l’AI toolkit :

1. Créez ou modifiez des quêtes avec votre agent IA.
2. Demandez à votre agent IA d’ajouter le bloc Quests à votre site ou de le mettre à jour. L’agent enregistre les blocs qu’il crée ou modifie en tant que brouillon.
3. Passez en revue le brouillon dans Site Builder.
4. Publiez le site pour appliquer les modifications.

Configurer le bloc Quests dans Site Builder

Pour ajouter le bloc Quests :

3. Si votre site comporte plusieurs pages, sélectionnez celle dont vous avez besoin dans la liste déroulante en haut de Site Builder.
4. Cliquez sur le bouton Add block et choisissez Quests.
5. Cliquez sur le bloc pour ouvrir son panneau de paramètres et configurer les paramètres.
6. Modifiez les textes du bloc.
7. Cliquez sur Preview dans le coin supérieur droit pour vérifier vos modifications.
8. Publiez votre site :
   1. Dans le coin supérieur droit de Site Builder, cliquez sur Publish.
   2. Cochez les cases en face des pages que vous voulez publier.
   3. Cliquez sur Publish.

Configurer les paramètres du bloc

Le panneau des paramètres du bloc contient les groupes suivants : Quests, Layout et Preview state.

Quests

Dans le groupe Quests, configurez quelles quêtes le bloc affiche et dans quel ordre :

• Selected quests — les quêtes créées pour votre projet avec l’AI toolkit. Pour trouver une quête, saisissez son nom dans le champ de recherche. Pour chaque quête, vous pouvez :
  • Activer la bascule pour afficher la quête dans le bloc. Les quêtes dont la bascule est désactivée ne s’affichent pas.
  • Faire glisser la quête vers le haut ou vers le bas à l’aide de la poignée pour changer l’ordre. La quête en haut s’affiche en premier, à gauche.
  • Développer la quête et télécharger l’image affichée sur sa carte. Vous pouvez utiliser n’importe quelle image, par exemple la récompense ou une illustration liée à la quête.
• Maximum quests shown — le nombre maximal de cartes de quêtes affichées dans le bloc.

Layout

Dans le groupe Layout, configurez l’apparence du bloc et de ses cartes :

• Show heading — affiche ou masque le titre du bloc.
• Show card descriptions — affiche ou masque la description de la quête sur chaque carte.
• Show card images — affiche ou masque l’image sur chaque carte.
• Image fit — définit la façon dont l’image occupe la zone d’image de la carte :
  • Fill image area — l’image couvre toute la zone et peut être recadrée.
  • Fit whole image — l’intégralité de l’image est affichée sans recadrage.
• Card text alignment — alignement du texte de la carte : à gauche, au centre ou à droite.
• Button style — le style du bouton sur chaque carte, repris depuis le thème de votre site : Primary, Secondary, Tertiary ou Theme default.
• Block background — l’arrière-plan derrière toutes les cartes : Transparent, ou la couleur Primary / Secondary de votre thème de site.
• Card background — l’arrière-plan de chaque carte : Transparent, ou la couleur Primary / Secondary de votre thème de site.

Preview state

Dans le groupe Preview state, choisissez la façon dont les cartes de quêtes sont affichées dans Site Builder :

• Editor simulation — permet de vérifier l’apparence du bloc dans différents états de carte. Les actions simulées sur les cartes sont désactivées dans l’éditeur.
• Live — affiche des données réelles.

Modifier les textes du bloc

Dans Site Builder, vous pouvez modifier directement sur le bloc les textes suivants :

• Titre du bloc
• Nom de la quête
• Description de la quête
• Texte du bouton

Pour modifier un texte :

1. Cliquez sur le texte à modifier.
2. Saisissez le nouveau texte.
3. Utilisez la barre d’outils pour formater le texte (facultatif). Vous pouvez modifier le style du texte, créer des listes numérotées et à puces, appliquer le gras, l’italique et le soulignement, définir l’alignement, ajouter un lien et modifier la couleur du texte.