Build ArchiPal into your website

Gumroad gives you three options for selling products from your website. The simplest is to put a hyperlink on your site that sends buyers directly to your Gumroad product page (i.e. gumroad.com/l/YourProduct).

You can do this if you have: 

1) Access to the HTML Header of your site, and

2) The ability to install javascript on your site 

You can easily bring the Gumroad purchase page right into your site, without directing your buyers elsewhere. There are two Widget options for integration:

Gumroad Overlay

Here is an example of Overlay in action: 

The Gumroad Overlay allows you to put a button or link on your own website that, when clicked opens up a cool lil’ adorable payment window. You can change your product’s button over at your Widgets page. You can also create your own buttons!

Clicking the buy “button” will create a “bundle buy” lightbox at the right hand side of your website.

For detailed instructions on installing Overlay for single and multiple products onto your site, please refer to this guide.

Gumroad Embed

The Embed feature lets you do just that – embed your product within your page. If you have an SSL Certificate set up, the buying process is completely inline. If your site is not secured with HTTPS, you can redirect customers to the payment form in a new, secured tab. See an example of your products’ embedd-ability at your Widgets page.

Again, both the Embed and Overlay methods require you to be able to edit the HTML of your site. If you do not know how to do this, please refer to the friendly support team (or robotic answering service) of whatever site-builder you are currently using.

Autofilling checkout information

You can optionally autofill every field within the Gumroad checkout flow using URL parameters, including:

  • Email
  • Pay-what-you-want price
  • Quantity
  • Variants and SKUs
  • Duration for subscriptions
  • Custom fields

Some example URLs:

  • gum.co/pencil?email=sahil@gumroad.com
  • gum.co/pencil?price=10&quantity=3
  • gum.co/pencil?variant=medium,red
  • gum.co/pencil?yearly=true
  • gum.co/pencil?Account ID=123&price=10&yearly=true

These work with direct links and our overlay. To autofill using the Embed, you can use the “gumroad-params” data attribute, like so:

<div class="gumroad-product-embed" data-gumroad-product-id="pencil" data-gumroad-params="email=sahil@gumroad.com&price=10"><a href="https://gumroad.com/l/pencil">Loading...</a></div>

Listening to purchases

You can listen to purchases that happen as part of the Overlay or Embed too:

<script type="text/javascript">
  var gumroadSaleListener = function(ev) {
    if (ev.data && JSON.parse(ev.data).post_message_name == "sale") {
      document.getElementById("post-message-data").innerHTML = ev.data;
      // Do something else here...
    }
  };
  window.addEventListener("message", gumroadSaleListener, false);
</script>