Integrating Gumroad into websites
In this article:
While there is always the option to redirect your customers to your Gumroad product page, creators and affiliates can also use our Overlay or Embed widgets to open the product page right on their websites.
You will need the ability to edit your website’s HTML to make Overlay/Embed work.
Overlay
Go to your account’s Widgets page, select “Modal Overlay”, change the button text if you wish to, and click “Copy embed code”.
Now go to your website’s HTML editor and paste this code wherever you wish to place the buy button.
If you are using website builders like Squarespace, Wordpress, Webflow, Carrd, etc., and are facing trouble while placing this code, please check out their documentation or contact their support teams.
Once installed, clicking the buy button will open the product page right on your website, and the customer will be redirected to Gumroad’s checkout page upon clicking the “Add to cart” button from where they can purchase multiple products at once.
Using custom buttons
You can replace the native “Buy on Gumroad” button with your custom-designed button, an image, or just plain text by removing the attribute from the <a> tag.
Your code will then look something like this:
<script src="https://gumroad.com/js/gumroad.js"></script> <a href="https://user.gumroad.com/l/prod1">Buy on</a>
Inserting multiple buttons
If you wish to insert multiple overlay buttons on your website, either for the same product or different products, you only need to include the Gumroad JS script once. Inserting the <script> line multiple times can lead to errors.
For multiple buttons, your code will look something like this:
<script src="https://gumroad.com/js/gumroad.js"></script> <a href="https://user.gumroad.com/l/prod1">Buy on</a> <a href="https://user.gumroad.com/l/prod2">Buy on</a>
Send customers directly to checkout
To send the customer directly to the checkout page upon clicking the buy button, toggle on “Auto-trigger the payment form” on the Widgets page before copying the code.
Embed
To embed the entire product page on the website instead of having a pop-up window, click on “Embed” on your Widgets page, choose the product you wish to embed and click “Copy embed code”.
Customers will be redirected to Gumroad’s checkout page upon clicking “Add to cart” and completing the purchase from there.
FAQs
Q. Can I complete the checkout on my website, instead of redirecting customers to Gumroad?
A: Sorry, that’s not possible. The checkout page will allow us to add new features like upsells, cross-sells, retargeting using JS embedded on the product page itself, and more going ahead!
Q. Can I customize the look of the checkout page with CSS?
A: Not yet, sorry!
Q. Can I apply discount codes to my overlay/embed product pages?
A: Yes! Go to your product’s “Checkout” tab and get the discounted product’s URL by clicking the “Share” button next to the coupon’s name. Now paste this URL in your widget’s href attribute.
Q. Can I autofill some checkout information while sending the customer from my website to the checkout page?
A: Yes! Check out our URL parameters article to see which fields you can autofill on the checkout page.