The Gumroad overlay lets you bring in the Gumroad purchase pages right onto your site, so that transactions can happen inline — in a pretty Gumroad lightbox — without ruining the browsing experience for your customers.
Here's an example:
There are only three steps to implementing this for yourself:
- Get an SSL certificate for your site. The address of the page hosting the Gumroad overlay should start with https.
- Place links to Gumroad on your site, just like you normally would. Update "demo" to be the permalink associated with your product.
- Copy and paste this line of HTML into your site's page (or Squarespace, WordPress):
<a href="https://gum.co/demo" class="gumroad-button">Buy my product</a>
Optionally, you can edit the "Buy my product" text ("Support me by purchasing this!" for example). You can also auto-trigger the payment form by adding wanted=true or auto-set a locale by adding locale=true to the end of the Gumroad product URL:
<a href="https://gum.co/demo?wanted=true&locale=true" class="gumroad-button">Support me by purchasing this!</a>
And that's it! Now all of your users can securely buy your stuff, without even having to leave your site. If they want to see the HTTPS Secure header, they can right-click and open the Gumroad product in a new window.
Note: If the overlay doesn't get triggered on click (and your browser is redirected to a gumroad.com URL), please make sure that there is not extra code that is hijacking the click event (for example, a Google Analytics onclick event).