Gumroad widgets allow your customers to purchase your products without leaving your website. Go to the widgets page while logged into your account, and you can create a Gumroad buy button or an embeddable product page that can be placed in your website simply by cutting and pasting some simple code.
These are not, at the moment, a solution for "shopping cart" functionality - the kind you'd find on Amazon or major retail websites. They are excellent solutions for one-off purchases though, and if you want to avoid sending customers away from your site.
While all sales made through the Gumroad payment system are subject to our strict security standards, it's a good idea to secure your site before using a Gumroad widget. The best way to do this is with an SSL certificate.
ALSO NOTE: If you are using a template to build your website, you may find that the header of your page is covering the overlay window. When this happens, the "z-index" of your website's header is too high. To fix this, make sure you can set the Z-index to 0 or 1. More on what that means here.
The Gumroad Overlay
The overlay window jumps right off of your page. You can use the button we provide you with on the widget page or build it into your site just by linking to your products. The overlay works for single purchases as well as multiple purchases.
The buying experience of the multi-buy overlay is similar to buying on your profile page. A small "bundle" opens up in the top right corner of your page, allowing customers to buy multiple products at once.
To set up the Overlay using the Gumroad-styled buy button on your page, just log into Gumroad and go to the Widgets page.
In the dropdown menu, select the product that you want to create a button for, and edit the text on your button. All changes will go live as you type.
Click Auto-trigger the payment form to send customers directly to the payment form, bypassing the product's description. If you'd like to disable multiple purchases, click Allow single-product purchases only.
Now you're ready to copy and paste your widget code onto your site.
BUTTON: This line of code represents the Gumroad button. Its code tells your website to display the Gumroad-styled button. The second half, "Buy my product," displays what your button will say.
href="Link": This portion represents the actual product which will open when this button is clicked. To learn how to find your Gumroad products' URLs, so you can easily create buttons in the future, click here.
Reminder: If you want to use a custom buy button on your page, just follow these steps:
- Create a button icon on your page.
- Turn that icon into a link, and link to your Gumroad product's URL.
Using Custom Domain URLs in Overlay
If you are using third-party ads or analytics services (like Facebook Ads) you might want to use your custom domain's product URL in the href of the widget, instead of gumroad.com. To make it work, you will have to tweak your Overlay widget's code to look like this:
<script src="https://custom-domain.com/js/gumroad.js"></script> <a class="gumroad-button" href="https://custom-domain.com/l/wyD">Buy my product</a>
gumroad.js script's URL, it MUST be loaded from your custom domain instead of gumroad.com.
Overlay for Affiliates
If you are an affiliate for a different creator's products and wish to sell their products directly from your site, you can use the Gumroad Overlay as well!
The only change you'd have to make from the steps above is that instead of using the product's URL in the href part, you'll have to give your affiliate URL. Again, it's a lot easier to just get the readymade code from the Widgets page!
Here's an example of the JS and Button code that you will have to paste in your website's HTML:
<script src="https://gumroad.com/js/gumroad.js"></script> <a href="https://gumroad.com/a/123456789/xYzAbC">Buy my product</a>
When you use the Embed, your customers can continue exploring your webpage while the payment form is open. If they buy from you, they can access their product immediately and remain on your site.
On your Widgets page, click Embed and select your product from the dropdown menu to bring up your Widget previews. If your page does not have an SSL Certificate, check the Redirect to Gumroad box. This will allow you to embed your product in your webpage, but send customers to a new tab in order to purchase your product.
Click the green button to copy your code to your dashboard. Now paste it on your site's HTML, wherever you see fit to have the product.
Using Custom Domain URLs in Embed
If you are using third-party ads or analytics services (like Facebook Ads) you might want to use your custom domain's product URL in the href of the widget, instead of gumroad.com. To make it work, you will have to tweak your Embed widget's code to look like this:
<script src="https://custom-domain.com/js/gumroad-embed.js"></script> <div class="gumroad-product-embed"><a href="https://custom-domain.com/l/wyD">Loading...</a></div>
gumroad-embed.js script's URL, it MUST be loaded from your custom domain instead of gumroad.com.
Embed for Affiliates
Just like how affiliates can make use of the Overlay for selling someone else's products directly on their site, they can do so with the Embed feature too!
Log in to your Gumroad account, head to the Widgets page, copy the code for Embed, paste it to your website. That's it!
You just need to be sure that the link after the href has the "/a/" part in it — which is what signifies that it's an affiliate's URL. A normal product URL doesn't have that. Thankfully, if you are copying the URL from the Widgets page, you won't have to manually type out anything. Again, here's an example of what the code will look like:
<script src="https://gumroad.com/js/gumroad-embed.js"></script> <div class="gumroad-product-embed"><a href="https://gumroad.com/a/123456789/xYzAbC">Loading...</a></div>
Remember — you can also use URL parameters (for example,
&wanted=true&offer_code=thanksgiving) in both overlays and embed methods, too.
Got more questions? Reach out to us at firstname.lastname@example.org