Hello and thank you for reviewing. In the following README I've documented the functionalities of my demo, as well as how you can try it out locally. Please read on for information and instructions!
How to Demo
Features and Limitations
Apr-17-2021.17-41-41.mp4
To simulate something as close as possible to the authentic Gumroad overlay, this project was set up so that a user could import one line of code into their site for functionality:
<script src="https://unpkg.com/[email protected]/dist/script.js"></script>
From there, they will only have to create a gumroad button:
<a class="samroad-button" href="https:/gum.co/peVsK" data-show="true">Buy my product</a>
Please note that changing data-show to false will remove the button. This was done as a demonstration for Sahil's request: "Read data-attrs of the anchor tags to show a button or not, make it embed or not, etc."
Ultimately, to use simply import these two lines of code into your website
<a class="samroad-button" href="https:/gum.co/peVsK" data-show="true">Buy my product</a>
<script src="https://unpkg.com/[email protected]/dist/script.js"></script>
For convenience, I've included an index.html file in this with everything already set-up. To run, simply clone this repository and run the index.html file in your browser. Please note: codepen and jsfiddle seem to modify iframe href attributes, so testing out my script imports in jsfiddle or codepen will not work. I haven't tested this in codesandbox yet.
A mock-up of the Gumroad Overlay, done as a coding challenge for Gumroad. In addition to utilizing an iframe to access a gumroad product page, this script does the following:
- Can be implemented as a single javascript file or `script tag` (see below)
- Supports custom subdomains for creators (e.g. sahil.gumroad.com/pencil). Currently Non-gumroad domains are unsupported, but I would like to add in this functionality.
- Early loads pages on hover
- Has a specified `data-attr` to modify the button
I came across certain iframe-related CORS restrictions while trying to replicate/implement certain functionalities and styles, so I'm intrigued by how Gumroad worked around this. Specifically, it seems that the actual Gumroad overlay may not be an iframe (I investigated via inspect tool). Nevertheless, I stuck with iframes to follow along with the challenge's instructions.
