Liquid Section

Overview

The Liquid Custom Section allows you to create fully customized layouts and content within the gamification widget using the Liquid templating language.

With this section type, you can:

• Build a personalized overview page.

• Display only the data you need (e.g., missions, tournaments, mini-games, store items).

• Choose from predefined templates or start from scratch with your own Liquid code.

In a nutshell, to build a Liquid template, you need to create HTML that looks like this:

<!-- 
  Missions array contains both - missions and badges, 
  here we filter missions only
-->
{% assign missions = missions | where: "type", "mission" %}


<div>
  <!-- Iterate over missions -->
  {% for mission in missions %}
    <!-- Show mission name as link that will trigger overlay popup with details -->
    <div onclick="openMission({{ mission.id }})">
      {{ mission.name }}
    </div>
  {% endfor %}
</div>

In terms of setup, the Liquid Section works similarly to other custom section types; you can configure its name, icon, visibility period, and target segment of users, just as you do for any other custom section.

You can start from one of the following templates:

• Overview Template – A general layout using Missions, Store Items, and Mini-Games.

• Missions Template – Focused on displaying and customizing mission content.

• Level Map Template – Used for building and styling a level map with position and background customization.

• Custom Template – A blank canvas where you build the section from scratch.

💡 These Templates serve as a starting point. You can modify them as needed.

To work effectively with Liquid-based templates, a solid understanding of HTML and CSS is required. Familiarity with JavaScript is also helpful. We also recommend reviewing the official Liquid documentation to gain a comprehensive understanding of the templating engine’s capabilities.

You can use the following gamification entities in your Liquid templates:

• Missions

• Store Items

• Tournaments

• Mini-Games

• Levels

• Jackpots

• Bonuses

• Leaderboards

• Badges

• And user profile data, including the number of points, gems, diamonds, nickname, avatar, number of unread inbox messages, and the user's current level

Important note: Ensure that you apply your brand styles by replacing all default colors, fonts, and visual elements.

How to Create a Liquid Custom Section

1. Create the Section

• Go to Custom Sections and select ‘Create Liquid Section’.

• The Core Setup works the same as in other section types.

1. Choose a Template

• In the Section Setup, select a predefined template or start with a blank custom template.

• In the Entity Data dropdown, choose which data types to include (e.g., missions, store items).

⚠️ If using a predefined template and adding more data types, you'll need to manually update the Liquid code to display the new data. ⚠️

1. Build the Content

   • Go to the Page Content tab to preview and edit the layout.

   • Choose a user to preview how data will appear.

4. Finalize

• Once your design is complete, save the section and enable it under Label Settings.

Templates

Overview Template

With the ‘Overview Template’, you can customize the overview screen by selecting which data to display (e.g., Locked Missions, Free-to-Play Mini-Games), adjusting visual elements such as text, colors, and chip shapes, and deciding what content to show or hide. The default data sources for this template are Missions, Store items, and Minigames; however, you can replace any of these with other data types, such as tournaments. For example, you can show Missions, Store items, and Tournaments.

Keep in mind that in order to expose mini-games in the overview, the mini-game should have a Promo image and promo text set.

Missions Template

Use the ‘Missions Template’ to build and personalize the Missions section by selecting specific missions to display, customizing mission card design (colors, shapes, layout), and modifying and configuring tabs.

Level Map Template

Use this template to design a visual Level Map. You can adjust the positions of the levels as needed, customize the colors, upload background images for both desktop and mobile devices, and tailor the level pop-up display. You can also hide the level name from the map or move the level name of the top, for example.

• Keep in mind that when uploading a background image for the map, you need to populate the correct aspect ratio of the uploaded image in the Liquid (for both desktop and mobile).

• The width of the desktop image should be 800px, and the height is not limited, as the end-user will be able to scroll down to see levels. The width of the mobile image should be 800px, and the minimum height should be 2000px.

Liquid Data Keys

Use these keys to access gamification data in your Liquid code:

For Missions	missions
For Badges	badges
Store Items	items
Tournaments	tournaments
Mini-Games	miniGames
Levels	levels
Bonuses	bonuses

User Info Access

User info is always available. Use the following to access balances:

Points   → {{ userInfo.ach_points_balance }}
Gems     → {{ userInfo.ach_gems_balance }}
Diamonds → {{ userInfo.ach_diamonds_balance }}

To Access the User info:

Username → {{ userInfo.public_username }}
Avatar image → {{ userInfo.avatar_url }}
Current level name → {{ userInfo.ach_level_current }}
Unread inbox count → {{ userInfo.core_inbox_unread_count }}
Current level image for user → {{ userInfo.currentLevel.level_public_meta.image_url }}

Examples

Avatar:

<div>
    <img class="user-avatar" src="{{userInfo.avatar_url}}" width="100px" height="auto"/>
  </div> 

Current level image:

<div>
    <img src="{{userInfo.currentLevel.level_public_meta.image_url}}" width="100px" height="100px"/>
  </div>

Functions

For each entity's data, you can use targeted functions to open an overlay popup with details of the entity or to be navigated to the page (such as tournaments):

• Missions: openMission({{ mission.id }})

Example: <div class="missions" onclick="openMission({{ mission.id }})">

• Badges: openBadge({{ badge.id }})

Example:  <div class="badges" onclick="openBadge({{ badge.id }})">

⚠️For Missions and Badges, you will need to specify the type:

{% assign missions = missions | where: "type", 'mission' %}
{% assign badges = badges | where: "type", 'badge' %}

• Store: openStore({{ item.id }})

Example: <div class="store-item" onclick="openStore({{ item.id }})">

• Levels: openLevel({{level.id}})

Example: <div class="levels" onclick="openLevel({{level.id}})">

• Bonuses: openBonus({{ bonus.bonus_id }})

Example: <div class="bonuses" onclick="openBonus({{ bonus.bonus_id }})">

• Tournaments: openTournament({{ tournament.instance_id}})

Example: <div class="tournament-card" onclick="openTournament({{ tournament.instance_id }})">

Mini-games: openMiniGame({{ game.id }})

Example: <div class="mini-game-card" onclick="openMiniGame({{ game.id }})">

Deep link usage:

You can trigger deep links using the dp() function in HTML elements like buttons:

<button onclick="dp('dp:gf_store')">Open Store</button>

You can see all deep links here