Quests

Overview

The Quests block shows quests as cards in your Web Shop. Each card shows the following:

• quest image
• quest name
• description
• reward
• button

Users complete the quest conditions and receive the reward. Quest conditions are based on in-game events: player actions in your game that you send to the quest platform, for example, reaching a level or winning a number of matches.

You can add the block through the AI toolkit or manually in Site Builder. The quests themselves can be created and edited only through the Xsolla AI toolkit.

Benefits

The Quests block offers the following benefits:

• Engagement: Quests give users goals to return to your Web Shop and game.

• No coding: You can add and configure the block in Site Builder, or let your AI agent do it with the AI toolkit.

• Control over what is shown: You can choose which quests appear, in what order, and how many.

• Customization: You can edit all card texts, images and layout to match your Web Shop design.

Requirements

To use the Quests block, make sure:

• You created Web Shop using Xsolla Site Builder.
• You configured Xsolla Login on your site.
• You created quests for the project using the Xsolla AI toolkit. The block can show only quests that already exist.

User flow

1. The user opens Web Shop and sees the Quests block with quest cards.
2. The user clicks the button on a quest card and logs in with Xsolla Login, if they are not logged in yet.
3. The user completes the quest conditions.
4. The quest card changes its state depending on the user’s progress.
5. When the quest is completed, the user receives the reward.

Set up quests with AI toolkit

You can create and change quests only through the Xsolla AI toolkit, which works with AI coding tools such as Claude Code, OpenAI Codex and Gemini CLI. Your AI agent can also add the Quests block to your site and update it.

To set up quests and the block with the AI toolkit:

1. Create or change quests with your AI agent.
2. Ask your AI agent to add the Quests block to your site or update it. The agent saves the blocks it creates or changes as a draft.
3. Review the draft in Site Builder.
4. Publish the site to make the changes live.

Set up Quests block in Site Builder

To add the Quests block:

3. If your site has several pages, select the one you need from the drop-down list at the top of the builder.
4. Click Add block and choose Quests.
5. Click the block to open its settings panel and configure the settings.
6. Edit the block texts.
7. Click Preview in the upper-right corner to review your changes.
8. Publish your site:
   1. In the upper-right corner of the site builder, click Publish.
   2. Check the boxes next to the pages you want to publish.
   3. Click Publish.

Configure block settings

The block settings panel contains the following groups of settings: Quests, Layout and Preview state.

Quests

In the Quests group, configure which quests the block shows and in what order:

• Selected quests — the quests created for your project with the AI toolkit. To find a quest, enter its name in the search field. For each quest, you can do the following:
  • Turn on the toggle to show the quest in the block. Quests with the toggle off don’t appear.
  • Drag the quest up or down by the handle to change the order. The top quest appears first from the left.
  • Expand the quest and upload the image shown on its card. You can use any image, such as the reward or a quest-themed illustration.
• Maximum quests shown — the maximum number of quest cards displayed in the block.

Layout

In the Layout group, configure how the block and its cards look:

• Show heading — shows or hides the block title.
• Show card descriptions — shows or hides the quest description on each card.
• Show card images — shows or hides the image on each card.
• Image fit — how the image fills the card’s image area:
  • Fill image area — the image covers the whole area and may be cropped.
  • Fit whole image — the whole image is shown without cropping.
• Card text alignment — left, center or right alignment of the card texts.
• Button style — the button style on each card, taken from your site’s theme: Primary, Secondary, Tertiary or Theme default.
• Block background — the background behind all cards: Transparent, or the Primary / Secondary color of your site’s theme.
• Card background — the background of each card: Transparent, or the Primary / Secondary color of your site’s theme.

Preview state

In the Preview state group, select how quest cards are displayed in the site builder:

• Editor simulation — lets you check the block’s appearance in different card states. Simulated actions on cards are disabled in the editor.
• Live — shows real data.

Edit block texts

In Site Builder, you can edit the following texts directly on the block:

• Block title
• Quest name
• Quest description
• Button text

To edit a text:

1. Click the text you want to change.
2. Enter the new text.
3. Use the toolbar to format the text (optional). You can change the text style, create numbered and bulleted lists, apply bold, italic and underline, set alignment, add a link and change the text color.