> ## Documentation Index
> Fetch the complete documentation index at: https://funnelfox.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Actions & triggers: navigation & payments

> Configure funnel actions: navigation, show/hide elements, purchases, dynamic actions, cancellation flows, and subscription swaps.

Actions are the things that happen in your funnel. When someone clicks a
button, selects an option or plan, completes a purchase - actions determine what
comes next. They're the logic that turns static screens into interactive
experiences.

## How It Works

**Elements have triggers → Triggers fire actions → Actions do things**

Every interactive element (buttons, options, inputs, plan pickers) has triggers that detect
user interactions. When triggered, they execute actions you've configured.

<Info>
  **Most common example**: Button element → "On click" trigger → Navigate
  action → User moves to next screen. That's 90% of funnel interactions.
</Info>

## Quick Reference

Here's every action available in FunnelFox:

| Action                  | What it does              |
| ----------------------- | ------------------------- |
| **Navigate**            | Move to another screen    |
| **External Link**       | Open website/app store    |
| **Show/Hide**           | Toggle element visibility |
| **Purchase**            | Upsell with stored card   |
| **Scroll To**           | Jump to page section      |
| **Cancel Subscription** | End user's subscription   |
| **Pause Subscription**  | Temporarily suspend       |
| **Gift Free Period**    | Extend without charge     |
| **Swap Subscription**   | Change to different plan  |
| **Do Nothing**          | No operation              |

## Common Patterns

Before diving into all the details, here are the patterns you'll use most:

<Tabs>
  <Tab title="Linear Flow">
    **Button → Navigate to next screen**

    The bread and butter of funnels. Each screen has a "Continue" button
    that moves users forward through your sequence.
  </Tab>

  <Tab title="Choice-Based Navigation">
    **Options → Navigate to different screens**

    User selects their interest/plan/preference, and you send them to the
    relevant next step. Perfect for qualifying leads.
  </Tab>

  <Tab title="Show More Info">
    **Plan picker → Show/Hide element**

    Reveal additional details without cluttering
    the initial view.
  </Tab>

  <Tab title="Complete Purchase">
    **Checkout element → Built-in payment flow**

    The Checkout element has its own payment processing. For upsells after
    checkout, use the Purchase action with stored cards.
  </Tab>
</Tabs>

## Essential Actions

These are the actions you'll use in almost every funnel:

### Navigate

Move users between screens in your funnel.

**When to use**: Moving forward in your funnel, jumping to specific sections,
or creating branching paths based on user choices.

**Settings:**

* **Destination**: Where to go
  * "Next screen" - continues the sequence
  * Specific screen - jump anywhere in your funnel
* **Delay** (optional): Pause before navigating - useful for showing a
  quick message first

<Info>
  **Pro tip**: Use "Next screen" for linear flows. It's easier to maintain
  because reordering screens automatically updates the flow.
</Info>

### Show/Hide Element

Control what's visible on the screen.

**When to use**: Progressive disclosure, showing error messages, revealing
additional options, or creating interactive experiences based on the selected plan.

**Settings:**

* **Element**: Which element to control
* **Action**: Show, Hide, or Toggle
* **Delay** (optional): Smooth transitions with timing

<Tabs>
  <Tab title="Show">
    Makes hidden elements appear. Perfect for:

    * Success messages after form submission
    * Additional product details on request
    * Progressive form fields
  </Tab>

  <Tab title="Hide">
    Removes elements from view. Great for:

    * Clearing error messages
    * Simplifying screens after selection
    * Removing irrelevant options
  </Tab>

  <Tab title="Toggle">
    Switches between visible/hidden. Ideal for:

    * FAQ accordions
    * "Show more/less" content
    * Mobile menu buttons
  </Tab>
</Tabs>

### External Link

Send users to websites, app stores, or [set up deep links](/editor/deep-links).

**When to use**: App downloads, terms of service, partner sites, or any
external destination.

**Settings:**

* **URL**: Where to send them
* **New tab**: Keep your funnel open in background
* **Track as CTA**: Count in conversion metrics
* **Delay** (optional): Show message before redirecting

<Warning>
  **Analytics tip**: Always enable "Track as CTA" for important external
  actions like app store visits. This helps measure true conversion rates.
</Warning>

## Payment Actions

### Purchase

Process payments for upsells and one-click purchases using stored card details.

**When to use**: Upsells after initial purchase, one-click upgrades, or
additional offers. NOT for initial checkout - the Checkout element handles
that with its own richer built-in payment flow.

**Core settings:**

* **Provider**: Stripe or Paddle (only these are supported for now)
* **Product**: What they're buying (from your PSP catalog)
* **Type**:
  * One-time payment
  * Subscription
  * Free trial (no charge, then subscription)
  * Paid trial (reduced price, then full subscription)

**Advanced options:**

* **Allow promocodes**: Let users enter discount codes
  * Can pre-fill from URL using `{{query.promo_code}}`
  * See [Variables](/editor/variables) for details
* **Stripe Tax**: Automatic tax calculation (Stripe only)
* **Custom value**: Override price for analytics

#### Handling Purchase Outcomes

Every purchase action needs three outcome handlers:

<CardGroup cols={3}>
  <Card title="On Success" icon="check">
    Usually navigate to thank you screen
  </Card>

  <Card title="On Declined" icon="xmark">
    Show error and retry options
  </Card>

  <Card title="On Cancelled" icon="ban">
    Offer discount or alternative
  </Card>
</CardGroup>

<Info>
  **Example flow**:

  * Success → Navigate to welcome screen
  * Declined → Show payment error → Offer payment plan
  * Cancelled → Navigate to discount offer
</Info>

## Advanced Features

### Dynamic Actions

Make actions adapt based on user data. Instead of everyone getting the same
experience, personalize the journey.

**How it works:**

<Steps>
  <Step title="Collect user input">
    User selects options or fills forms (their choice becomes a "state")
  </Step>

  <Step title="Enable dynamic mode">
    Toggle "Dynamic" on any action that supports it
  </Step>

  <Step title="Select the state">
    Choose which user input to base decisions on
  </Step>

  <Step title="Map outcomes">
    Define what happens for each possible value
  </Step>
</Steps>

**Example**: Age-based navigation

* User selects "18-24" → Show student discount
* User selects "25-34" → Show professional plans
* User selects "35+" → Show family packages

**Supported actions**: Navigate, Show/Hide, External Link, Purchase

### Scroll To

Smoothly scroll to a specific element on the same screen.

**When to use**: Most commonly for paywall screens which tend to be longer
with multiple pricing tiers, testimonials, and FAQs. Also useful for jumping
to specific sections on any longer screen.

**Settings:**

* **Target element**: Where to scroll
* **Delay** (optional): Wait before scrolling

## Cancellation Actions

Special actions only available in cancellation funnels. These help retain
customers who want to leave. See [Cancellation Funnels](/dashboard/funnels#cancellation-funnels)
for setup details.

### Pause Subscription

Temporarily suspend billing and access.

**When to use**: Seasonal products, temporary financial issues, or giving
users a break without losing them completely.

<Warning>
  Paused subscriptions lose access immediately. Consider offering a free
  period instead if you want to maintain access.
</Warning>

### Gift Free Period

Extend their subscription without charging.

**When to use**: Retention offer for unhappy customers, or buying time to
demonstrate value.

**Settings:**

* **Duration**: How long (days, weeks, months)
* **Amount**: How many periods

### Swap Subscription

Change to a different plan (usually cheaper).

**When to use**: Downsell to retain price-sensitive customers who would
otherwise cancel completely.

**Settings:**

* **New plan**: Target subscription from your catalog
* **Provider**: Must match current subscription

### Cancel Subscription

Process the cancellation if retention fails.

**When to use**: Final option after exhausting retention offers. Always
gather feedback about why they're leaving.

## Utility Actions

### Do Nothing

A special action that performs no operation.

**When to use:**

* Placeholder while building
* Custom JavaScript handles the interaction
* Testing trigger configurations

<Info>
  **Custom code**: If you've added JavaScript to handle an interaction,
  use "Do Nothing" to satisfy the action requirement without interference.
</Info>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Action not firing">
    Check that:

    * Element has a trigger configured
    * No JavaScript errors in browser console
    * Delays aren't too long (users might leave)
    * For dynamic actions: state exists and matches
  </Accordion>

  <Accordion title="Dynamic action going to wrong place">
    Verify:

    * State name matches exactly (case-sensitive)
    * All possible values are mapped
    * Default/fallback is configured
    * User actually provided that input earlier
  </Accordion>

  <Accordion title="Purchase not working">
    Common issues:

    * Using test keys vs live keys
    * Product not properly configured in PSP
    * For upsells: no stored card from previous purchase
    * Promocode settings misconfigured
  </Accordion>
</AccordionGroup>

## Next Steps

* [Variables & Dynamic Content](/editor/variables) - Use URL parameters and user data
* [Element Reference](/elements/overview) - See which elements support which actions
* [Publishing Guide](/editor/publishing) - Test actions in preview mode
* [Localization](/editor/localizations) - Translate dynamic content