Course card and webinar sign-up

Course card

<script src="https://paylead.app/embed.js" async></script>

<div data-paylead-course="k3x9pa"></div>

The card shows the course's cover, name, price, how many lessons and hours it has, and the outline section by section. The first section is open; visitors can open the others. Enroll now opens the checkout over your page.

The outline comes from the course's lessons, so it stays up to date when you add or rename lessons.

Webinar sign-up

<div data-paylead-webinar="w8b2nd"></div>

For a live webinar it shows the date and time in the visitor's own timezone and counts down to it. For an evergreen webinar it shows the next session and says they can pick another after registering. Register opens the checkout, and free webinars go straight to the sign-up form.

Styling

Both take the usual attributes (see Styling):

<div
  data-paylead-webinar="w8b2nd"
  data-paylead-accent="#0b2c2e"
  data-paylead-scheme="dark"
  data-paylead-button-text="Save my seat"
></div>

Without the script

<iframe src="https://paylead.app/embed/course/k3x9pa" style="width:100%;max-width:420px;height:640px;border:0" loading="lazy" title="Course"></iframe>

<iframe src="https://paylead.app/embed/webinar/w8b2nd" style="width:100%;max-width:420px;height:440px;border:0" loading="lazy" title="Webinar"></iframe>

In a plain iframe the button opens the product page in a new tab.

From your own code

Paylead.course('#course', 'k3x9pa');
Paylead.webinar('#webinar', 'w8b2nd', { theme: { scheme: 'dark' } });