Funnel components

For anyone building pages inside a funnel. You'll have a model of what components exist, how to add them, and when to reach for a custom component. You need a funnel open in the builder.

Component model#

Every funnel page is assembled from components. You drag them onto the page from the component palette on the right. Each component has its own settings panel.

Components split into prebuilt (shipped by Zellify) and custom (React components you write).

Add and configure a component#

1. Open a page in the Funnel Builder.
2. From the right-hand palette, drag a component onto the page.
3. Click the component. A settings panel opens.
4. Edit content and styling.

Components are drag-to-reorder. Their styling follows the funnel's global styling unless you override it on the component. See Styling.

The Navigation component#

Every page ends with a Navigation component: a button that advances to the next page. It also renders the page header, which includes the funnel logo, progress bar, and page number. Each Navigation element (logo, progress bar, page indicator) can be disabled individually from the Page tab, so you can configure it to fit your style. The Navigation is also where you wire flow rules. See Flow system.

Custom components#

A custom component is a React component you write and drop onto a page like a prebuilt. Use it when the prebuilt surface is not enough — custom backend calls, bespoke layouts, integrations that need runtime JS.

Inside a custom component you can read funnel variables with useVariable(name), inspect the session via tracker, and navigate with useFunnelRouter(). They use a hook-based prop API so non-developers can edit them through the props panel.

There are two ways to create a custom component:

• Generated using AI inside the in-app Component Editor, which ships with an assistant that has Zellify's system prompt and props reference pre-loaded.
• Imported as custom code that you (or your own AI) write against the published system prompt and props reference.

Either way, once saved the component appears in the funnel builder's palette and behaves like a native component. See Custom components for the full guide and the AI workflow, or Custom registration component for a worked example using funnel hooks.

The Paywall component#

The Paywall component attaches a product and runs checkout on the connected payment provider. See Paywalls.

The Subscription Plan Card#

Use inside a Paywall to offer several plans side-by-side. The card exposes price, interval, trial, and a name; pick the product it binds to from a dropdown.

The Deep Link Button#

Drop on the success page to route a paid visitor into your app or web product. URL templates interpolate {{app_user_id}} and other tokens. See Deep Link Button.

The Final Offer popup#

Shows a discounted offer when a visitor closes the payment form. Pair with a conditional route in the Flow system. See Downsell.

Related#