Click Actions

Click actions define what happens when a user taps or clicks a component. You can attach one or more actions to any element — they execute sequentially in the order you define them. If an action fails, an optional failure chain takes over.

Insert image: The Click Actions section in the property panel, showing a list of chained actions (e.g., Set Variable, Submit Payment Element, Go to Next Page) with drag handles for reordering

How Actions Work

Every clickable component has a Click Actions list in its property panel. When the user clicks the element, each action runs in order. If any action throws an error (e.g., a payment fails), execution stops and the action’s onFailure chain runs instead.

Navigation Actions

Go to Next Page

goToNextPage — Evaluates the current page’s routes top-to-bottom and navigates to the first matching page.

This is the primary way users move through a funnel. The action does not hardcode a destination — it delegates to the routing system, which means the same button can send different users to different pages based on their variable values.

Button: "Continue" → goToNextPage (delay: 500)

Go Back

goBack — Navigates to the previous page in the user’s actual browsing history.

This is not a reverse route lookup. AppFunnel maintains a per-session page history stack. Go Back pops the last entry and navigates there. If the user arrived at Page C via a conditional branch that skipped Page B, Go Back returns to whichever page they actually came from.

Scroll to Element

scrollToElement — Smooth-scrolls to a specific component on the current page.

Useful for long pages with anchor-style navigation — e.g., a “See pricing” button that scrolls down to the payment section.

Data Actions

Set Variable

setVariable — Modifies a variable’s value using one of five operations.

Examples:

• Set a flag: setVariable → data.showDiscount = true
• Start a timer: setVariable → data.discountTimerStart (setToNow)
• Increment a counter: setVariable → answers.step (increment)
• Toggle a dialog: setVariable → element.{dialogId}.open (toggle)

Toggle Array Item

toggleArrayItem — Adds a value to a stringArray variable if it is not present, or removes it if it is. This is the programmatic equivalent of checking/unchecking a checkbox.

Use this when building custom multi-select UI instead of the built-in Multi Select element — for example, a grid of image cards where tapping toggles selection.

Payment Actions

Submit Payment Element

submitPaymentElement — Submits the Stripe Payment Element on the current page. This triggers the checkout flow with the currently selected product.

The Payment Element component handles card input, Apple Pay, Google Pay, and other Stripe-supported payment methods. This action tells it to process the payment.

If the payment fails, the action sets payment.error with the error message and throws a PaymentActionError, which stops the action chain. Use an onFailure chain to handle the error gracefully (e.g., show an error message).

Submit Paddle Checkout

submitPaddleCheckout — Submits the Paddle checkout component on the current page.

Purchase

purchase — Charges the user’s saved payment method directly, without showing a payment form.

The purchase action handles the full lifecycle:

1. Resolves the product (selected or by ID)
2. Sends an off-session charge request to the server
3. Handles 3D Secure authentication if the bank requires it
4. Sets purchase.status and payment.status variables on success
5. Fires purchase.complete and subscription.created tracking events
6. Navigates to the success page

If the charge fails at any step, the onFailure chain runs — use it to show an error or offer an alternative.

Tracking Actions

Call Event

callEvent — Emits a custom tracking event that flows through all configured integrations (Meta Pixel, GTM, webhooks, etc.).

Example:

{
  "eventName": "quiz_completed",
  "eventData": "{\"goal\": \"{{ answers.incomeGoal }}\", \"experience\": \"{{ answers.experience }}\"}"
}

The eventData string is rendered as a Liquid template against the current variable state, then parsed as JSON. This lets you include any variable value in your event payload.

Complete Registration

completeRegistration — Fires the user.registered tracking event using the current user.email value. This event is picked up by integrations — for example, Meta receives a CompleteRegistration event for ad attribution.

The action validates that user.email contains a valid email address before firing. If there is no email, the action silently skips.

Typical placement: on the button that submits the email input, chained after setVariable to store the email and goToNextPage to advance.

Enable Marketing Consent

enableMarketingConsent — Records that the user has opted into marketing communications. Fires the marketing.consent_given event, which integrations use to flag the customer as marketing-eligible.

Product Actions

Select Product

selectProduct — Sets the selected product by ID. This updates the products.selectedProductId variable, which in turn updates all products.selected.* computed variables.

Use this on pricing cards or plan selector buttons. When combined with Active Style, the selected plan card highlights automatically.

UI Actions

Open URL

openUrl — Opens a URL in a new browser tab.

Common uses: linking to Terms of Service, Privacy Policy, or external resources. The link opens with noopener,noreferrer for security.

Action Chains and Failure Handling

Chaining Multiple Actions

A single click can trigger a sequence of actions. They execute in order — each action completes before the next one starts. This includes async actions like purchase and submitPaymentElement.

Example chain on a “Subscribe” button:

1. callEvent — track checkout_attempted
2. submitPaymentElement — process the payment
3. completeRegistration — fire the registration event
4. goToNextPage — navigate to the success page

If step 2 fails (payment declined), steps 3 and 4 never run.

Failure Handling with onFailure

Any action in the chain can have an onFailure array — a separate action chain that runs if that specific action throws an error.

Example: payment with fallback

1. submitPaymentElement
   └─ onFailure:
      1. setVariable → data.paymentFailed = true
      2. callEvent → "payment_failed"

If the payment element submission fails, data.paymentFailed is set to true (which you can use to conditionally show an error message via Dynamic Properties), and a tracking event is fired.

Payment actions (submitPaymentElement, submitPaddleCheckout, purchase) automatically set the payment.error variable with the error message before triggering the failure chain. You can display this in a Text element: {{ payment.error }}.

Action Reference