Setting up the Gumroad overlay on your website
What is the Overlay?
With The Gumroad Overlay, your customers on desktop computers can buy products from you without ever having to leave your website. The checkout experience outside of Gumroad is, with the Overlay, just as simple as the checkout experience on your Gumroad profile page.
What is does:
When buying a single product, the customer will see your product’s payment form pop out.
A buyer clicks on a product link, and the product page pops up. But now, a small payment window will appear in the upper right-hand corner of your page.
Clicking “I want this” will add the product to a bundle. Your buyer can then add more products to the bundle buy clicking “I want this” on other products they’ve opened. Change of heart? Items can quickly be removed from the list. Each product selected will appear in the small window, and when the buyer is ready to make their purchase, they click Pay.
If you'd prefer not to have the "multi-buy" feature on your site, let us know! We can show you how to turn it off.
Setting Up the Overlay
1. Get an SSL Certificate
Please note: While an SSL certificate is 100% required to set up our Embed feature, many sellers choose not to obtain one to set up our Overlay.
Don't worry, it has nothing to do with Seditious Skateboarder Legions or Sea Snake Licking. An SSL (Secure Sockets Layer) is a standard security technology used to establish an encrypted link between a server and a client - usually a web server and a browser. Not only does an SSL certificate keep your site secured, especially when payments are taking place on it, but it also leads to higher conversion rates for our sellers.
Ready to dive in? Check out our guide to SSL Certificates!
2. Access the HTML of your page
To insert the code necessary for the overlay payment window to open, you need to be able to edit the HTML of your site. Go to the page where you want to add "buy" buttons, and open up the HTML. Click here for more about HTML.
3. Insert code
In the HTML of your page, enter the following code:
That’s it! Seriously! Now any time a Gumroad link is clicked on your page, the Overlay will activate.
4. Drop Your Buttons
To add the Gumroad Buy Button, put the following code wherever you want to link to your product:
Instead of "demo", you'll need to insert your product's ID. This can be found in the URL section of your product editor — it's the "suffix" of your product's URL, basically. It's "QaSmj" for the example below, and you can also change it to something else of your choice!
You can change the text of the button by replacing "Buy my product" with whatever compelling, wallet-opening call to action you like.
To learn how to use your own stylish buttons on your website (we won't be offended), check out this article.
If you want your overlay button to open directly to the purchase form, rather than the product description, just put a button on your site that links, when clicked, to your Gumroad product’s URL. Check out this article for more context, and check out this article to learn how to find your 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. 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>
Q: Can I automatically attach offer codes to my overlay window?
A: Yes! Just link to the URL of your product with your offer code as its suffix. For example, https://gumroad.com/l/demo with the offer code "puppies" becomes https://gumroad.com/l/demo?offer_code=puppies
To make this easier, you can auto-fill the form for your customers like so: https://gumroad.com/l/demo?offer_code=puppies&wanted=true
Q: Can I use Google Analytics on my page as well as the overlay?
A: We have seen a few instances when Google Analytics hijacks the overlay script and blocking the overlay window from opening. If you wish to use Google Analytics as well as the overlay, we suggest that you integrate Google Analytics into your advanced Gumroad Settings.
Q: My Google Analytics isn't sending events when using bundle checkout (add-to-cart feature). Why?
A: Currently we only support single product mode for Google Analytics. GA events won't get triggered with multi-buy, sorry!
Q: Does the Gumroad Overlay work on mobile?