How to Create a Whitelabel Membership PWA

Introduction

Offering a branded membership experience without the complexity of a traditional mobile app is possible with a Progressive Web App (PWA). This guide will walk you through the steps to set up, customize, and deploy your own whitelabeled membership PWA directly from your CRM.

Important: The Membership PWA feature is only available when using the Legacy Memberships experience. It is not supported in the Client Portal. If your account is currently using the Client Portal, you must switch to Legacy Memberships before proceeding.

Understanding the Membership PWA

A Progressive Web App (PWA) is a website that functions like a native mobile application. Users can install it directly onto their device's home screen from a web browser, bypassing official app stores. Your CRM's whitelabel Membership PWA allows you to apply your own branding and control the user experience for your members.

Key Benefits

• Cross-Platform Accessibility: Your PWA works on desktops, tablets, and mobile devices from a single codebase.
• App-Like Feel: Members can launch the membership portal from their device's home screen or application launcher.
• Simplified Distribution: No app store submission or approval process is required.

Prerequisites

Before configuring your PWA, ensure your membership foundation is solid.

Configure Your Branding

Navigate to Memberships > Courses > Settings > Branding within the Legacy Memberships experience. Here you can upload your business logo and a favicon, which will be used throughout the PWA to maintain brand consistency.

Set Up Your Membership Structure

Go to Memberships > Courses > Products to create or review your courses, pricing tiers, and access levels. A well-organized structure ensures a smooth experience for your members within the PWA.

Link a Custom Domain (Optional)

For a fully branded experience, consider linking a custom domain (e.g., app.yourbrand.com) through Settings > Domains. This adds a layer of professionalism and trust.

How to Set Up Your Whitelabel Membership PWA

Step 1: Access the Membership Settings

From your sub-account, navigate to Memberships. If the Client Portal opens, use the provided switcher to change to the Legacy Memberships experience. Then, select Courses > Settings from the top navigation menu.

Step 2: Locate the App Settings

Within the Membership Settings area, find and select the App Settings (or App Details) tile. This is the control center for your PWA's appearance and behavior. If you cannot see this tile, double-check that you are in the Legacy Memberships experience.

Step 3: Enable PWA Installation

Toggle the Enable PWA setting to the "on" position. This activates the functionality that allows your members to install the app on their devices. The specific installation prompt will vary depending on the user's browser and device.

Step 4: Customize Your PWA

With PWA installation enabled, you can now define the details of your app.

• App Name: Enter the full name of your app, which will be displayed in installation prompts and the app's title bar.
• Short Name: Provide a shortened version of the name for use in confined spaces like home screens or app folders.
• Description: Write a brief description that explains the purpose of your app.

Installing the PWA

Once your PWA is configured and published, your members can install it. The installation method differs by device and browser. Generally, users will look for an "Install" or "Add to Home Screen" option in their browser's menu while viewing your membership site.