Quests

Übersicht

Der Block Quests zeigt Quests als Karten in Ihrem Web Shop. Jede Karte zeigt Folgendes:

• Questbild
• Questname
• Beschreibung
• Belohnung
• Schaltfläche

Nutzerinnen und Nutzer erfüllen die Quest-Bedingungen und erhalten die Belohnung. Quest-Bedingungen basieren auf In-Game-Ereignissen: Spieleraktionen in Ihrem Spiel, die Sie an die Quest-Plattform senden, z. B. das Erreichen eines Levels oder das Gewinnen einer bestimmten Anzahl von Matches.

Sie können den Block mit dem AI toolkit hinzufügen oder manuell im Site Builder. Die Quests selbst können nur über das Xsolla AI toolkit erstellt und bearbeitet werden.

Vorteile

Der Block Quests bietet folgende Vorteile:

• Engagement: Quests geben Nutzerinnen und Nutzern Ziele, um in Ihren Web Shop und ins Spiel zurückzukehren.

• Kein Code erforderlich: Sie können den Block im Site Builder hinzufügen und konfigurieren oder ihn mit dem AI toolkit von Ihrem KI-Agenten einrichten lassen.

• Kontrolle über die Anzeige: Sie wählen aus, welche Quests erscheinen, in welcher Reihenfolge und wie viele.

• Anpassung: Sie können alle Kartentexte, Bilder sowie das Layout bearbeiten, damit es zum Design Ihres Web Shops passt.

Voraussetzungen

Um den Block Quests zu verwenden, stellen Sie Folgendes sicher:

• Sie haben einen Web Shop mit Xsolla Site Builder erstellt.
• Sie haben Xsolla Login auf Ihrer Website konfiguriert.
• Sie haben Quests für das Projekt mit dem Xsolla AI toolkit erstellt. Der Block kann nur bereits existierende Quests anzeigen.

Ablauf für den Nutzer

1. Der Nutzer öffnet den Web Shop und sieht den Block Quests mit Quest-Karten.
2. Der Nutzer klickt auf die Schaltfläche auf einer Quest-Karte und meldet sich mit Xsolla Login an, falls noch nicht angemeldet.
3. Der Nutzer erfüllt die Quest-Bedingungen.
4. Die Quest-Karte ändert ihren Status entsprechend dem Fortschritt des Nutzers.
5. Nach Abschluss der Quest erhält der Nutzer die Belohnung.

Quests mit AI toolkit einrichten

Sie können Quests nur über das Xsolla AI toolkit erstellen und ändern. Es arbeitet mit AI-Coding-Tools wie Claude Code, OpenAI Codex und Gemini CLI. Ihr KI-Agent kann außerdem den Block Quests zu Ihrer Website hinzufügen und aktualisieren.

So richten Sie Quests und den Block mit dem AI toolkit ein:

1. Erstellen oder ändern Sie Quests mit Ihrem KI-Agenten.
2. Bitten Sie Ihren KI-Agenten, den Block Quests zu Ihrer Website hinzuzufügen oder zu aktualisieren. Der Agent speichert die von ihm erstellten oder geänderten Blöcke als Entwurf.
3. Prüfen Sie den Entwurf im Site Builder.
4. Veröffentlichen Sie die Website, um die Änderungen live zu schalten.

Quests-Block im Site Builder einrichten

So fügen Sie den Block Quests hinzu:

3. Wenn Ihre Website mehrere Seiten hat, wählen Sie oben im Builder die gewünschte Seite aus der Drop-down-Liste.
4. Klicken Sie auf Add block und wählen Sie Quests.
5. Klicken Sie auf den Block, um seinen Einstellungsbereich zu öffnen, und konfigurieren Sie die Einstellungen.
6. Bearbeiten Sie die Blocktexte.
7. Klicken Sie oben rechts auf Preview, um Ihre Änderungen zu prüfen.
8. Veröffentlichen Sie Ihre Website:
   1. Klicken Sie oben rechts im Site Builder auf Publish.
   2. Aktivieren Sie die Kontrollkästchen neben den Seiten, die Sie veröffentlichen möchten.
   3. Klicken Sie auf Publish.

Blockeinstellungen konfigurieren

Der Einstellungsbereich des Blocks enthält folgende Einstellungsgruppen: Quests, Layout und Preview state.

Quests

In der Gruppe Quests legen Sie fest, welche Quests der Block anzeigt und in welcher Reihenfolge:

• Selected quests — die mit dem AI toolkit für Ihr Projekt erstellten Quests. Um eine Quest zu finden, geben Sie ihren Namen in das Suchfeld ein. Für jede Quest können Sie Folgendes tun:
  • Aktivieren Sie den Schalter, um die Quest im Block anzuzeigen. Quests mit deaktiviertem Schalter erscheinen nicht.
  • Ziehen Sie die Quest über das Griffsymbol nach oben oder unten, um die Reihenfolge zu ändern. Die oberste Quest erscheint zuerst von links.
  • Erweitern Sie die Quest und laden Sie das Bild hoch, das auf ihrer Karte angezeigt wird. Sie können jedes Bild verwenden, z. B. ein Bild der Belohnung oder eine questspezifische Illustration.
• Maximum quests shown — die maximale Anzahl von Quest-Karten, die im Block angezeigt werden.

Layout

In der Gruppe Layout konfigurieren Sie das Erscheinungsbild des Blocks und seiner Karten:

• Show heading — zeigt den Blocktitel an oder blendet ihn aus.
• Show card descriptions — zeigt die Quest-Beschreibung auf jeder Karte an oder blendet sie aus.
• Show card images — zeigt das Bild auf jeder Karte an oder blendet es aus.
• Image fit — wie das Bild den Bildbereich der Karte füllt:
  • Fill image area — das Bild bedeckt den gesamten Bereich und kann zugeschnitten werden.
  • Fit whole image — das gesamte Bild wird ohne Zuschnitt angezeigt.
• Card text alignment — linksbündige, zentrierte oder rechtsbündige Ausrichtung der Kartentexte.
• Button style — der Stil der Schaltfläche auf jeder Karte, übernommen aus dem Theme Ihrer Website: Primary, Secondary, Tertiary oder Theme default.
• Block background — der Hintergrund hinter allen Karten: Transparent oder die Primary-/Secondary-Farbe des Website-Themes.
• Card background — der Hintergrund jeder Karte: Transparent oder die Primary-/Secondary-Farbe des Website-Themes.

Preview state

In der Gruppe Preview state wählen Sie aus, wie Quest-Karten im Site Builder angezeigt werden:

• Editor simulation — ermöglicht es, das Erscheinungsbild des Blocks in verschiedenen Kartenzuständen zu prüfen. Simulierte Aktionen auf Karten sind im Editor deaktiviert.
• Live — zeigt Live-Daten an.

Blocktexte bearbeiten

Im Site Builder können Sie die folgenden Texte direkt im Block bearbeiten:

• Blocktitel
• Questname
• Questbeschreibung
• Schaltflächentext

So bearbeiten Sie einen Text:

1. Klicken Sie auf den Text, den Sie ändern möchten.
2. Geben Sie den neuen Text ein.
3. Nutzen Sie die Symbolleiste, um den Text zu formatieren (optional). Sie können den Textstil ändern, nummerierte und Aufzählungslisten erstellen, Fett, Kursiv und Unterstreichen anwenden, die Ausrichtung festlegen, einen Link hinzufügen und die Textfarbe ändern.