Where to start with interactive Lead Magnet page

Design help Animations & Interactions
1

Hi,
I think this category would be a good place for this. I wan to create an interactive lead magnet such as the one on this page:
https://cabinet.esmeralda-psychic.com/offer43/g

Where do I start?
What videos or integrations do I need to look at for this?
Are there any samples or templates I can look at to get me started?

Here is my public share link: This is the site I want to add the page to.

https://preview.webflow.com/preview/ps-shop-7baca5?utm_medium=preview_link&utm_source=dashboard&utm_content=ps-shop-7baca5&preview=2009e123dbc187e544c9635110afdbda&mode=preview

2

@foxy Do you happen to know if you have something that can work for this? Maybe a widget?

3

Hi @Cherril.
Thanks for getting in touch. We don’t have a widget, but Foxy can be added at any point in the lead capture flow. Just comes down to collecting the data and passing it to the cart (ex: product name and price). Feel free to email us and we can get you pointed in the right direction: hello@foxy.io

Thanks,
Josh

1 Like
4

Does anyone know where I should start with this?
I think it would be interactions but I honestly don’t know.

Any help would be greatly appreciated.

5

So, I was able to locate this code, is there a way to reverse engineer it?
I’m sure there is but it may take me a little while… Suggestions?

.j-card-holder,.j-card-holder div,.j-card-holder:first-child,.j-card-holder:last-child,.j-result-name{float:left;box-sizing:border-box}.j-card-container{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:20px 0}.j-result-name:after,.j-result-name:before,.j-results-wrapper:after,.j-results-wrapper:before{content:‘’;display:table;clear:both}.j-card{position:relative;max-width:100%;border-radius:6px;box-shadow:0 3px 3px rgba(0,0,0,.5);user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}.j-card-back:hover{cursor:pointer}.j-result{-webkit-transition:-webkit-transform .5s ease-out;-moz-transition:-moz-transform .5s ease-out;-o-transition:-o-transform .5s ease-out;-ms-transition:-ms-transform .5s ease-out;transition:transform .5s ease-out}.j-results-wrapper{max-width:100%;margin:15px auto}.j-card-holder:first-child{margin:0 5px 5px 0}.j-card-holder{margin:0 5px 5px}.j-card-holder:last-child{margin:0 0 5px 5px}.j-card-holder div{background:rgba(255,255,255,.2);border-radius:6px;box-shadow:0 2px 2px rgba(0,0,0,.5) inset,0 -1px 1px rgba(255,255,255,.5) inset}.j-result-name{margin:10px auto;padding:10px 0;width:100%;background:rgba(0,0,0,.2);color:#fff;text-align:center;text-transform:uppercase;line-height:1.5;text-shadow:0 1px 1px rgba(0,0,0,.5);border-radius:4px}@media only screen and (min-width :320px){.j-result-name{font-size:8px}}@media only screen and (min-width :768px){.j-result-name{font-size:12px}}@media only screen and (min-width :992px){.j-result-name{font-size:14px}}

I found more code but I can’t tell exactly what it is doing.