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

# Components

> Show reusable portal content based on products, segments, and cancellation reasons.

Components let you show different messages to different customers using the same portal layout. Each component contains variants with conditions. Only the first matching variant appears.

## Enable the preview

This feature is currently a staff-enabled preview. Ask Firmhouse to enable **Conditional Customer Portal Content** under **New Features** for your project. You also need Customer Portal v2.

## Create a component

1. Open **Customer Portal → Components** and choose **Create component**. Choose **Create with Oppy** on the creation page if you want Oppy to generate the content from a description.
2. Enter a name and a template key, such as `cancellation_reassurance`. The key stays fixed after creation so existing placements keep working.
3. Add a variant, or edit the draft variant created by Oppy.
4. Add conditions for the customer's products, plan, segment, subscription status, deliveries, revenue, Shopify order tags, or selected cancellation reason. Every condition must match.
5. Set the priority. Lower numbers are checked first. If priorities tie, the variant created first wins.
6. Switch between **Preview** and **Code** to review and edit the content. After saving a variant, choose **Edit with Oppy** to iterate on its content and layout. You can also select the placed component in the template editor to edit it with Oppy.
7. Save, preview, and enable the variant when ready. Variants start disabled; components appear where you place their tag.

To create a fallback, leave a variant without conditions. Fallbacks are always checked after conditional variants. If nothing matches and there is no enabled fallback, customers see nothing.

## Place content in a template

Copy the tag from the component and insert it anywhere in a Customer Portal page template:

```liquid theme={null}
{% component 'cancellation_reassurance' %}
```

The same component can appear on multiple pages. Saving a variant updates its enabled placements immediately. Components cannot contain other component tags.

Component content supports the usual `subscription`, `project`, `locale`, and `churn_request` Liquid context. Use unique translation keys with the `t` filter; translations for referenced variants appear in the surrounding page's translation editor.

## Preview the result

The inline preview shows the saved content of the selected variant, including disabled variants. Switch between **Desktop** and **Mobile** to inspect its responsive layout. The complete component scales to fit the preview area. It does not evaluate eligibility.

Open **Customer Portal → Templates** and edit a template containing your component. Use the template editor's subscription picker to preview the matching content in its page layout. The cancellation follow-up template also lets you choose a reason. Enable the variants to preview their eligibility; no matching content produces an editor placeholder. Remove the component tag to stop showing it on a page.

## Customize cancellation pages

The template library includes **Cancellation reasons** (`cancellation.liquid`) and **Cancellation follow-up** (`cancellation_follow_up.liquid`). Keep the corresponding control component in each layout:

```liquid theme={null}
{% cancellation_reasons %}
```

```liquid theme={null}
{% cancellation_follow_up %}
```

Place conditional content before, after, or alongside these controls. Cancellation reasons remain available to customers independently of content conditions.

A selected-reason condition only matches after the customer chooses a reason and presses **Continue**. Selecting a radio button alone does not refresh the content. The initial reasons page has no selected reason.

Existing cancellation pages keep using the current **Other pages** layout until you publish the corresponding cancellation template. Disabling the preview feature restores that layout and hides components. Cancellation permissions, offers, and completion actions continue to use the existing flow.