While you can seamlessly customize the appearance and default functionality of the Affinity customer portal, you can leverage advanced configuration options to personalize the customer portal's behavior and use Affinity’s provided extension points to fully integrate custom elements within the portal.

This guide outlines the customizations you can make to the Affinity customer portal.

Before you start

• Advanced customizations to the Affinity customer portal theme require custom code and are not supported by Recharge as per the design and integration policy. Work with a third-party developer if you require developer assistance.
• See Customizing the Affinity customer portal theme for general customization instructions.
  
• You must be on the Recharge Pro plan, or a Custom plan, to make advanced customizations to the Affinity customer portal.

Customization possibilities and limitations

Recharge is committed to improving the functionality of the Affinity portal based on merchant feedback. To prevent you from locking into a specific version, Recharge does not expose the source code and instead provides safe patterns to achieve your desired customizations.

Review the chart below for an idea of what you can accomplish using the Affinity customer portal:

Extending Affinity with custom content

Use content extensions to personalize Affinity with custom content that you create. Add your own banners and widgets, promote products, or create custom components to match the portal. Place your custom content globally in the portal, or specific locations throughout the portal, referred to as slots. 

Add the following content extensions in slots on the Affinity portal:

• Announcements: Incorporate custom banners, messages, and announcements into your customer portal. For example, you could use a banner to keep customers informed and engaged about upcoming events, or shipping delays due to the weather.
• Brand/Educational content: Align your customer portal with your brand ethos using extensions, and educate your customers on your mission and values. For example, consider adding a "Your Impact" banner to display to customers the reduction in plastic use based on their choice to shop with your eco-friendly brand. 
• Product offers: Spotlight new or seasonal products, encouraging customers to explore new products and easily add them to their upcoming orders.
• Third-party app widgets: Integrate widgets from third-party apps, like loyalty points programs, directly into the customer portal, offering a seamless user experience.
• Navigation: Enhance the user experience by upgrading your navigation to include links to relevant external pages, like a referrals program landing page.
• Custom components: Enhance portal functionality with bespoke components that cater to specific customer needs or interests.

Use slots to display your content extensions in the following places on the customer portal for maximum impact:

• Header: Positioned at the top of the content section, these extensions are immediately visible upon page load, ideal for high-priority messages.
• Footer: Located at the bottom of the content section, footer extensions are suitable for essential, but less urgent, information.
• Sidebar: Situated between the navigation list and the logout link, sidebar extensions offer a balance of visibility and subtly, great for additional navigation options or contextual information.

Adding custom content through slots in Affinity requires advanced customizations and requires a developer to implement. See adding custom content in Affinity in the Recharge Developer Docs for detailed instructions on implementing custom content through slots in your portal.

Monitoring user behavior

Affinity uses events to broadcast crucial information, offering insights into user behavior, and allowing you to personalize the customer journey with custom flow extensions. 

You can use events in Affinity to analyze or customize the experience when a customer clicks on a specific part of the portal, or if a customer performs a specific action.

See the guide for leveraging events in the Recharge Developer Docs for a breakdown of events Affinity emits and listens for, as well as a detailed list of the types of events that are available.

Analytics

Use events to transmit data to your preferred analytics tools and gain insight into your users' behaviors:

Use Click and Action events to observe the completion rates when customers perform actions such as skipping or rescheduling an order, or ordering a product immediately. This is achieved by comparing the initial click, which shows intent, against the completion of the action.

Use Navigation events to analyze user engagement and map out customer journeys within your portal. This helps in identifying popular paths and potential areas for improvement.

Use Slot lifecycle events to evaluate the performance of your advanced extensions. Gather data on impressions to understand the reach and effectiveness of your extensions.

See the guide for leveraging events in the Recharge Developer Docs for more information.

Personalizing the user journey

Use custom flow extensions to intercept regular customer actions (ie. a customer skips or reschedules an order) and provide tailored experiences. Custom flow extensions intercept the initial click event even before the action occurrs. Recharge no longer owns the interaction after the click is intercepted, and you have full control over the flow.

See personalizing the user journey in Affinity in the Recharge Developer Docs for instructions on implementing custom flow extensions depending on the user experience, as well as instructions on creating a custom flow extension.

Using Affinity to meet specific business goals

Take your customer portal offering to the next level by using the advanced customizations available with Affinity. See the possibilities below to understand what you can accomplish with the help of a developer or Recharge Partner: 

Showcase specific products in the product carousel

Be selective with the products you offer through the product carousel by creating a dedicated collection. 

Alternatively, while you cannot hide specific product IDs from the carousel with custom code, you can hide the default carousel and build a custom solution that meets your business needs. Integrate this solution into the Affinity portal using dedicated extension points. See customize the product carousel in the Recharge Developer Docs for additional details.

Collect additional customer information

Consider developing a custom component to manage customer preferences (ie. dietary selections) and place the custom component in one of the dedicated extension points. 

See advanced content extensions in the Recharge Developer Docs for additional details.

Understand why customers skipped their next order

Build your own skip UI that tracks the skip reason collection, and also performs the actual skip for a customer. See create personalized flows in the Recharge Developer Docs for additional details.

Highlight the next delivery date, not the charge date

While you cannot update the different components that display that charge date to display the delivery day instead, you can develop a new component that indicates the next delivery date, and place it in a designated extension point.

You could also update the default language from the Translations page to communicate that the displayed date refers to the next charge date, not the next delivery date. 

See advanced content extensions in the Recharge Developer Docs for additional details.

Promote the manage my subscription link

You can add extra styling to update the appearance of the manage subscription link and make it look more like a button, giving it more prominence on the page.

See using custom CSS in the Affinity customer portal in the Recharge Developer Docs for more information.

Display specific dates on the reschedule calendar

Use Recharge's advanced settings to configure your desired appearance, without using JavaScript.

See reschedule options in the Recharge Developer Docs for more information.

Prevent customers from cancelling specific products

Listen to the cancellation link to prevent customers from cancelling specific products, and have them contact your support team instead. 

See preventing customers from cancelling specific products in the Recharge Developer Docs for setup instructions.

Displaying the bundles widget on the Affinity overview page

Make it easy for customers to edit the content of their bundles by placing the Bundles widget on the Affinity overview page.

Review displaying the bundles widget on the Affinity overview page in the Recharge Developer Docs for setup instructions.

Leveraging the SDK

Leverage the Recharge SDK to create smart content for Affinity. See displaying the bundles widget on the Affinity overview page for an example of how you can use the SDK to take your portal to the next level.