Smart Coupon Widget

The Smart Coupon (Elementor Widget and Gutenberg Block) allows you to display smart coupons on your website. Before proceeding with this guide, ensure you've set up a Smart Coupon by following the instructions in our Smart Coupon setup article.

1. Access the Elementor Editor: Open the page where you want to add the Smart Coupon widget using Elementor.

2. Locate the Widget: In the Elementor sidebar, search for the "Smart Coupon" widget. You can do this by typing "Smart Coupon" into the search bar or by browsing the widgets available.

3. Drag and Drop the Widget: Click on the Smart Coupon widget and drag it to the desired section of your page.

4. Customize Content Settings: With the widget in place, you can start customizing its content on the Content tab:

Heading: Set the main heading of the coupon, for example, "You unlocked a new coupon!"
Description: Write a brief message or description for your customers.
Show Expiration Date: Toggle this to display the expiration date of the coupon.
Prefix Text: Add a prefix to the expiration date, like "Expires on: ".
Call to Action Button:
Show Button: Enable this to include a call-to-action button.
Button Text: Enter the text for the button, such as "SHOP NOW".
Button URL: Set the destination URL where the button will redirect users.

5. Style Your Widget: Switch to the Style tab to adjust the visual aspects of your coupon.

6. Preview and Adjust: Always preview your page to see how the widget appears in real-time. Make any necessary adjustments to ensure it looks great on all devices.

8. Save and Publish: Once you're satisfied with the appearance and functionality, click the Update button to save your changes and publish the coupon on your site.

Open the Sales Page step in your funnel (or any other page you consider to display a smart coupon) in the block editor.
In the block editor, insert the the Smart Coupon block.

This block will automatically adjust based on your pre-defined coupon rules (you can create and define coupon rules from WordPress admin > SellKit > Coupons).
You can modify the content and customize the appearance using the options in the block settings in the sidebar.

Keep the messaging concise and clear to encourage users to take action.
Ensure that the style of the widget aligns with your brand's visual identity.
Test the widget on various devices to ensure a responsive design.

By following these steps, you can effectively integrate the Smart Coupon widget into your website, creating an engaging and functional experience for your customers.

Smart Coupon Widget

Step-by-Step Guide to Using the Smart Coupon Widget in Elementor

1. Access the Elementor Editor: Open the page where you want to add the Smart Coupon widget using Elementor.

2. Locate the Widget: In the Elementor sidebar, search for the "Smart Coupon" widget. You can do this by typing "Smart Coupon" into the search bar or by browsing the widgets available.

3. Drag and Drop the Widget: Click on the Smart Coupon widget and drag it to the desired section of your page.

Heading: Set the main heading of the coupon, for example, "You unlocked a new coupon!"

Description: Write a brief message or description for your customers.

Show Expiration Date: Toggle this to display the expiration date of the coupon.

Prefix Text: Add a prefix to the expiration date, like "Expires on: ".

Call to Action Button:

Show Button: Enable this to include a call-to-action button.

Button Text: Enter the text for the button, such as "SHOP NOW".

Button URL: Set the destination URL where the button will redirect users.

5. Style Your Widget: Switch to the Style tab to adjust the visual aspects of your coupon.

6. Preview and Adjust: Always preview your page to see how the widget appears in real-time. Make any necessary adjustments to ensure it looks great on all devices.

8. Save and Publish: Once you're satisfied with the appearance and functionality, click the Update button to save your changes and publish the coupon on your site.

Step-by-Step Guide to Using the Smart Coupon Widget in Block Editor

Tips for Optimizing Your Smart Coupon Widget

Keep the messaging concise and clear to encourage users to take action.

Ensure that the style of the widget aligns with your brand's visual identity.

Test the widget on various devices to ensure a responsive design.

By following these steps, you can effectively integrate the Smart Coupon widget into your website, creating an engaging and functional experience for your customers.

Smart Coupon Widget

Step-by-Step Guide to Using the Smart Coupon Widget in Elementor

1. Access the Elementor Editor: Open the page where you want to add the Smart Coupon widget using Elementor.

2. Locate the Widget: In the Elementor sidebar, search for the "Smart Coupon" widget. You can do this by typing "Smart Coupon" into the search bar or by browsing the widgets available.

3. Drag and Drop the Widget: Click on the Smart Coupon widget and drag it to the desired section of your page.

Heading: Set the main heading of the coupon, for example, "You unlocked a new coupon!"

Description: Write a brief message or description for your customers.

Show Expiration Date: Toggle this to display the expiration date of the coupon.

Prefix Text: Add a prefix to the expiration date, like "Expires on: ".

Call to Action Button:

Show Button: Enable this to include a call-to-action button.

Button Text: Enter the text for the button, such as "SHOP NOW".

Button URL: Set the destination URL where the button will redirect users.

5. Style Your Widget: Switch to the Style tab to adjust the visual aspects of your coupon.

6. Preview and Adjust: Always preview your page to see how the widget appears in real-time. Make any necessary adjustments to ensure it looks great on all devices.

8. Save and Publish: Once you're satisfied with the appearance and functionality, click the Update button to save your changes and publish the coupon on your site.

Step-by-Step Guide to Using the Smart Coupon Widget in Block Editor

Tips for Optimizing Your Smart Coupon Widget

Keep the messaging concise and clear to encourage users to take action.

Ensure that the style of the widget aligns with your brand's visual identity.

Test the widget on various devices to ensure a responsive design.

By following these steps, you can effectively integrate the Smart Coupon widget into your website, creating an engaging and functional experience for your customers.

Related Articles