Autonnel v0.1.0
Get started

Building a funnel

Step-by-step: create the funnel, add steps, point at pages, get the live URL.

This guide walks you through creating a working funnel from scratch, from naming it to opening the live URL in a browser.

Prerequisites

  • At least one page of type checkout exists in your deployment. Without a checkout page, you cannot complete the funnel.
  • You have published your checkout page. Unpublished pages serve stale or empty content.

Step 1: Create the funnel

Go to Funnels in the sidebar and click New funnel. Enter a name. The name is for your reference only — visitors never see it.

The funnel is created immediately with an empty step list and no slug. Continue in the funnel detail view.

Step 2: Add steps

Add steps in the order visitors will experience them. Use the Add step button and choose the step type:

  • Landing — add as many landing steps as you need. They run in the order you place them. Each landing step must point at a page of type custom.
  • Checkout — add exactly one checkout step. It must point at a page of type checkout.
  • Upsell — optional. Add upsell steps after checkout. Each must point at a page of type upsell.

For each step, open the page selector and choose the page from the deployment. The selector only shows pages whose type matches the step type.

Step 3: Bind the thank-you and error steps

When you create a funnel, autonnel automatically binds the first thankyou page and the first error page it finds in the deployment. These appear as the last two steps in the step list.

If the auto-selection is not the page you want, open the dropdown on the step row and choose a different page. If no pages of those types exist yet, you see a banner pointing you to /pages. Create the pages there, then return to the funnel detail and bind them from the dropdowns.

Every step that can be navigated to needs a step slug — a short, unique identifier used in the redirect URL. The redirect URL format is:

/n/{funnelId}/{stepSlug}

Set the step slug for each step from the step row in the funnel detail. Slugs must be unique across all funnels (globally unique), letters only, maximum 20 characters.

Landing pages require the CTA buttons or links inside the page content to use this format so the visitor is routed through the funnel. Open the page in the editor and set any button or link that should advance the visitor to:

/n/{funnelId}/{stepSlug}

where {stepSlug} is the slug of the next step. The funnel validator checks that this link is present in the published page content (see Funnel validation).

This manual URL format is only required when you hand-write a link’s href directly in a custom component or a raw HTML page. Most built-in components (HeroBanner, SaleCta, AddToOrderButton, TextCtaBanner, etc.) provide a “Funnel CTA” link type in the property panel that auto-renders the correct URL based on the funnel step. Use the Funnel CTA link type whenever possible — it lets you reorder funnel steps without editing every page.

Step 5: Set the funnel slug

The funnel slug is the entry-point path for the funnel. Set it from the Settings section of the funnel detail. The live URL for the funnel’s first landing page is reached through the domain’s primary domain combined with the slug, or directly by the landing page’s own URL.

If the funnel has no landing steps, the entry URL is the checkout page’s direct URL.

Step 6: Validate

The funnel detail page runs the validator automatically and displays any errors in a banner at the top. The validator checks:

  • Each landing page contains the expected /n/{funnelId}/{stepSlug} link in its published content.
  • Each step’s page type matches the step type.
  • A checkout step is present.
  • Thank-you and error steps are bound.

Errors are advisory — the funnel serves traffic regardless. Fix errors before sending real traffic.

Step 7: Test the funnel

Open the funnel’s entry URL in a private browser window (to avoid cached state or existing sessions). Walk through each step:

  1. Landing page loads and the CTA button navigates to the next step.
  2. Checkout page loads with the product selector and payment form.
  3. Use a test payment method (Stripe test card or PayPal sandbox) to complete a payment.
  4. Upsell pages appear in order if configured.
  5. The thank-you page loads after accepting or declining all upsells.
  6. Test a declined payment and confirm the error page appears.

Check the Orders list to confirm a test order was created with the expected status.

Caveats

  • Page edits do not propagate automatically. If you edit a page’s content after setting up the funnel, you must republish the page. The funnel still uses whatever the page’s published data contains at serving time, so unpublished edits are not visible.
  • Snapshotted thank-you and error pages. These are recorded at funnel creation time. If you later edit the underlying deployment pages, the funnel is not affected until you re-link them from the funnel detail.
  • One checkout page, multiple funnels. The same checkout page can be referenced by any number of funnels. Changes to the checkout page content affect all funnels that share it.
  • Step slugs are globally unique. If you get a conflict error when saving a step slug, choose a different value.