No-code Gamification Templates

Overview

MoEngage provides no-code gamification templates for your In-App Messaging campaigns. You can customize these templates fully in an editor that does not require you to write code.

To access these templates, perform the following steps:

Navigate to the Content step of the In-App campaign creation page.
From the side menu, under Filter by editor section, select No code gamification.

MoEngage provides four types of Spin the wheel templates.

Screenshot 2025-09-09 at 12.31.54 PM.png

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

info	Information 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.

Screenshot 2025-09-09 at 1.51.21 PM.png

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.

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

Screenshot 2025-07-21 at 11.55.03 AM.png

Configure the Spin Wheel Tab

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

2025-09-09_11-52-29 (1).gif

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 View portrait and landscape. Allowed device types: Select Mobile, Tablets, TV OS, 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.

2025-09-09_11-59-38 (1).gif

Section	Customization options
Template Settings	Allowed device orientation: Select Portrait, Landscape, or both. Allowed device types: Select Mobile, Tablets, or TV OS. 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.

2025-09-09_12-01-39 (1).gif

Section	Customization options
Template Settings	Allowed device orientation: Select Portrait, Landscape, or Both. Allowed device types: Select Mobile, Tablets, or TV OS. 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: An event captured upon spin completion, 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.

Frequently Asked Questions (FAQs)

arrow_drop_down 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.

arrow_drop_down 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.

arrow_drop_down How can I track which coupon a user wins?

The Response submitted event, which is tracked automatically for Spin the Wheel, 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.