I have an exisiting site in which I need to ad a optin, Game Wheel Spinner.
But i need the spinner 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 has a SpinTheWheel game for a discount. And ideally, the spinner starts spinning automatically once the popup is fully loaded WITHOUT the user having to press a button for it to spin. (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)Automatically set the first spin probabability to a wheel slice that displays "100% off Free Trial".
4) Text on the screen pops up that says "You Won!" and a burst of confetti.
5) Input Field fads in below the wheel thats saks 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 refering 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 secctions 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 spin again, it will only give them a max 50% off..
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.