DevelopersEmbedsEmbeds overview
Embeds

Embeds overview

One script puts Buy buttons, product cards, booking calendars, courses, webinars, product grids, newsletter boxes, tip buttons, pricing tables, pay boxes and forms on any website. Free on every plan.

Add the script once per page, then add elements with data-paylead-* attributes where you want them.

<script src="https://paylead.app/embed.js" async></script>
Embed Element Shows
Buy button <button data-paylead-buy="CODE"> Your own button. Opens checkout over the page
Product card <div data-paylead-product="CODE"> Picture, name, price and Buy
Booking calendar <div data-paylead-booking="CODE"> Days and times to pick, then pay
Course card <div data-paylead-course="CODE"> The course, its lessons and Enroll
Webinar sign-up <div data-paylead-webinar="CODE"> Next session, a countdown and Register
Product grid <div data-paylead-store="STORE"> Your products, or one category, in a grid
Newsletter box <div data-paylead-newsletter="STORE"> Email sign-up into your customer list
Tip button <div data-paylead-tip-button="STORE"> A floating Support me button
Subscribe button <button data-paylead-subscribe="CODE"> Your own button. Opens the subscribe page over the page
Pricing table <div data-paylead-pricing="A,B,C"> Your plans side by side
Pay button <button data-paylead-pay="SLUG"> Opens a payment link over the page
Pay box <div data-paylead-pay-inline="SLUG"> A payment form in the page, with amounts to tap
Form <div data-paylead-form="CODE"> A form or scorecard. Get the code from Forms → Share

The quickest way to get the code is the Embed button on any product or payment link in your dashboard, or Settings → Developers → Embeds. It lets you style the embed, preview it and copy HTML, iframe or React code.

Where the codes come from

  • Product and plan codes are the short code at the end of the product's link, for example k3x9pa in paylead.app/k3x9pa. The Embed dialog fills them in for you.
  • Store addresses are the end of your store link, for example amas-studio in paylead.app/s/amas-studio. Product grids, newsletter boxes and tip buttons use them.
  • Payment link slugs are the end of the link, for example church-giving in paylead.app/pay/church-giving.

Styling

Your own buttons keep your site's look; the checkout opens in your store's colours. Cards, tables and pay boxes take these attributes:

Attribute Values
data-paylead-accent A colour like #0b2c2e, used for buttons and highlights
data-paylead-scheme light (default), dark, or auto to follow the visitor's device
data-paylead-radius none, small, medium (default), large or full
data-paylead-button-text The button's words, for example Get it now
data-paylead-layout Product cards only: card (default), row or minimal

What buyers see

The checkout opens over your page, full screen on phones. Buyers pay with mobile money or card without leaving your site. Paying by card stays in the overlay. Paying by mobile money opens the secure mobile money page in the same tab, then shows their receipt.

Every embedded sale is a normal order. In Orders it's marked as coming from an embed, with the website it was on.

Where embeds work

Anywhere you can add HTML: WordPress (a Custom HTML block), Wix (Embed code), Webflow (Embed element), Squarespace (Code block), Shopify (Custom Liquid), Framer, Carrd, and your own site or app.

Site builders that don't allow scripts can still show cards, tables and pay boxes as a plain iframe. The Embed dialog's iframe tab gives you the code:

<iframe
  src="https://paylead.app/embed/product/k3x9pa?layout=card"
  style="width:100%;max-width:420px;height:560px;border:0"
  loading="lazy"
></iframe>

Without the script, buttons inside an iframe open Paylead in a new tab instead of an overlay.

Keep embeds on your own websites

By default, anyone can embed your products. To stop others from showing your checkout on their sites, list your own websites in Settings → Developers → Embeds → Where your embeds can appear:

mysite.com
www.mysite.com
*.myapp.io

Browsers then refuse to show your embeds anywhere else.

Paylead branding

Cards, tables and the checkout show a small "Payments by Paylead" line. On Pro and Business it goes away when you turn off Paylead branding in Store settings.

Next