> For the complete documentation index, see [llms.txt](https://docs.funnelish.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.funnelish.com/resources/customer-portals.md). # Customer Portals The Customer Portal is a secure, logged-in area where your customers can now manage their own subscriptions and orders without needing to contact your support team. Inside the portal, customers will be able to: * View active subscriptions and their included items. * Change item quantities, skip a shipment, pause, resume, or cancel subscriptions. * Request their next order early. * Update payment cards, contact information, and shipping details. * Browse their past order history. You have full control over the visual design of every screen. When a customer logs in, the portal automatically populates your design with their real data and your buttons trigger real backend actions (like pausing a subscription) based on the click actions you assign to them. To access your Customer Portal, click on "...More" > Customer Portals.

To start building your customer portal, click here:

Now fill in the following details for your Portal and click "Create your Portal" to save the changes.

Once you create your Customer Portal, you’ll see two pages representing the available screens. The portal functionality is already built in, so you only need to customize the design, connect elements to the relevant customer data, and choose which actions customers can perform. You can edit each screen independently, just like a regular funnel page.

Think of the portal as a few connected screens. Here’s what each one does: **The Login Screen** is where the customer will enter their email or phone number, receive a one-time code, and types it in to log in. This is automatic — you style it, the portal handles\ the security.

To customize it, click on the **Login** screen > **Edit Page:**

**The Customer Portal Screen** is where your customers will see their subscription details, products, payment methods etc after logging in.

To customize it, click on the **Customer Portal** screen > **Edit Page:**

## Customer Portal Screen and Sections Here is a breakdown of what each section does and how to set it up. #### Subscriptions List This is the first screen customers see after logging in. It displays one card per subscription, outlining the subscription’s name, price, billing frequency, status, and next billing date.

> :bulb:If a customer has multiple subscriptions, this list will paginate automatically. Clicking a card opens that specific subscription’s detail screen. #### Subscription Detail (“Current Subscription”) This is the full management view for a single subscription. Once an "active subscription" card is clicked on, the customer will see: * **Items**: Each product in the subscription (image, name, price, and quantity). * **Order summary:** A complete price breakdown (line items, sales tax, discounts, and total). * **Customer & address:** Shipping and billing information. * **Payment method:** The saved card details (brand icon + masked number). * **Action buttons:** You decide which buttons appear (e.g., skip, pause, resume, cancel, change date, update card). * **Back button:** Returns the user to the main subscriptions list.

#### Multi-Quantity (Editable Item Quantities) You can also allow customers to adjust how many of a specific item they receive. {% embed url="" %} {% hint style="warning" %} When a customer adjusts a quantity, the change remains "**pending**." Nothing is charged or finalized unless they click the Save changes button. {% endhint %} #### Orders History A separate tab that lists the customer’s past orders (one card per order). Clicking an order expands it to reveal line items, taxes, discounts, and totals. Long histories will automatically paginate.

#### Confirmation Popups Sensitive actions (like canceling) trigger a confirmation popup rather than happening immediately on the first click. * The cancellation popup can be configured to collect a cancellation reason. * You can edit the text, button labels, and options of these popups directly in the editor. * Upon confirmation, the portal processes the action, displays a success message ("toast"), and refreshes the screen. #### Paused Subscriptions When a subscription is paused, the system automatically blocks actions that no longer apply (e.g., skip next order, change next order date, get order now). The customer will see a gentle note stating, *"You can’t change a paused subscription."* Options like Cancel and Settings remain active. {% hint style="info" icon="lightbulb" %} This logic is completely built-in; no extra configuration is required. {% endhint %} ## Click Actions, Datasets, and Conditional States When building Customer Portal pages, there are three main tools you’ll use to make the experience dynamic: **Click Actions**, **Datasets**, and **Conditional States**. Each one has a different role: * **Click Actions** control **what happens** when a customer interacts with a button. Found in the **interactions** panel. * **Datasets** control **what an element shows.** Found in the **data-bindings** picker. * **Conditional States** control **when** **an element shows or how it looks**, based on the\ subscription’s data. In other words, **Datasets show the right information, Click Actions let customers take action, and Conditional States make sure the page adapts based on the subscription’s current status or details**. Together, these allow you to build a Customer Portal that is personalized to each customer and lets them manage their subscriptions directly from the page. Now let's dive into each one: ### Click Actions Click Actions determine what happens when a customer clicks a button. They are configured from the Interactions tab and become available whenever you're editing a Customer Portal page. Each action automatically knows which subscription it should affect based on where the button is placed. For example, a button inside a Subscription Card affects that specific subscription, while a button on the Subscription Details page affects the currently opened subscription. No additional setup is required.

#### Subscription Actions

Subscription Actions	What they do
View Subscription details	Displays the subscription details.
Pause Subscription	Pauses recurring billing and shipments.
Resume Subscription	Reactivates a paused subscription.
Cancel Subscription	Starts the cancellation flow and optionally collects a cancellation reason.
Skip Next Order	Skips the customer's next scheduled shipment.
Update Next Order Date	Allows customers to choose a new billing date for their next order.
Get Order Now	Processes the next subscription order immediately.
Remove Subscription Item	Removes the selected product. If it's the final item, the customer is redirected to the cancellation flow.
Save Changes	Applies any pending quantity changes made through Multi-Quantity.
Update Payment Method	Allows customers to securely replace their saved payment method.
Update Customer Details	Allows customers to update shipping information and other details.
Log Out	Logs the customer out of the portal.

#### Upsell Actions The Customer Portal also supports subscription upsells:

Upsell Actions	What they do
Upsell – Add Once	Adds a product to the customer's next order only. Future renewals remain unchanged.
Upsell – Add Recurring	Adds a product permanently to the subscription so it will be included in every future renewal until removed.

### Datasets - Dynamic data you can drop into your design A dataset lets you bind an element (text, image, etc.) to real customer data instead of typing fixed text. You pick a dataset and a field from the data-bindings picker, and the portal fills it in per customer.

#### Types of Datasets **Single Dataset** These datasets populate a single element with one value. For example: * Current Subscription * Customer Information * Payment Method * Summary Total. You can bind the fields directly to elements (text, image, etc.) anywhere on the page. {% hint style="info" %} To read more about data binding, have a look at our Data Binding article {% endhint %} **Repeating Datasets** These are connected to a Repeater. You design a single container, such as a card or row, and bind the elements inside it to the relevant data fields. The Repeater then automatically duplicates that design for each available record. For example, it can display one card per product in a subscription or one row per previous order. This means you only need to build the layout once, then the portal automatically fills in and repeats the remaining items. {% hint style="info" %} To read more about the repeater element, have a look at our article {% endhint %} #### Subscription datasets These will provide information about a subscription. The **Current Subscription** *(the one the customer has opened — usable anywhere on*\ \&#xNAN;*the page)* **and Active Subscription** *(the list — repeats once per card)* dataset provide these same fields for whichever subscription the customer is currently viewing:

Dataset	What it reflects
Subscription name	The subscription’s name (its first active item name)
Item names	All active item names, comma-separated
Items count	Total quantity across active items
Subtotal	Total cost of all active items before discounts and tax
Discount	Total discount applied to the subscription
Total	Final subscription amount after discounts and tax
Tax rate	Tax percentage applied to the subscription
Tax total	Total tax amount applied to the subscription
Billing frequency	e.g. “every 30 day(s)”
Billing period	e.g. “per month”
Status	Active / paused / cancelled
Next billing date	Renewal date of subscription
Paused until	The date a pause ends (blank when not paused)
Subscription ID	Bind a radio’s value to it so customers can select the current subscription

#### Subscription item datasets *(repeating list)* **Subscription items** *(inside a subscription card)* and **Current subscription items** *(the opened subscription — usable anywhere)* — one entry per product:

Dataset	What it reflects
Item name	The product or subscription item’s name
Item price	The item’s individual price, e.g. “$26.40”
Recurring price	The item’s price and billing cadence, e.g. “$26.40 every 30 days”
Quantity	The number of units included in the subscription
Status	The item’s current status, such as active, paused, or cancelled
Item image	The product image associated with the item

#### Order datasets **Order history** *(the orders list — repeats once per order)*:

Dataset	What it reflects
Order name	The order’s name or reference number
Order date	The date the order was placed
Order total	The final amount paid for the order
Status	The order’s current status, such as paid, failed, refunded, or cancelled
Items count	Total quantity of items included in the order
Order tax	Total tax amount applied to the order
Tax rate	Tax percentage applied to the order
Discount	Total discount applied to the order

**Order items** *(repeating list — the products in an order)*:

Dataset	What it reflects
Item name	The product name
Quantity	The number of units purchased
Item price	The item’s individual price
Item image	The product image associated with the item

#### Order summary (current subscription price breakdown) There’s no separate summary dataset — you build the summary from data you already have: a repeating **Current subscription items** block for the line items, plus the **Current subscription**’s **Subtotal**, **Discount**, **Tax total**, and **Total** fields for the breakdown rows. #### Customer & payment datasets **Customer** *(the current subscription’s contact & address details — usable*\ \&#xNAN;*anywhere on the page)*: * **Full name**, **Initials**, **First name**, **Last name** * **Email**, **Phone** * **Shipping**: address, city, state, ZIP / postal code, country * **Billing**: address, city, state, ZIP / postal code, country **Payment details** (the saved card): * **Card number** (masked, e.g. “•••• 1234”) * **Expiry month**, **Expiry year** * **Card brand** — e.g. visa, mastercard, amex * **Card brand icon** — the brand’s logo #### Products dataset **Products** *(repeating list)* — for building upsell/add-product blocks: * **Product ID**, **Name**, **Title** * **Price**, **Displayed price** * **Product image** > **Tip:** Datasets and click actions work together. A common pattern is a\ > repeating **Products** block where each card shows the product’s image, name,\ > and price (datasets) with an **Upsell – add recurring** button (action). *Note: Datasets prefixed with "Current" (like Current Subscription or Current Subscription Items) behave the same way but specifically reference the subscription the customer is currently viewing.* ### Conditional States Conditional States allow elements to appear, disappear, or change based on subscription information, allowing you to create dynamic Customer Portal experiences without writing any code. You can set conditions independently for every subscription. For example: * Display the **“Paused”** badge only when the subscription is paused. \ To do this, click the **Paused** paragraph element. In the left panel, make sure visibility is enabled for all devices. Then, under **State**, select **Paused**.

Show a “Paused” badge only when the subscription is paused

* Showing a "Resume Subscription" button only for paused subscriptions.

Hide the Resume button unless the subscription is paused

{% hint style="info" %} You can also **hide certain actions** depending on the customer's payment gateway or **display different elements** based on billing frequency or billing cycle. {% endhint %} ### Final Overview Once assembled, the **Subscription Details** page gives customers a clear view of their current subscription and the tools they need to manage it directly from the portal. A typical setup would include: 1. A **Current Subscription** heading connected to the subscription **Name**, with a **Status** badge beside it. 2. A repeating **Current Subscription Items** section showing each product in the subscription. Each item row displays the product image, name, price, quantity field, and a **Remove Subscription Item** button. 3. A **Save Changes** button that customers can use after editing item quantities. 4. An **Order Summary** section showing the subscription line items, discounts, taxes, and total. 5. Action buttons for common subscription changes, such as **Skip Next Order**, **Pause Subscription**, **Update Payment Method**, and **Update Customer Details**. 6. A **Resume Subscription** button that only appears when the subscription is paused, using Conditional States. When customers log in, the portal automatically fills this page with their own subscription data. The buttons then perform the actions you assigned to them, so customers can manage their subscription without contacting support.