Autonnel v0.1.0
Get started

Quick start

Ship a first funnel end-to-end — create pages, build a funnel, take a payment.

This walkthrough takes you from a fresh Autonnel install to a live funnel that accepts a test payment. It assumes you have completed Installation and can reach the admin: http://localhost:4321 if you started it with docker compose up, or http://localhost:3000 if you are running the Astro dev server.

Prerequisites

  • Autonnel running locally (see Installation)
  • A Stripe account (test mode is fine) or a PayPal sandbox account
  • A Shopify, WooCommerce, or Picocart store with at least one product

Step 1: Configure ecommerce

Autonnel pulls product data from your store and writes orders back to it.

  1. Go to Settings → Ecommerce.
  2. Choose your provider (Shopify, WooCommerce, or Picocart) and enter the credentials.
    • Shopify: store domain (e.g. my-store.myshopify.com) and a private app access token with read_products and write_orders scopes.
    • WooCommerce: store URL, consumer key, and consumer secret from WooCommerce → Settings → Advanced → REST API.
    • Picocart: base URL and access token for your Picocart instance.
  3. Click Save and test connection. A green indicator confirms Autonnel can reach your store.

If the connection test fails, the most common causes are an incorrect domain format (include no trailing slash, no https:// for Shopify) and token scope restrictions. For WooCommerce, verify that the REST API is enabled under WooCommerce → Settings → Advanced → REST API and that the consumer key has both read and write permissions. For Picocart, confirm the base URL includes the full path with no trailing slash (e.g. https://picocart.example.com) and the token has admin scope.

Step 2: Configure payment

  1. Go to Settings → Payment.
  2. Click the Stripe card (or PayPal, depending on your preference).
  3. Enter your API keys. For Stripe, you need the Secret key from the Stripe Dashboard under Developers → API keys. Use sk_test_... keys during development.
  4. Click Save. The card shows a green status dot when credentials are valid.

You can enable both Stripe and PayPal simultaneously. Customers see a payment method tab for each enabled provider on checkout pages.

For Stripe, you also need to set up a webhook to handle asynchronous payment events (e.g. when a card authorization is captured later). In the Stripe Dashboard, go to Developers → Webhooks → Add endpoint and point it at https://your-domain.com/api/stripe/webhook. The required events are payment_intent.succeeded and payment_intent.payment_failed. Copy the webhook signing secret and add it to Settings → Payment → Stripe → Webhook secret. Without this, orders may remain in PENDING state after payment.

For PayPal, test mode uses sandbox credentials. You can create a sandbox merchant account at developer.paypal.com.

Step 3: Create a checkout page

Pages are the building blocks of a funnel. A checkout page is where customers enter their details and pay.

  1. Go to Pages → New page.
  2. Set the type to Checkout and choose the CHECKOUT template.
  3. The page editor opens. The template includes a ProductSelector, AddressForm, and PaymentForm component already wired together.
  4. In the ProductSelector component settings, bind it to one or more products from your connected store. Click a product row to attach it.
  5. Click Publish.

The checkout page is now live under its slug (visible in the page list). The slug format is /{your-slug}.

Step 4: Create a thank-you page

When payment succeeds, Autonnel redirects customers to a thank-you page.

  1. Go to Pages → New page.
  2. Set the type to Thankyou and choose the THANKYOU template.
  3. The template includes an OrderDetails component that displays the confirmed order.
  4. Click Publish.

You also need an error page for failed payments. Create one with type Error and the ERROR template. The error page displays a message when payment is declined and offers the customer a way to retry.

Both pages are referenced by funnels. If either is missing when you create a funnel, the funnel detail page shows a warning banner. The banner is informational — it does not block traffic, but customers who reach a checkout with no error page assigned will see a generic fallback.

Step 5: Build a funnel

A funnel defines the flow a customer takes through your pages.

  1. Go to Funnels → New funnel and give it a name.
  2. Autonnel automatically attaches the thank-you and error pages you just created. If multiple thank-you or error pages exist, it picks one — you can change the selection in the funnel detail view.
  3. Add a checkout step: click Add step → Checkout and select your checkout page.
  4. Optionally add landing page steps before checkout or upsell steps after it. For this walkthrough, a single checkout step is enough.
  5. Click Save.

The funnel is now configured. No publish action is required for funnels — changes take effect immediately.

Step 6: Get the funnel URL

Checkout pages remain directly reachable by their own slug — visitors who hit /{checkout-slug} can browse and pay. But a checkout page can be referenced by multiple funnels, so a direct hit gives autonnel no way to know which funnel the visitor belongs to. The payment will still succeed, but funnel-scoped stats (conversion attribution, A/B test buckets, ads postbacks) may be unable to attribute the order correctly.

For that reason, always drive traffic into a funnel through its first step — typically the landing page. The funnel URL format is:

/n/{funnelId}/{stepSlug}
  1. Open your funnel and navigate to the Steps tab.
  2. Each step shows its Funnel URL in the /n/{funnelId}/{stepSlug} format.
  3. Copy the funnel URL of the first step (your landing page if you have one, otherwise the checkout step) and use that as the link you share externally or paste into ad creatives.

When you build the landing page, configure its CTA buttons to point at the next step’s funnel URL (/n/{funnelId}/{nextStepSlug}), not the raw checkout slug. The Puck URLField provides a funnel-cta link type that resolves to the correct funnel URL at render time — prefer it over hard-coding paths. This keeps the entire visitor journey scoped to the funnel and lets autonnel record every step.

Step 7: See your first order

Open the funnel URL in a browser (a private window keeps any existing session from interfering).

  1. Select a product variant.
  2. Fill in any address fields.
  3. On the payment form, use the Stripe test card: 
    Card number:  4242 4242 4242 4242
Expiry:       Any future date (e.g. 12/30)
CVC:          Any 3 digits
  4. Submit. You should be redirected to the thank-you page.
  5. In the admin, go to Orders. The new order appears with status Paid.

If the order does not appear, check the following:

  • Settings → Payment — confirm Stripe credentials show a green status dot.
  • Server logs — Autonnel logs errors to stdout. Look for error-level lines indicating where the failure occurred.
  • Stripe Dashboard → Events — verify the payment_intent.succeeded event fired and was delivered to your webhook endpoint. A 4xx response from Autonnel means the request reached the server but was rejected (check the webhook secret). A connection timeout means the server was unreachable.

For local development without a publicly reachable URL, you can use the Stripe CLI to forward webhooks: stripe listen --forward-to http://localhost:3000/api/stripe/webhook.

What’s next

You have a working funnel. A few directions from here:

  • AI page generation — on the new page screen, choose “Generate with AI” instead of picking a template. Provide a short description of your product and audience; Autonnel calls your configured LLM to produce a full page layout. Requires LLM credentials in Settings → LLM.
  • Ads binding — go to the funnel detail, Ads tab, to bind a Facebook or TikTok ad account. After a successful purchase, Autonnel fires a server-side conversion postback to the platform. See Ads binding for token setup details.
  • Recall emails — configure abandoned cart recovery in Settings → Recall. Customers who reach checkout but do not pay receive follow-up emails at configurable intervals (default: 24 h, 72 h, 168 h). Each interval can include a coupon.
  • A/B testing — split funnel traffic between two variants from the funnel’s A/B Test tab.