Skip to main content
Components are reusable pieces of content for your Customer Portal. Add a component to a page, then choose which customers see it.

​
Enable the preview

Components and the cancellation flow builder are available as a preview. Contact Firmhouse support to enable them for your project. You also need Customer Portal v2. Customers use the cancellation flow only after you publish it. You can create and edit components with Oppy on Advanced if you have permission to edit components. You do not need an Agent seat. Once support has enabled components, you can edit them manually on other plans if you have editing permission.

​
Create a component

  1. Open Customer Portal → Components and choose Create component. Pick a starting point: Text, Image and text, Video or Banner. Oppy is open in the sidebar as soon as the component is created, so you can ask it to change anything.
  2. Firmhouse names the component after your choice. Rename it at the top of the editor whenever you like. Firmhouse generates the template key from the name, for example cancellation_reassurance. The key stays fixed after creation.
  3. Click any text on the canvas to edit it in place. Click a link, button, image or video to change where it points in a small popover right there, or choose Remove to take it out (an Undo appears for a few seconds). For images you can also upload a picture (JPG, PNG, WebP or GIF, up to 5 MB). Use Add block to add more content, and hover a block to move it up or down or remove it. None of this reloads the page, and nothing changes for customers until you save. Switch between the desktop and mobile icons at the top to see how the component looks on each screen size.
  4. A block is just HTML. The starting points are plain HTML snippets, and plain HTML you paste into Code works the same way: its text, links, images and alt text automatically become editable on the canvas and translatable. Blocks that use Liquid logic such as {% if %} are not converted, so give their text translation tags yourself. Use the switch at the top to go from the Visual editor to Code when you need full control. Changes you make in Code show on the canvas when you switch back, and canvas changes are applied when you save. Oppy’s changes appear as an unsaved draft until you save. Choose Edit with Oppy to iterate on the content and layout.
  5. Save the component. The components overview shows a live preview of each component and which pages and cancellation flow use it. Pages and flows that only use it in an unpublished draft are marked (draft). You can delete a component from there.

​
Translate a component

If your project has more than one language, a language switcher appears at the top of the editor. Switch language and edit the text, links and images on the canvas. Switching never reloads the page or loses your unsaved edits. Anything you leave empty shows the text of your main language, which is the first language enabled for your project. A language’s own text for a component takes priority over the page’s translations. Component content supports the usual subscription, project, locale, and churn_request Liquid context. Use unique translation keys with the t filter; translations for referenced components appear in the surrounding page’s translation editor. Components cannot contain other component tags.

​
Add a component to a page

Open Customer Portal → Templates and edit a page in the visual editor. Hover or select any part of the page and choose + Component above or below it. Pick a component, and Firmhouse saves a new draft of the page with the component in place. Publish the draft to show it to customers. Select an added component to choose who sees what at that spot:
  • Add more than one component to show different customers different content.
  • Add conditions to each component for the customer’s products, plan, segment, subscription status, deliveries, revenue, Shopify order tags, or selected cancellation reason. Every condition must match.
  • Components are checked from top to bottom, and the first match is shown. Drag a component by its handle to change the order, then save.
  • A component without conditions is shown to everyone who did not match an earlier one. Components below it are never shown, and the panel marks them so you can fix the order.
  • If nothing matches, customers see nothing.
Choose Remove from page to take the component out of the draft. The panel shows which component the preview subscription currently sees, and you can switch the preview subscription in the editor toolbar to check other customers. You can also select a component in the editor to edit it with Oppy. Editing a component updates every page that shows it, so review where it is used before changing a component that is already live. The component editor lists and links to every page and cancellation flow that uses it, and warns you when customers currently see it. Deleting a component removes it from every page, from the “who sees what” lists, and from your draft cancellation flow. Customers stop seeing it right away, including in a published cancellation flow. You can also paste a component tag into a template yourself:

​
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:
Place components before, after, or alongside these controls. Cancellation reasons remain available to customers independently of component 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, hides components, and returns cancellation attempts to the existing journey. Cancellation permissions, offers, and completion actions continue to use the existing flow.