Product grid, newsletter and tips
Show your whole store or one category, collect emails for your customer list, and add a floating Support me button.
These embeds use your store's address (the part after paylead.app/s/), not a product code. The Embed tab under Settings → Developers fills it in for you.
Product grid
<script src="https://paylead.app/embed.js" async></script>
<div data-paylead-store="amas-studio"></div>
Your active products as a grid, featured ones first, each with its price and button. Buttons open the right thing for the product: the checkout, the booking times, or the subscribe page.
| Attribute | |
|---|---|
data-paylead-category |
Only one category, by its slug, for example courses |
data-paylead-limit |
How many products, 1 to 24 (12 by default) |
Two columns on phones, more on wider screens.
Newsletter box
<div
data-paylead-newsletter="amas-studio"
data-paylead-heading="Get my weekly creator tips"
></div>
Visitors leave their email and get a confirmation email. Once they click it, they're in your Customers list with marketing consent, ready for your email campaigns. Nobody is added without confirming.
| Attribute | |
|---|---|
data-paylead-heading |
The heading. Defaults to your store form's heading, or "Get updates from your store" |
data-paylead-body |
A line under the heading |
data-paylead-ask-name |
Add this to ask for their name too |
Tip button
A floating Support me button in the bottom corner of every page:
<div data-paylead-tip-button="amas-studio"></div>
It opens your tip page over the site. Turn the tip page on first in Store Settings → General → Tip page.
| Attribute | |
|---|---|
data-paylead-button-text |
The button's words, "Support me" by default |
data-paylead-accent |
The button's colour |
data-paylead-position |
left for the bottom-left corner |
To use your own button instead of the floating one:
<button data-paylead-tip="amas-studio">Buy me a coffee</button>
From your own code
Paylead.store('#shop', 'amas-studio', { category: 'courses', limit: 6 });
Paylead.newsletter('#signup', 'amas-studio', { heading: 'Join 2,000 readers', askName: true });
Paylead.tipButton('amas-studio', { buttonText: 'Tip me', position: 'left' });
Paylead.tip('amas-studio'); // open the tip page now
A paid tip fires the paid event with kind: 'tip'.