How do I control Pinli from my own code?

This page is for whoever builds your website. If you just want a button, the button builder writes the code for you.

Add the script once

Copy this line from Website, then Embed on your site. It has your tournament’s ID in it, and it goes in your site’s header:

<script src="https://content.pinli.io/embed/v1/pinli.js" data-pinli-tournament="YOUR_TOURNAMENT_ID" defer></script>

It’s one file, about 30 KB, and it loads without holding up your page. Stripe’s own script only loads when someone reaches the payment step.

Use attributes

Add data-pinli-action to any element. It works on elements added to the page later too.

<button data-pinli-action="register">Register your team</button>
<a data-pinli-action="donate" data-pinli-amount="100">Give $100</a>
<div data-pinli-action="donate" data-pinli-display="inline"></div>
<div data-pinli-show="teams"></div>
<div data-pinli-show="leaderboard"></div>

Attribute	What it does
data-pinli-action	register, sponsor, donate or contact
data-pinli-amount	The gift to start with, in whole dollars (donate only). The donor can still change it.
data-pinli-display	inline puts the form right on the page (donate only). Otherwise it’s a pop-up.
data-pinli-show	teams or leaderboard: a live list, right where you put it
data-pinli-source	Where the gift came from, on the donation’s record: website, leaderboard, link or embed (the default)

On your own element, data-pinli-tournament points that one button at a different tournament.

These only choose what opens and what it starts with. Prices, and what’s on sale, always come from Pinli, so you can’t change them from the page.

Use a link

If your site builder’s buttons only take a URL, set the link to one of these. Add the amount for a donation:

#pinli-register
#pinli-sponsor
#pinli-contact
#pinli-donate
#pinli-donate-100

Use JavaScript

Pinli.open takes the same options as the attributes.

Pinli.open({ action: "donate", amount: 100 })
Pinli.open({ action: "register" })
Pinli.open({ action: "donate", display: "inline", target: document.querySelector("#give") })

Pinli exists once the script has run, and it loads with defer, so call these from a click handler or after pinli:ready fires on document.

Know when someone finishes

const stop = Pinli.on("complete", ({ action, tournamentId, amount }) => {
  // Your own thank-you page, or analytics.
})
stop() // when you no longer want to listen

complete fires for every form: when a gift is paid (amount is in dollars, the same as data-pinli-amount), when a team or sponsor signs up, whether they pay then or later, and when a contact message is sent.

Versions

The v1 in the address is a promise: everything on this page keeps working, and we only add to it. If we ever need to change something, it’ll be at a new address, and yours keeps working.