Chart tweaks and misc

content/docs/dashboard/charts/paid-conversion.mdx

@@ -3,6 +3,8 @@ title: "Paid Conversion"
 description: "Learn what the Paid Conversion chart measures and when to use it."
 ---
 
+<Frame>![Paid Conversion chart](/images/charts/paid-conversion.jpg)</Frame>
+
 ## What it shows
 
 Paid Conversion shows the percentage of installs that became paying users.

content/docs/dashboard/charts/realized-ltv-per-new-user.mdx

@@ -3,6 +3,8 @@ title: "Realized LTV per new user"
 description: "Learn what the Realized LTV per new user chart measures and when to use it."
 ---
 
+<Frame>![Realized LTV per new user chart](/images/charts/realized-ltv-per-new-user.jpg)</Frame>
+
 ## What it shows
 
 Realized LTV per new user shows net proceeds per new user, cohorted by install date.

content/docs/dashboard/charts/realized-ltv-per-paid-user.mdx

@@ -3,6 +3,8 @@ title: "Realized LTV per paid user"
 description: "Learn what the Realized LTV per paid user chart measures and when to use it."
 ---
 
+<Frame>![Realized LTV per paid user chart](/images/charts/realized-ltv-per-paid-user.jpg)</Frame>
+
 ## What it shows
 
 Realized LTV per paid user shows net proceeds per paying user, cohorted by install date.

content/docs/dashboard/dashboard-creating-flows/tips.mdx

@@ -39,16 +39,15 @@ By default, when a user makes a purchase, the paywall or flow will close. But in
 To set something like this up:
 
 1. Select the purchase action on your button.
-2. Look for the **After Purchase** setting.
-3. Choose from the available options:
+2. Look for the **After purchase** section.
+3. Add one or more actions:
    - **Close:** Dismisses the flow (the default).
    - **Navigate Page:** Advances to the next page in the flow. This is the most common choice for flows where the purchase happens mid-journey.
    - **Open URL:** Opens a link after purchase.
    - **Custom Action:** Triggers a custom action in your app.
    - **Custom Placement:** Registers a placement after purchase.
    - **Set Attribute:** Sets a user attribute when the purchase completes.
    - **Set State:** Updates a state variable.
-   - **None:** Does nothing, letting the flow proceed naturally.
 
 <Frame>![](/images/flows_tips_post_purchase.jpg)</Frame>
 
@@ -60,6 +59,10 @@ The **Navigate Page** option is particularly useful in flows. Instead of closing
 - Guiding users through initial setup.
 - Placing a paywall in the middle of a flow and continuing the journey after conversion.
 
+Purchase actions also include an **On Abandon** section. Use it when users should take a different path if they open the purchase sheet and cancel before completing the transaction. For example, you can close the Flow, navigate to a recovery page, set a state variable, or register a custom placement.
+
+For the full option list and SDK requirements, see [Purchase outcome actions](/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements#purchase-outcome-actions).
+
 ### Simulate permission prompts
 
 Using the permissions tap behavior, you can test Flows without having to run it on device. The canvas view will allow you to mock either response when you interact with a component with the permission behavior:

content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-settings.mdx

@@ -6,7 +6,7 @@ To configure settings for your paywall, click the **Settings** button from the *
 
 <Frame>![](/images/pe-editor-settings-sidebar.png)</Frame>
 
-You have four primary properties of your paywall to configure here, all are set with default values.
+Use this menu for paywall-wide presentation and behavior settings. The fields shown can vary by platform and account features, but each setting starts with a default value.
 
 ### Presentation Style
 
@@ -19,6 +19,34 @@ Toggle the presentation style of your paywall. Available options are:
 5. **Drawer:** The paywall presents from a bottom drawer with customizable height and corner radius.
 6. **Popup:** The paywall presents as a modal popup with customizable width, height, and corner radius from the center of the screen.
 
+#### Presentation Style Examples
+
+These examples use the same paywall so the presentation differences are easier to compare.
+
+**Fullscreen** fills the device screen.
+
+<Frame>![Fullscreen presentation style example](/images/pe-editor-presentation-style-fullscreen.jpg)</Frame>
+
+**Push** presents the paywall through the app's navigation stack.
+
+<Frame>![Push presentation style example](/images/pe-editor-presentation-style-push.jpg)</Frame>
+
+**Modal** uses the platform's default modal presentation.
+
+<Frame>![Modal presentation style example](/images/pe-editor-presentation-style-modal.jpg)</Frame>
+
+**No Animation** presents modally without the transition animation.
+
+<Frame>![No Animation presentation style example](/images/pe-editor-presentation-style-no-animation.jpg)</Frame>
+
+**Drawer** presents from the bottom of the screen.
+
+<Frame>![Drawer presentation style example](/images/pe-editor-presentation-style-drawer.jpg)</Frame>
+
+**Popup** presents in the center of the screen with configurable sizing.
+
+<Frame>![Popup presentation style example](/images/pe-editor-presentation-style-popup.jpg)</Frame>
+
 #### Drawer Configuration
 
 When using the **Drawer** presentation style, you can configure:

content/docs/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements.mdx

@@ -61,10 +61,47 @@ Available tap actions are:
 
 **Purchases**
 
-- **Purchase:** Begin a purchasing flow of the selected product. After a successful purchase, you can configure what happens next using the **After Purchase** setting. Options include **Close** (default), **Navigate Page** (advance to the next page in a flow), **Open URL**, **Custom Action**, **Custom Placement**, **Set Attribute**, **Set State**, or **None**.
+- **Purchase:** Begins the purchase flow for a specific product. Choose a product directly, or use **Selected** to purchase whichever product the user selected earlier in the paywall.
 - **Select Product:** Puts the chosen product in a selected state. Useful for scenarios such as focusing a product in a paywall drawer, for example, when something is tapped or clicked.
 - **Restore:** Begins a purchase restore operation. Useful for restoring purchases someone may have made prior.
 
+#### Purchase outcome actions
+
+Purchase actions can run follow-up actions after the purchase flow resolves. This lets one purchase button handle the success path and the abandon path separately.
+
+<Frame>![Purchase tap behavior showing After purchase and On Abandon actions](/images/pe-editor-purchase-outcome-actions.jpg)</Frame>
+
+The Purchase action includes three important settings:
+
+| Setting | What it does |
+| --- | --- |
+| **Product** | The product to purchase. Choose a product by position, such as the first or second product, or choose **Selected** to use the product currently selected on the paywall. |
+| **After purchase** | Actions that run after Superwall receives a successful transaction result. The default is **Close**. |
+| **On Abandon** | Actions that run when the user starts the purchase flow, then cancels or dismisses it before the transaction completes. Leave this empty if you do not want a special abandon response. |
+
+You can add multiple actions to either **After purchase** or **On Abandon**. They run in order from top to bottom. Available outcome actions include:
+
+- **Close:** Dismisses the paywall or Flow.
+- **Navigate Page:** Moves forward or backward in a Flow.
+- **Open URL:** Opens a URL after the purchase outcome.
+- **Custom Action:** Sends a custom action to your app.
+- **Custom Placement:** Registers a placement, which can present another paywall if your campaign is configured for it.
+- **Set User Attribute:** Sets one or more user attributes.
+- **Update Variable:** Updates a paywall state variable.
+- **Redeem Purchase:** Handles web checkout redemption behavior where available.
+
+Before these actions run, Superwall updates transaction state variables for the current paywall. After a successful purchase, `state.didCompleteTransaction` is set to `true` and `products.purchased` points to the purchased product. After an abandoned purchase, `state.didAbandonTransaction` is set to `true` and `products.abandoned` points to the product the user tried to buy. You can use those variables in follow-up actions, conditional content, drawers, or Liquid values.
+
+<Warning>
+  On iOS and Android, **On Abandon** actions and **After purchase** actions other than
+  **Close** require iOS SDK 4.12.6+ or Android SDK 2.6.9+.
+</Warning>
+
+<Note>
+  Post-purchase action lists are not available for external checkout. For external Stripe
+  checkout, Superwall uses the application-level redeem purchase behavior instead.
+</Note>
+
 **Navigation**
 
 - **Navigate Page:** Moves through a [Flow](/dashboard/dashboard-creating-flows/getting-started). Use this to progress users through multi-page experiences like onboarding.
@@ -245,6 +282,9 @@ Here, you can see a manually set background value for the selected component:
   the design you need. For example, here we should simply use the `layer` section to set a
   background color.
 </Warning>
+
+This section applies CSS properties to the selected component. It is not a full stylesheet editor, so it cannot define CSS rules or `@keyframes` blocks. CSS `@keyframes` are not currently supported in the paywall editor's Custom CSS fields; use tap behavior animations, Effects, Lottie, GIFs, or video for motion.
+
 ### CSS Output
 
 As you make any changes to these properties, you can see the actual CSS that Superwall is applying by scrolling down in the component editor to the **CSS Output** section:

content/docs/dashboard/guides/tips-abandoned-transaction-paywall.mdx

@@ -3,10 +3,19 @@ title: "Abandoned Transaction Paywalls"
 description: "Learn how to respond when a user starts a purchase, then cancels the transaction."
 ---
 
-When a user opens the store purchase sheet and dismisses it before completing the purchase, Superwall tracks a `transaction_abandon` event. You can respond to that in two ways:
+When a user opens the store purchase sheet and dismisses it before completing the purchase, Superwall tracks a `transaction_abandon` event. You can respond to that in three ways:
 
-1. Show another paywall with a `transaction_abandon` placement.
-2. Keep the user on the current paywall and reveal a drawer, offer, or survey using the `didAbandonTransaction` paywall state.
+1. Run an **On Abandon** action from the purchase button.
+2. Show another paywall with a `transaction_abandon` placement.
+3. Keep the user on the current paywall and reveal a drawer, offer, or survey using the `didAbandonTransaction` paywall state.
+
+## Run an On Abandon action
+
+Use the purchase action's **On Abandon** section when the response belongs to the button that started the purchase. This is the simplest option for cases like closing the paywall, moving to a recovery page in the same Flow, setting a state variable, or registering a custom placement after the user cancels the purchase sheet.
+
+To set it up, select the purchase button, open its **Tap Behavior**, and add one or more actions under **On Abandon**. The actions run after Superwall receives the abandon result, so `state.didAbandonTransaction` and `products.abandoned` are already available when they execute.
+
+For the full list of outcome actions and SDK requirements, see [Purchase outcome actions](/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements#purchase-outcome-actions).
 
 ## Show another paywall instead
 

content/docs/support/paywall-editor/6426797732-how-do-i-animate-text-elements-in-the-superwall-editor.mdx

@@ -2,25 +2,29 @@
 title: "How do I animate elements in the Superwall editor?"
 ---
 
-
 Context
 -------
 
-When designing paywalls in Superwall, you might want to add animations to elements to make them more engaging. While CSS keyframe animations are not currently supported, there are alternative methods available for adding animations to your paywall elements.
+When designing paywalls in Superwall, you might want buttons, text, banners, or product cards to move, fade, or pulse. There are a few supported ways to do this, depending on whether you need simple tap feedback, a transition between two states, or a longer decorative animation.
 
 Answer
 ------
 
-There are currently two ways to add animations to elements in the Superwall editor:
-
-1.  Using Lottie animations
-
-    *   For example the "Delayed X" element uses Lottie animation
-
-2.  Using the Effects section
-
-    *   Can be used to animate value changes
-
-    *   Requires triggering through user actions (such as button presses)
-
-    *   Works in conjunction with [Dynamic Values](https://superwall.com/docs/paywall-editor-dynamic-values#dynamic-values)
+No. CSS `@keyframes` blocks are not currently supported in the paywall editor's Custom CSS fields.
+
+The **Custom CSS** panel in the element properties sidebar only accepts individual CSS properties for the selected element. It is not a full stylesheet editor, so an `@keyframes` block will not work there.
+
+Use the lightest option that fits the effect:
+
+1. Use the tap behavior **Animation** dropdown for basic press feedback like shrink, grow, or fade.
+2. Use **Effects** when an element should smoothly transition between two values, such as fading in after a state variable changes.
+3. Use Lottie, GIFs, or video for longer decorative animations or detailed motion graphics.
+
+If you paste `@keyframes` into a Custom CSS field, the animation may be ignored and should not be treated as supported behavior.
+
+Related docs
+------------
+
+- [Custom CSS](/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements#custom-css)
+- [Tap behavior animations](/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements#animation)
+- [Effects](/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements#effects)