Landing Page Coupon widget

The Coupon widget helps you add discount coupons to your landing pages. You can add multiple coupons within the same widget and also define their validity periods.

How to use a Coupon Widget in a Landing Page?

Step 1

Use the Main Menu on the left to create a landing page and subsequently navigate to the landing page builder.

Step 2

Add a Coupon widget to your landing page

The blank area on the left is the Work area where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as widgets.

In order to add a coupon to your landing page, drag and drop the Coupon widget into the work area.

Landing page builder coupon widget

Step 3

Upload coupon images and define the coupon validity period.

As you drop the widget into the work area, the widget settings are displayed on the right (as highlighted in the screenshot below). Use the Pick File button under these settings to upload appropriate images for the coupon.

Coupon upload and settings for landing page coupon validity

Once you select the images, these images get displayed in the same Settings section (as highlighted in the screenshot below).

Define coupon, validity for start and end date time for landing page

  • Enter suitable names for the added coupons, and
  • Define the validity period for the coupons by entering the start and end dates.

Step 4

Enter appropriate Coupon Action texts.

Under the Settings tab, open the Coupon Actions sub-tab.

Enter appropriate coupon action texts - Landing Page Builder

Under the Coupon Display Style, there are two checkboxes available:

  • Split into Multiple Columns:
    • If this box is unchecked, then, in the case of multiple coupons, only two coupons will be displayed on the landing page at a time. A horizontal scroll will be added for the user to access the different coupons.
    • If this box is checked, all the coupons will be displayed simultaneously in case of multiple coupons.
  • Hide Redeem Button:
    • Check this box if you wish to hide the redeem button for the added coupons.

      Set coupon action details for landing page

Also, as shown in the screenshot below:

  • Use the first field to enter the text that appears against the redeem button.
  • In the second field enter the text that appears as confirmation text before a user redeems a coupon.
  • Use the third field to enter the text that appears when a user has redeemed the coupon.
  • Use the last field to enter the text that appears when a user tries to redeem a coupon that has already been redeemed.

Step 5

Style your Coupon widget

Use the options available under the Style tab to customize the widget as per your design preferences.

Scenario 1

In case you choose to split the coupons into multiple columns as explained in Step 4 above, you’ll have the following styling options available for the coupon widget:

Landing page widget coupon styling

Herein, use the fields:

5.1 Coupon Font settings and Background color

  • Button Color to change the color of the redeem button.
  • Border Size and Color to customize the border of the redeem button (use the subsequent sizing bar to adjust the thickness of the border)
  • Border Style to change the type of button border – solid, dotted, etc.,
  • Rounded corners sizing bar to add rounded corners to the redeem button.

5.2 Button Text Style

Use the fields available in this section to edit the font style, color, font family, and font-weight of the redeem button text.

5.3 Coupon Setting

Use the fields available in this section to edit the size and alignment of the coupons and redeem buttons with respect to the work area’s width.

Scenario 2

In case you choose to display two coupons at a time, you’ll have the option of editing the size and alignment of the coupons with respect to the work area’s width.

Click Save, and that’s it!

You have successfully added discount coupons to your landing page!

Let’s proceed, and have a look at how to add a countdown timer to a landing page using the Countdown Widget!