> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# No-Code Gamification Templates (OSM)

> Overview and configuration guide for Spin the Wheel and Scratch Card templates in On-site Messaging.

# Overview

MoEngage provides no-code gamification templates for On-site Messaging (OSM) campaigns, including:

* [Spin the wheel](#spin-the-wheel)
* [Scratch cards](#scratch-card)

These templates are fully customizable in an editor that does not require you to write code. You can create and launch these campaigns to increase user engagement on your website.

# Spin the Wheel

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

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/no-code-1.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=a60d1dbb52014d745b820e2f02f38738" alt="No Code 1" width="1788" height="1024" data-path="images/no-code-1.png" />

## Use cases

* **Capture leads:** Encourage users to sign up or provide their email/phone number to spin the wheel.
* **Distribute coupons:** Offer varying discount percentages (for example, "10% Off", "Free Shipping") as prizes.
* **Drive daily engagement:** Create "Daily Spin" campaigns to encourage users to return to your website.

## Configure the Template

After you select the template, customize it using the **Spin** and **Styling** tabs in the editor side panel.

To access these settings:

* Click the wheel element on the canvas and select the **Settings** icon from the floating toolbar.

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-2.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=e0af41f89dad9ead3883ce88dae1a4a9" alt="Nocode 2" width="2944" height="1426" data-path="images/nocode-2.png" />

## Configure the Default Styling

Under the **Styling** tab, select **Default**. This section lets you customize the wheel's appearance before the user interacts with it.

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-3.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=94b7534fd9ba6c8bf77d7bfd1c6b28e8" alt="Nocode 3" width="2260" height="1376" data-path="images/nocode-3.png" />

| Section                 | Customization options                                                                                                                                                                                                                                                                                                                                                             |
| :---------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Wheel Configuration** | <ul><li>**Wheel and pointer size:** Select **S** (Small), **M** (Medium), or **L** (Large).</li><li>**Use with form:** Toggle **On** to require users to fill out a form (for example, Email/Phone) before spinning. Toggle **Off** for an immediate spin action.</li><li>**Pointer position:** Choose the position of the winning indicator (for example, Right, Top).</li></ul> |
| **Colors**              | <ul><li>**Bg color:** Set the background color behind the wheel.</li><li>**Pointer color:** Set the color of the indicator arrow.</li><li>**Border color:** Set the color of the wheel's border.</li></ul>                                                                                                                                                                        |
| **Spin Button**         | <ul><li>**Spin button color:** Customize the background color of the button.</li><li>**Spin button text:** Enter the display text on the button (for example, "Spin to Win").</li><li>**Spin button text color:** Set the color of the button text.</li><li>**Spin button font size:** Adjust the text size.</li></ul>                                                            |
| **Layout & Borders**    | <ul><li>**Margin:** Adjust spacing outside the wheel container.</li><li>**Padding:** Adjust spacing inside the wheel container.</li><li>**Border width:** Set the thickness of the container border.</li></ul>                                                                                                                                                                    |

## Configure Wheel Sectors (Widgets)

To define prizes, probability, and appearance of the wheel sectors, configure the **Addable Widgets**. Each Widget corresponds to a specific sector on the wheel.

To access these settings:

1. Select the wheel element on the canvas.
2. On the floating toolbar, click the **Items** icon. The **Addable Widgets** panel appears on the right.

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode4.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=33db48ecadf81a085903b5f5e689e703" alt="Nocode4" width="2444" height="1362" data-path="images/nocode4.png" />

| Section               | Customization Options                                                                                                                                                                                                                                                                                                                                                                                              |
| :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Widget Management** | <ul><li>**Add New Widget:** Click the button at the bottom of the panel to add a new sector to the wheel.</li><li>**Delete Widget:** Click the **Trash icon** on a widget card to remove that sector.</li><li>**Expand/Collapse:** Click the arrow on the widget card to show or hide details.</li></ul>                                                                                                           |
| **Widget Details**    | <ul><li>**Set win %:** Enter a numerical value to determine the probability of landing on this sector.</li><li>**Title:** Enter the text displayed on the sector (for example, "50% off", "Try Again").</li><li>**Coupon code:** Enter the coupon code associated with this prize (for example, KIWI\_100).</li><li>**Lose option:** Toggle this **On** if this sector represents a non-winning outcome.</li></ul> |
| **Styling**           | <ul><li>**Font size:** Adjust the size of the sector text.</li><li>**Font color:** Set the color of the sector text.</li><li>**Sector color:** Set the background color for this specific slice of the wheel.</li><li>**Upload image:** (Optional) Upload an icon or image to display on the sector instead of, or along with, text.</li></ul>                                                                     |

## Configure the Winning Screen

On the **Styling** tab, select **Winning Screen**. This allows you to customize the content revealed to users after a successful spin. This section is divided into three sub-tabs: **Image**, **Text**, and **Coupon box**.

### Image

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-5.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=2092b0e04e08ac27efbf58787b31ce19" alt="Nocode 5" width="2454" height="1242" data-path="images/nocode-5.png" />

| Section            | Customization Options                                                                                                                                                                                                                                                                                                                            |
| :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image Settings** | <ul><li>**Upload image:** Upload a custom image to display on the winning screen.</li><li>**Border color:** Set the color of the image border.</li><li>**Margin:** Adjust the outer spacing of the image.</li><li>**Padding:** Adjust the inner spacing of the image.</li><li>**Border width:** Set the thickness of the image border.</li></ul> |

### Text

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nococde6.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=3bbf9fd116ccea803df82c13f78d82ec" alt="Nococde6" width="2470" height="1356" data-path="images/nococde6.png" />

| Section              | Customization options                                                                                                                                                                                                                                                      |
| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text Styling**     | <ul><li>**Title:** Enter the congratulatory text (for example, "Congratulations, you won").</li><li>**Font size:** Adjust the size of the text.</li><li>**Font color:** Choose the text color.</li><li>**Bg color:** Set the background color for the text area.</li></ul> |
| **Layout & Borders** | <ul><li>**Margin & Padding:** Adjust spacing around the text.</li><li>**Border width & radius:** Customize the thickness and roundness of the border.</li><li>**Border color:** Set the color of the text area border.</li></ul>                                           |

### Coupon Box

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-7.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=78ca65abb4dd5d4c434fe84d07b529fa" alt="Nocode 7" width="2312" height="1376" data-path="images/nocode-7.png" />

| Section              | Customization Options                                                                                                                                                                                                                                                 |
| :------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Box Settings**     | <ul><li>**Box size:** Select **S** (Small), **M** (Medium), or **L** (Large).</li><li>**Box type:** Choose the style (for example, **Solid**).</li><li>**Box color:** Set the main color of the coupon box.</li><li>**Bg color:** Set the background color.</li></ul> |
| **Text & Icons**     | <ul><li>**Font size & color:** Customize the coupon code text appearance.</li><li>**Icon color:** Set the color for the copy icon.</li><li>**Give copy icon:** Toggle **On** to allow users to copy the code with one click.</li></ul>                                |
| **Layout & Borders** | <ul><li>**Margin & Padding:** Adjust spacing around the coupon box.</li><li>**Border width, radius & color:** Customize the border appearance.</li></ul>                                                                                                              |

## Configure the Losing Screen

On the **Styling** tab, select **Losing Screen**. This allows you to customize the view displayed to users when they do not win a prize. This section is divided into two sub-tabs: **Image** and **Text**.

### Image

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-8.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=694716c96eddc52108c73f8be060dec2" alt="Nocode 8" width="2340" height="1164" data-path="images/nocode-8.png" />

| Section            | Customization Options                                                                                                                                                                                                                                                                                                                           |
| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image Settings** | <ul><li>**Upload image:** Upload a custom image to display on the losing screen.</li><li>**Border color:** Set the color of the image border.</li><li>**Margin:** Adjust the outer spacing of the image.</li><li>**Padding:** Adjust the inner spacing of the image.</li><li>**Border width:** Set the thickness of the image border.</li></ul> |

### Text

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-9.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=2cfceb6f0959340f2a2a1bf07acc4762" alt="Nocode 9" width="2370" height="1288" data-path="images/nocode-9.png" />

| Section              | Customization Options                                                                                                                                                                                                                                                |
| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text Styling**     | <ul><li>**Title:** Enter the non-winning text (for example, "Better luck next time").</li><li>**Font size:** Adjust the size of the text.</li><li>**Font color:** Choose the text color.</li><li>**Bg color:** Set the background color for the text area.</li></ul> |
| **Layout & Borders** | <ul><li>**Margin & Padding:** Adjust spacing around the text.</li><li>**Border width & radius:** Customize the thickness and roundness of the border.</li><li>**Border color:** Set the color of the text area border.</li></ul>                                     |

# Scratch Card

The Scratch Card template creates a virtual "scratch-off" experience. Users interact with the campaign by scrubbing their cursor or finger over an image to reveal a hidden prize or message underneath.

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-10.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=96efe229b315d69f73b61708a1836755" alt="Nocode 10" title="Nocode 10" style={{ width:"45%" }} width="1166" height="1322" data-path="images/nocode-10.png" />

## Use Cases

* **Reveal mystery discounts:** Build anticipation by hiding the discount amount (for example, "Scratch to reveal your deal").
* **Contest entries:** Use a "Scratch and Win" mechanic for instant-win contests.
* **Exclusive promos:** Engage users by requiring an interaction to access a promo code.

## Configure the Template

To configure the Scratch Card, you will use the floating toolbar and the configuration side panel.

To access these settings:

1. Click the scratch card element on the canvas.
2. On the floating toolbar, click the **Settings** icon.
3. Click the square icon.

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode11.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=1aa9de3e622e3be23217b9542600d242" alt="Nocode11" title="Nocode11" style={{ width:"52%" }} width="1846" height="1388" data-path="images/nocode11.png" />

## Configure Default Styling

Under the **Styling** tab, select **Default**. This section controls the card's appearance before the user scratches it.

| Section             | Customization Options                                                                                                                                                                                                                                                      |
| :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Card Appearance** | <ul><li>**Bg color:** Set the background color for the scratch card container.</li><li>**Upload image:** Choose the "cover" image that users will scratch away (for example, a gift box, a pattern, or a "Scratch Here" graphic). You can upload a custom image.</li></ul> |
| **Behavior**        | **Use with form:** <ul><li>**Toggle On:** Requires the user to submit details (like email/phone) before they can scratch the card.</li><li>**Toggle Off:** Allows immediate interaction with the scratch card.</li></ul>                                                   |
| **Layout**          | <ul><li>**Margin:** Adjust the spacing outside the scratch card element.</li><li>**Padding:** Adjust the spacing inside the scratch card element.</li></ul>                                                                                                                |

## Configure the Winning Screen

On the **Styling** tab, select **Winning Screen**. This section defines the content revealed when the user successfully scratches the card and wins.

The Winning Screen has three sub-tabs: **Image**, **Text**, and **Coupon box**.

### Image

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocde12.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=5515146fb9246fef8dd04575b3e79dba" alt="Nocde12" title="Nocde12" style={{ width:"61%" }} width="1860" height="1366" data-path="images/nocde12.png" />

| Section            | Customization Options                                                                                                                                                                                                                                                                                                                                                                                              |
| :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image Settings** | <ul><li>**Upload image:** Upload a custom image to display as the main visual.</li><li>**Card Bg color:** Set the background color of the card that is revealed underneath the scratch layer.</li><li>**Border color:** Set the color of the image border.</li><li>**Margin & Padding:** Adjust the outer and inner spacing around the image.</li><li>**Border width:** Set the thickness of the border.</li></ul> |

### Text

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode-13.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=50bd130d3a1c750ce9f8ddc85927060c" alt="Nocode 13" width="1966" height="1380" data-path="images/nocode-13.png" />

| Section              | Customization Options                                                                                                                                                                   |
| :------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text Styling**     | <ul><li>**Title:** Enter the congratulatory text.</li><li>**Font size & color:** Customize text appearance.</li><li>**Bg color:** Set the background color for the text area.</li></ul> |
| **Layout & Borders** | <ul><li>**Margin & Padding:** Adjust the spacing around the text.</li><li>**Border width, radius & color:** Customize border appearance.</li></ul>                                      |

### Coupon Box

<img src="https://mintcdn.com/moengage/Gd9uSR1vJqhsmAhn/images/nocode14.png?fit=max&auto=format&n=Gd9uSR1vJqhsmAhn&q=85&s=cf7b52ce1c3f3cbf71c2f6db0a1a5289" alt="Nocode14" title="Nocode14" style={{ width:"57%" }} width="1864" height="1390" data-path="images/nocode14.png" />

| Section          | Customization Options                                                                                                                                      |
| :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Box Settings** | <ul><li>**Box size, type & color:** Customize the coupon container appearance.</li><li>**Bg color:** Set the background color of the coupon box.</li></ul> |
| **Text & Icons** | <ul><li>**Text styling:** Adjust font size and color of the code.</li><li>**Copy icon:** Enable a copy button and set its color.</li></ul>                 |

## Configure the Losing Screen

On the **Styling** tab, select **Losing Screen**. This allows you to customize the view displayed when users do not win a prize.

### Image

| Section            | Customization Options                                                                                                                                                                                                                                              |
| :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image Settings** | <ul><li>**Upload image:** Upload a custom image to display.</li><li>**Border color:** Set the color of the image border.</li><li>**Margin & Padding:** Adjust spacing around the image.</li><li>**Border width:** Set the thickness of the image border.</li></ul> |

### Text

| Section              | Customization Options                                                                                                                                                                                                                   |
| :------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text Styling**     | <ul><li>**Title:** Enter the non-winning text.</li><li>**Font size & color:** Customize text appearance.</li><li>**Bg color:** Set the background color for the text area.</li></ul>                                                    |
| **Layout & Borders** | <ul><li>**Margin & Padding:** Adjust spacing around the text.</li><li>**Border width, radius & color:** Customize the thickness and roundness of the border.</li><li>**Border color:** Set the color of the text area border.</li></ul> |