I have an exisiting site in which I need to ad a gamified optin for a mystery prize. And example is this site: dadfuel.com
however, I want my style to be much better than this, and to be gamified. but the dadfuel has all the functionality of how the coupon automatically applies itself, which is one of the most important parts.
But i need the discount prize to be very specific to what it does and how it interacts with the rest of the website. I prefer no coding, as it can slow down the site, but minimal can be acceptable.
My site is built on WordPress, and I use FunnelKit (formerly WooFunnels) for the cart + WooCommerce.
I use Elementor for all the building of the front end look.
and the site is hosted on WP Engine.
All changes must be reflowable for mobile and desktop.
Pay attention to point 6, as it involves cloning a few pages form one elementor to another elementor url to make this all on one site to work properly.
Ok, so on the main landing page i need:
1) Button that displays text for "Mystery Gift, Up to 100% off" (says this on 2 lines within the button). Button needs to stick to bottom of the screen on page scroll.
2) On button click, it opens a pop up which shows 3 present boxes to choose from, in which one of them may contain a 100% discount. (ps. i would like the"pop up" display action to slide out from the side of the screen. It looks much cleaner this way)
3)Each box is set to the 100% discount.
4) When they select the box, "You Won!" appears on the screen, and a burst of confetti.
5) Input Field fades in below the wheel that asks them to enter their email. and small text that says "100% off will automatically be applied at checkout."
6)If they enter their email and then press the button to submit, it takes them to a page that i am referring to as the "product pricing reveal page". This will show them the discount applied in a automatically updated field, a few more video reviews, the money back guarantee section, and another review section. (those front end sections are done, but need to be cloned over to the main url. I am currently using two urls because of a previous design flaw).
7)Once the "Product Pricing Reveal Page" loads, a timer needs to start for 10min, and stick to the bottom of the screen. this is the amount of time they have to claim the discount. (this timer will need to carry over to the final checkout page with the correct timing)
8) on button click to ad to cart, the FunnelKit slide out cart will need to appear, which also shows the 100% off discount. (You will need to make this cart)
9) on button click of the slide out cart screen, it will go to the final checkout page. The checkout page should look similar to a Shopify checkout page (most of these are prebuilt in FunnelKit). as i mentioned before the timer needs to carry over.
10) If the timer runs out, the checkout page needs to refresh, and the discount disappears. and if they go back to the beginning and try to to pick the prize again, it will only give them a max 50% off..for any of the 3 boxes.
11) The checkout page needs to display small text the the 100% free trial is part of a 14 day trial subscription. that after 14 days they willl be billed for the product. they can cancel at anytime before 14 days if they dont like the product. Otherwise, as part of the special deal, they will be billed a special discount of 40% off if they continue to use the product.
12) I have an Upsell Funnel series that takes place after the purchase that will need to be cloned into the new URL.
13) I need will need the thank you page, and certain elements of the checkout page to say very specific things in specific areas.