Customers are great - don't get us wrong, but sometimes they can be fickle. Fickle and great, but fickle nonetheless.
Gumroad widgets allow your customers to purchase your products without leaving your website. By simply going to the widgets page while logged into your account, 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. We have a thorough explanation of how to get an SSL Certificate over here.
Now, we can't require you to get an SSL certificate for your page, but we strongly encourage it. An SSL not only protects your site from "man in the middle" attacks, but leads to higher conversion rates, as your customers will feel more comfortable entering credit card information onto your site.
Templates: 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 overlay window jumps right off of your page. It's the bee's knees, to use our grandparents' parlance. 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 several products in one go!
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.
In step 3, you'll choose how you'd want your product's window to open for customers. You can send them directly to the payment form, bypassing the product's description. If you're selling a product designed to be gifted, send your customers straight to the payment form with the option of gifting already in place.
BUTTON - this line of code represents the Gumroad button. Its code tells your website to display the Gumroad-styled button, and the second half, "Buy my product," displays what your button will say.
HREF = "XXXX" - 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 your own 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
An embedded product sits snugly as a bug in a rug inside of your website. Your customer can continue exploring your page 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 Product Widget 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.
Drop your Code
Click the green button to copy your code to your site. Now paste it on your site's HTML, wherever you see fit to have the product.
The second line of code represents your embedded product. Specifically:
The XXXX above is your Product ID. You can find this in the Options tab of your product. It's the "suffix" of your product's URL, which are either randomized (by default) or customized (by you).