No-code Gamification Templates

Overview

MoEngage provides no-code gamification templates for your In-App Messaging campaigns, including:

• Spin the wheel
• Scratch cards
• Countdown timers

These templates are fully customizable in an editor that does not require you to write code. You can create and launch these campaigns without needing an update to your app’s SDK.

All gamification templates work with your existing MoEngage SDK integration. You can start creating and launching these campaigns immediately.

Spin the Wheel Template

The Spin the Wheel template allows you to create an interactive prize wheel to engage and reward your users.

Use cases

• Distribute rewards: Offer users a chance to win discounts, special offers, or other rewards in an engaging way.
• Increase user engagement: Add an element of fun to your app to encourage repeat visits and longer session times.
• Generate leads: Require users to enter their email address or phone number for a chance to spin the wheel, helping you capture new leads.

MoEngage provides four types of Spin the wheel templates.

In the next section, we will discuss how to configure these templates.

The editor for this template is organized into three main tabs: Spin wheel, Winning screen, and Losing screen.

Configure the Spin Wheel Tab

On the Spin wheel tab, you can customize the main appearance and behavior of the wheel itself.

Section	Customization options
Template Settings	Allowed device orientation: Select Portrait, Landscape, or both. You can preview the template in the desired orientation. Under the Preview section, click Viewportrait and landscape. Allowed device types: Select Mobile, Tablets, TVOS, or all. Template background image: Set a background by uploading an image, providing an image URL, or selecting a background color. Close button: Configure the display, type, and placement (Right/Left) of the close button. Border: Adjust the template’s border width, radius, and color.
Text	Customize the Heading and Subheading. For each, you can edit the text content, font size, color, alignment, width, margin, padding, and border. You can also add actions.
Customize spin wheel	Wheel and pointer size: Select Small, Medium, or Large. Pointer position: Adjust the position of the pointer. Border: Set the wheel’s border width and color.
Wheel sectors	Add/Remove Sectors: Configure up to ten sectors. Sector Configuration: For each sector, you can set the Title, assign a Coupon code list, and add an optional image. Note: You can add a personalized coupon code. To do so, follow these steps: Enter @ in the Coupon code field. Go to the Coupons tab and select the desired coupon from the list. For more information, refer here. Set win %: Set a numerical weight to control the probability of landing on a sector. The chance to win is auto-calculated from these weights. Losing option: Designate a sector as a non-winning outcome. Frequency cap: Set a limit on how many times a specific reward can be won.
Lead generation customisation	Configure the input fields for capturing user data. Customize the Field size, add up to two Field types (Email, Text, Date, Number, Telephone, DateTime), Font size, Font color, Background color, and Border. For the selected Field type, you can select the desired User attributes from the list. Configure the Terms and Conditions. You need to add text for the terms and conditions. Customize the Form submit button by editing its text, font size, font color, button color, and radius.

Configure the Winning Screen Tab

On the Winning screen tab, you can customize the screen that appears when a user wins a prize. This includes celebratory elements like confetti effects and the coupon code they have won.

Section	Customization options
Template Settings	Allowed device orientation: Select Portrait, Landscape, or both. Allowed device types: Select Mobile, Tablets, or TVOS. Template background image: Set a background by uploading an image, providing an image link URL, or selecting a background color. Close button: Customize the display, select a button type (for example, Black thin - high res), and set its placement (Right/Left). Border: Adjust the template’s border width, radius, and color.
Image	Template background image: Set a background by uploading an image or providing an image link URL. Width, margin and padding: Adjust the width, margin (top, right, bottom, left), and padding (top, right, bottom, left) for the image. Border: Adjust the image’s border width, radius, and color. Actions: Add actions to the image.
Text	Heading: Customize the heading text, font size, font color, background color, and an option for a custom font. Width, margin and padding: Adjust the width, margin (top, right, bottom, left), and padding (top, right, bottom, left) for the text. Border: Adjust the text’s border width, radius, and color. Actions: Add actions to the text.
Coupon box	Coupon box type: Select Filled, Outlined, or Text. Text and styling: Enter the coupon code text and customize its font size, font color, and background color. You can also use a custom font. Give copy icon: Enable or disable the display of a copy icon and set the icon’s color. Width, margin and padding: Adjust the width, margin, and padding for the coupon box. Border: Adjust the border width, radius, and color.
Button	Button size: Choose from Small, Medium, or Large. Button type: Choose from Filled, Outlined, or Text. Text and styling: Customize the Button text, Font size, Font color, and Background color. You can also use a custom font. Border: Adjust the button’s border width, radius, and color. Actions: Set a custom action for the button, such as Navigation (Navigate to screen, DeepLink, Rich landing), and add key-value pairs if needed.

Configure the Losing Screen Tab

On the Losing screen tab, you can customize the screen for non-winning spins. You can configure a custom image and heading to display.

Section	Customization options
Template Settings	Allowed device orientation: Select Portrait, Landscape, or Both. Allowed device types: Select Mobile, Tablets, or TVOS. Template background image: Set a background by uploading an image, providing an image link URL, or selecting a background color. Close button: Customize the display, select a button type, and set its placement (Right/Left). Border: Adjust the template’s border width, radius, and color.
Image	Template background image: Set a background by uploading an image or providing an image link URL. Width, margin and padding: Adjust the width, margin, and padding for the image. Border: Adjust the image’s border width, radius, and color. Actions: Add actions to the image.
Text	Heading: Customize the heading text, font size, font color, background color, and an option for a custom font. Width, margin and padding: Adjust the width, margin, and padding for the text. Border: Adjust the text’s border width, radius, and color. Actions: Add actions to the text.
Button	Button size: Select Small, Medium, or Large. Button type: Select Filled, Outlined, or Text. Text and styling: Customize the Button text, Font size, Font color, and Background color. You can also use a custom font. Border: Adjust the button’s border width, radius, and color. Actions: Set a custom action for the button, such as Navigation (Navigate to screen, DeepLink, Rich landing), and add key-value pairs if needed.

Tracking and Analytics

MoEngage automatically tracks key interactions to help you measure campaign performance:

• In-app shown: The number of times the spin the wheel pop-up was shown.
• In-app clicked: The number of times the Spin button was clicked.
• Response submitted: A response_submitted event is captured when the copy coupon code icon is clicked, which includes properties like sector_text, coupon_code, sector_weight, and any captured lead generation data.

The campaign analytics page also includes a sector-wise reward distribution report. This report shows an aggregated analysis of how each sector performed.

Scratch Card Template

The Scratch Card template provides an interactive experience where users “scratch off” a surface to reveal a hidden message or offer.

Use Cases

• Daily rewards: Encourage daily app opens by offering a new scratch card each day with a chance to win.
• Create excitement: Build anticipation for a product launch or sale by letting users “reveal” a special offer.
• Interactive promotions: Replace static pop-ups with a fun scratch-off experience to improve interaction rates.

The editor for this template has three main tabs: Scratch Card, Winning Screen, and Losing Screen.

Configure the Scratch Card Tab

On the Scratch Card tab, you can customize the main appearance and behavior of the scratch card itself.

Section	Customization options
Template Settings	The options in this section are the same as the Template Settings for the Spin the Wheel template.
Scratch card Image	Template background image: Set a background by uploading an image or providing an image link URL. Width, margin and padding: Adjust the width, margin, and padding for the scratchable image.
Scratch card coupon	Add Reward: Add multiple rewards, each with a coupon code. Note: You can add a personalized coupon code. To do so, follow these steps: Enter @ in the Coupon code field. Go to the Coupons tab and select the desired coupon from the list. For more information, refer here. Set win %: Set a numerical weight to control the probability of winning a specific coupon. Losing option: Designate a coupon row as a non-winning outcome.
Text	The options in this section are the same as the Text settings for the Spin the Wheel template.

Configure the Winning screen tab

On the Winning screen tab, you can customize the screen that appears after a user scratches to reveal a winning prize. The settings in this section are the same as the Winning screen for the Spin the Wheel template.

Configure the Losing Screen Tab

On the Losing screen tab, you can customize the screen that appears for a non-winning outcome. The settings in this section are the same as the Losing screen for the Spin the Wheel template.

Countdown Timer Template

The Countdown Timer template helps create a sense of urgency for a promotion or event.

Use cases

• Flash sales: Drive immediate purchases by showing a timer counting down to the end of a limited-time sale.
• Event promotion: Build anticipation for a webinar, product launch, or in-app event by counting down to the start time.
• Holiday campaigns: Create urgency around holiday shopping deadlines, such as “Order by midnight for Christmas delivery.”

The editor for this template has a single Timer screen tab.

Configure the Timer Screen Tab

On the Timer screen tab, you can customize the appearance and behavior of the countdown timer.

Section	Customization options
Template Settings	The options in this section are the same as the Template Settings for the previous templates.
Customize countdown timer	Timer style: Customize the Digit color, Digit background color, Separator color, Text color, and Text size. Time settings: Set the Start date & time and End date & time. Display options: Select to Show seconds, Show days, and Hide if days reach zero. Width, margin and padding: Adjust the width, margin, and padding for the timer widget. Border: Adjust the timer’s border width, radius, and color.
Text	The options in this section are the same as the Text settings for the previous templates.
Button	The options in this section are the same as the Button settings for the previous templates.

Frequently Asked Questions (FAQs)

How do I track clicks on custom buttons or links I add to the templates?

The template editor allows you to define actions for each button, including tracking a custom event. When you configure a button’s action, you can add a “Track Event” action and specify the event name and properties you want to capture.

Can I change the text on the Spin the Wheel button, such as "SPIN"?

Yes. The Spin Button component is fully customizable. You can change the text, font, color, and size directly in the editor without editing HTML.

How can I track which coupon a user wins?

The response_submitted event, which is tracked when a user clicks the copy coupon code icon, contains the coupon_code that was assigned to the user. You can analyze this event in your campaign analytics to see the distribution of coupons. For Scratch Cards, you can set up a custom event to track wins.

How can I prevent a user from seeing the Scratch Card again after they have won?

You can combine campaign-level frequency capping with segmentation. After a user wins, you can add a user attribute (for example, “scratch_card_winner = true”). You can then exclude users with this attribute from the campaign’s target segment to prevent them from seeing it again.

What happens when the Countdown Timer reaches zero?

When the timer reaches zero, the in-app campaign will be dismissed automatically. Ensure your call-to-action is clear to encourage users to act before the time runs out.

My campaign (Spin the Wheel/Scratch Card) used all my coupons, even with a low win rate. Why?

For In-App campaigns, a coupon code is “consumed” from your list every time the message is shown to a user (an impression), regardless of whether they win or lose.

MoEngage pre-fetches a coupon for every user who sees the campaign, even if they end up landing on a “Losing” sector.

Recommendation: To prevent running out of codes, ensure your coupon list has at least as many unique codes as the total number of impressions you expect the campaign to have. For example, if you have a segment of 200 users and you have configured your delivery controls to show the message 3 times per user, you will need at least 600 unique coupons (200 * 3), not just 200.
.