DevelopersEmbedsProduct grid, newsletter and tips
Embeds

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'.