Add and set up promo codes in Claspo widgets

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.

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 and are tied to the prize the visitor wins.

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.

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. Double-click the code text to select it. Replace the default value, such as SALE_15, with the code you created in your store. In our example, we use HOT_DAYS_10.

Values such as SALE_15 are placeholders. They do not create a discount, so remember to replace them with a valid code from your ecommerce platform.

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.

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.

In a gamified widget, promo codes are managed through the game settings rather than entered directly on the game page.

3. Add or edit the available rewards. For each one, you can:

4. Click Done to save the reward settings.

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.

To change how the promo code looks or works, open the Reward page and select the Promo Code component there. Use the Style tab for its design and the General tab for options such as target-action tracking or automatic application in Shopify.

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.

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:

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.

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.