{"id":2486,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-coupon-widget\/"},"modified":"2022-08-17T09:37:55","modified_gmt":"2022-08-17T09:37:55","slug":"landing-page-coupon-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/landing-pages\/builder\/coupon\/","title":{"rendered":"Landing Page Coupon Widget"},"content":{"rendered":"
\n

The coupon <\/strong>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.<\/p>\n

<\/div>\n

How to Use a Coupon Widget in a Landing Page?<\/h2>\n
<\/div>\n

Step 1 – Navigate to the Landing Page Builder<\/h3>\n

Use the Main Menu<\/strong> on the left to create a landing page<\/strong> and subsequently navigate to the Landing Page Builder<\/a>.<\/p>\n

<\/div>\n

Step 2 – Add a Coupon Widget to the Landing Page<\/h3>\n

The blank area on the left is the work area<\/strong> 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<\/a>.<\/p>\n

In order to add a coupon to your landing page, drag and drop the coupon <\/strong>widget into the work area.<\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Step 3 – Upload Coupon Images and Define the Coupon Validity<\/h3>\n

As you drop the widget into the work area, the widget Settings <\/strong>are displayed on the right (as highlighted in the screenshot below)<\/em>. Use the Pick File<\/strong> button under these settings to upload appropriate images for the coupon.<\/p>\n

<\/div>\n

\"Coupon<\/p>\n

<\/div>\n

Once you select the images, these images get displayed in the same Settings <\/strong>section (as highlighted in the screenshot below).<\/em><\/p>\n

<\/div>\n

\"Define<\/p>\n

<\/div>\n
    \n
  • Enter suitable names for the added coupons, and<\/li>\n
  • Define the validity period for the coupons by entering the start and end dates.<\/li>\n<\/ul>\n
    <\/div>\n

    Step 4 – Enter Appropriate Coupon Action Texts<\/h3>\n

    Under the Settings <\/strong>tab, open the Coupon Actions<\/strong> sub-tab.<\/p>\n

    \"Enter<\/p>\n

    <\/div>\n

    Under the Coupon Display Style<\/b>, there are three checkboxes available:<\/p>\n

    <\/div>\n

    \"Coupon<\/p>\n

      \n
    • Carousel<\/strong>\n
        \n
      • In this 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.\n
        <\/div>\n

        \"Coupon<\/p>\n

        Note:<\/strong> By default, this option will be selected.<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<\/li>\n

      • Multiple Columns<\/strong>\n
          \n
        • If this box is checked, all the coupons will be displayed simultaneously in case of multiple coupons.\n
          <\/div>\n

          \"Coupon<\/li>\n<\/ul>\n<\/li>\n

        • Hide the redeem button<\/strong>\n
            \n
          • Check this box if you wish to hide the redeem button for the added coupons.
            \n\"Coupon<\/p>\n

            Note:<\/strong> You can select this for both carousel and multiple columns.<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

            Also, as shown in the screenshot below:<\/strong>
            \n\"Coupon<\/p>\n

              \n
            • Use the first field to enter the text that appears against the redeem button.<\/li>\n
            • In the second field enter the text that appears as confirmation text before a user redeems a coupon.<\/li>\n
            • Use the third field to enter the text that appears when a user has redeemed the coupon.<\/li>\n
            • Use the last field to enter the text that appears when a user tries to redeem a coupon that has already been redeemed.<\/li>\n<\/ul>\n
              <\/div>\n

              Step 5 – Style your Coupon Widget<\/h3>\n

              Use the options available under the Style<\/strong> tab to customize the widget as per your design preferences.<\/p>\n

              <\/div>\n

              \"Landing<\/p>\n

              <\/div>\n

              Herein, use the fields:<\/p>\n

              5.1 Coupon Font settings and Background color<\/strong><\/h5>\n
                \n
              • Button Background Color<\/strong> to change the color of the redeem button.<\/li>\n
              • Border Size and Color<\/strong> to customize the border of the redeem button (use the subsequent sizing bar to adjust the thickness of the border)<\/li>\n
              • Border Style<\/strong> to change the type of button border \u2013 solid, dotted, etc.,<\/li>\n
              • Rounded Corners <\/strong>sizing bar to add rounded corners to the redeem button.<\/li>\n<\/ul>\n
                \n
                5.2 Button Text Style<\/strong><\/h5>\n

                Use the fields available in this section to edit the font style, color, font family, and font-weight of the Redeem button<\/strong> text.<\/p>\n

                \n
                <\/div>\n
                5.3 Coupon Setting<\/strong><\/h5>\n

                Use the fields available in this section to edit the size and alignment of the redeem button and popup window with respect to the work area\u2019s width.<\/p>\n<\/div>\n

                Redeem Confirmation Popup Design:<\/strong> Select this option to display a Popup window asking the audience if they\u2019re sure to redeem the coupon. You can edit the popup window design the way you like.<\/p>\n

                <\/div>\n

                \"Landing<\/p>\n

                <\/div>\n

                You\u2019ll see the following:<\/p>\n

                Popup Content Font and color settings<\/strong><\/h5>\n

                \"Popup<\/p>\n

                  \n
                • Popup Content Background Color<\/strong> to change the color of the popup window.<\/li>\n
                • Border Size and Color<\/strong> to customize the window\u2019s border (use the subsequent sizing bar to adjust the thickness of the border)<\/li>\n
                • Border Style<\/strong> to change the type of popup window border \u2013 solid, dotted, etc.,<\/li>\n
                • Rounded corners sizing bar<\/strong> to add rounded corners to the popup window.<\/li>\n<\/ul>\n
                  <\/div>\n
                  Popup Content Style<\/strong><\/h5>\n

                  Use the fields available in this section to edit the font style, color, font family, and font-weight of the Popup Window text.<\/p>\n

                  <\/div>\n

                  \"Landing<\/p>\n

                  <\/div>\n

                  Top Bottom Gap:<\/strong> Check this if you want to insert a gap between your coupon widget and any other widget above or below it.<\/p>\n

                  <\/div>\n

                  \"Top<\/p>\n

                  <\/div>\n

                  Click Save <\/strong>and that\u2019s it!<\/p>\n

                  <\/div>\n

                  \"Save<\/p>\n

                  <\/div>\n

                  You have successfully added a coupon to your landing page!<\/p>\n