data-sf attributes

data-sf-form="optin"

On <form>

Saves the contact, tags them, fires the optin event and routes to the next step.

• Fields are submitted by their name attribute. Use email, first_name, last_name and phone for the contact; other names are stored on the contact too.
• Add tags with data-sf-tags="a,b".
• Typing an email and leaving the page without submitting fires partial_lead, so the contact is saved as a partial lead.

<form data-sf-form="optin" data-sf-tags="ebook,cold-traffic">
  <input name="first_name" placeholder="First name">
  <input name="email" type="email" required>
  <button type="submit">Send me chapter 1</button>
</form>

data-sf-next

On <a>, <button>

Asks ShipFunnels for the next step and goes there.

• The step's routing rules pick the target: what the visitor bought, declined, was tagged with or booked, then the default.

<a href="#" data-sf-next>Continue</a>

data-sf-goto="step-key"

On <a>

A direct link to a step by its key.

• The key must exist in the funnel, or the launch check fails.

<a data-sf-goto="faq">Read the FAQ</a>

data-sf-checkout="offer-key"

On <div>

Renders the payment provider's checkout for the offer.

• Offer order bumps with data-sf-bumps="bump-key,...".
• The checkout runs on your own Stripe, Paddle or Dodo account.

<div data-sf-checkout="main" data-sf-bumps="workbook"></div>

data-sf-upsell="accept" | "decline"

On <button>

Charges the saved payment method for the step's upsell offer, or declines it.

• The visitor is routed on the result. If the bank asks for 3D Secure, the buyer approves it in a popup.
• If a charge fails, the visitor goes to the downsell or thank-you step, never an error page.
• Name the offer with data-sf-offer="offer-key" on the accept button. It can be left out only when the funnel has exactly one active upsell (or downsell) offer; with several, the launch check asks for it.

<button data-sf-upsell="accept" data-sf-offer="vip">Yes, add the course</button>
<button data-sf-upsell="decline">No thanks</button>

data-sf-field="contact.first_name"

On <span> or any text element, and {{contact.first_name}}

Fills in the visitor's details in the browser.

• Hidden until filled, so pages stay cacheable and the same for every visitor.
• Set a fallback with data-sf-default.

<h1>Welcome, <span data-sf-field="contact.first_name" data-sf-default="friend"></span></h1>
<p>Hi {{contact.first_name}}, your copy is on its way.</p>

data-sf-timer="72h"

On <div>

A countdown that belongs to this visitor, so a refresh doesn’t reset it.

• Use a duration such as 30m, 72h or 2d (per visitor, it survives refreshes and device changes) or an ISO date (the same for everyone).
• Choose what happens at zero with data-sf-expire="goto:step-key" or "price:offer-key".
• Lay out the digits with data-sf-unit="days", "hours", "minutes" or "seconds" on elements inside the timer. Without them the timer shows dd:hh:mm:ss.

<div data-sf-timer="72h" data-sf-expire="price:main-full">
  <span data-sf-unit="hours"></span>h <span data-sf-unit="minutes"></span>m
</div>

data-sf-downloads

On <div>

Lists the files the buyer paid for as short-lived download links.

• The files are the deliverables of the offers they bought. Put it on the thank-you step.
• It stays hidden when there is nothing to download.

<div data-sf-downloads></div>

data-sf-login

On <div>

The member login form: email, then a magic link or a 6-digit code.

• Used on a funnel’s login page for gated steps and members areas.

<div data-sf-login></div>

data-sf-booking="calcom" | "calendly"

On <div>

Embeds a calendar as a step and feeds "booked" back to the funnel.

• Pass the booking page with data-sf-url.

<div data-sf-booking="calcom" data-sf-url="https://cal.com/you/intro"></div>

data-sf-consent

On <div>

An optional slot for the cookie consent banner.

• Without it, the banner shows in its default position.

<div data-sf-consent></div>

data-sf-event="name"

On Any element

Fires a custom event when clicked.

• Custom events show up in the funnel’s analytics.

<a href="/guide.pdf" data-sf-event="guide_download">Download the guide</a>

Routing rules

Each step has routing rules that decide where data-sf-next goes. The first matching rule wins, then default. Every step except thank-you, members and 404 steps must lead to a step that exists, which the launch check enforces. The agent sets them with the set_routing tool.

{
  "default": "sales",
  "rules": [
    { "if": { "purchased": "vip-upsell" }, "goto": "thank-you" },
    { "if": { "declined": "vip-upsell" }, "goto": "downsell" },
    { "if": { "tag": "webinar" }, "goto": "replay" },
    { "if": { "booked": true }, "goto": "confirmed" }
  ]
}