In a regular widget, you add the Promo Code element from the Add component panel in the editor. In a gamified widget, the code is configured as part of a prize and appears on the reward and success pages.
Claspo does not generate promo codes. So, you’ll need to create and configure the code on your website or ecommerce platform first, then add the same code to your Claspo widget.
How promo codes work in different widget formats
In Claspo, promo codes are set up and shown differently depending on the widget format. First, find the scenario that matches your widget.
Announcement or promo widget
This type of widget shows an offer without collecting visitor data. Add the promo code component directly to the page, and visitors will see the code as soon as the widget appears. They can copy it right away.
Signup form
If the widget collects an email or phone number, you can keep the promo code for the Success page. This way, people see it only after they submit the form.
Gamified widget
A gamified widget can work with or without a signup form. Promo codes are set in the game’s reward settings.
If there is no signup form, the code appears after the game. If the widget also asks for an email or phone number, the code comes after both steps are complete.
You can also start with a template. Promo, signup, and gamified templates already place the code where it makes sense for that flow.
Add or change a promo code in a regular widget
You can change any template to fit a different scenario. For example, here is how to turn a signup form into a simple promo widget where the code is the main element.
1. Open the template in the Claspo editor.
2. Remove anything you no longer need. In this example, delete the email field, consent text, and the Success, Existing, and Error pages.
3. Find Promo code in the Add component panel and drag it to the required place in the widget.
4. Replace the default value, such as PROMO_10, with yours. In our example, we use HOT_DAYS_10. Select the Promo Code component and open the General tab. In the Discount section, click the pencil icon.
Enter your promo code in the Discount code field and click Done.
Values such as PROMO_10 are placeholders. They do not create a discount, so remember to replace them with a valid code.
Customize the promo code component
Select the Promo Code component, and its settings will open in the panel on the right. Use the Style tab to change its appearance.
You can adjust the component size, font, text color, alignment, spacing, border, shadow, and corner radius.
A background color or image can also help the code stand out. In our example, we added a solid background behind it. The Icon settings let you change the copy icon, its color, size, and position. You can also replace it with a scissors icon placed on the border.
To add a hover animation, switch on Hover effects and choose the effect you prefer.
Count promo code clicks as a target action
Select the Promo Code component and open the General tab. Here you can choose what happens when visitors interact with the code.
By default, clicking the promo code in a published widget copies it to the visitor’s clipboard.
Turn on Count as a target action to track a click on the promo code as the widget’s goal completion.
Use this option when copying the code is the main action you want visitors to take. These clicks will then be included in the widget’s target action results.
Set up promo codes in gamified widgets
In a gamified widget, promo codes are managed through the game settings.
Click the game component. In our example, this is Spin the wheel.
In the panel on the right, click Edit rewards.
Find the reward you want to change and hover over its value in the Name or discount column. The pencil and trash icons will appear on the right.
Click the pencil icon to edit the reward and its promo code.
Click the trash icon to remove this reward option.
4. In the Edit reward window, update the following fields:
Name and discount — enter the reward visitors will see. You can use any text that fits your offer, such as 10% off, $5 off, Free shipping, BOGO, Free gift etc.
Discount — enter the promo code associated with this reward.
Click Done to save your changes.
5. To add another prize option, click Add reward.
Complete the Name and Discount code fields, and click Done.
The code shown on the Reward page depends on the result of the game. For example, if a visitor wins 10% off, the promo code assigned to that reward will appear automatically.
Note
The prize pool is saved at the widget level. If you replace one game component with another — for example, switch from Spin the wheel to Gift box — your reward names, promo codes, and chances to win will remain unchanged. |
To customize the promo code shown on the Reward page, select the Promo Code component. Use the Style tab to change its appearance.
In the General tab, the Linked to the game toggle determines which promo code the component displays:
Keep it switched on to show the promo code associated with the reward the visitor wins. You will see the configured chances and promo codes below the toggle. To edit them, click go to the game component.
Switch it off if you want the component to display its own promo code, independent of the game result. You can then enter or change the code directly in the component settings.
You can also turn on Count as a target action to count promo code clicks as the widget’s goal completions.
Control repeated widget views and promo code use
Showing the widget once and limiting the promo code itself are two separate things. Claspo controls when the widget appears, while your ecommerce platform controls how the discount can be redeemed.
Stop showing the widget
Open the widget settings and go to Triggering → When to stop displaying. The available options depend on the widget type. You can stop showing it after a visitor:
closes the widget;
submits the form or plays the game;
clicks an element marked as a target action.
You can also keep the offer away from people who are already on your contact list. Open To whom and turn on Exclude existing subscribers.
Claspo can recognize existing subscribers even if they signed up outside Claspo, not just through another widget. Once a visitor is recognized as a subscriber, the widget will not appear. This setting also works for promo or gamified widgets that do not contain a signup form: once the visitor is recognized as a subscriber, the widget will not appear.
Set promo code limits in your store
Claspo displays the code, but it does not decide who can use it at checkout. Set those rules in Shopify, WooCommerce, or whichever platform processes your orders.
A static code shown in the Promo Code component cannot be securely tied to a particular email address or IP address. It can also be copied and shared. To prevent repeated or unauthorized use, apply the necessary limits in your store’s discount settings.
Shopify users can follow this guide to set usage limits, active dates, and other discount rules step by step.