Contents
- What is a Whitelabel Membership PWA?
- Key Benefits of a Whitelabel Membership PWA
- PWA vs. Native Mobile App: Key Differences
- Prerequisites: Prepare Your Membership and Branding
- How to Set Up Your Whitelabel Membership PWA
- Frequently Asked Questions
What is a Whitelabel Membership PWA?
A Progressive Web App (PWA) is a web-based solution that feels like a mobile app but runs in a browser.
With Concours Pro’s Whitelabel Membership PWA, you can create a fully branded experience for your membership site, controlling its look and content without needing a traditional app. Users access it through a browser and can install it on their device—no app store required. This makes it a cost-effective, flexible way to deliver an app-like experience without the hassle of native app development.
Key Benefits of a Whitelabel Membership PWA
- Device Compatibility: Works seamlessly on mobiles, tablets, and desktops without extra development.
- Offline Access: Users can view previously loaded content even without an internet connection.
- SEO Advantage: Search engines can index PWAs, boosting your online visibility.
- Quick Loading: Optimised for fast performance, ensuring a smooth user experience.
PWA vs. Native Mobile App: Key Differences
| Feature | PWA | Native Mobile App |
|---|---|---|
| Installation | Installed via browser, no app store needed | Downloaded from App Store or Google Play |
| Updates | Auto-updates on refresh | Requires manual updates via app stores |
| Offline Capability | Limited access to cached content | Full offline functionality |
| Push Notifications | Supported on Android, limited on iOS | Fully supported |
| Performance | Fast and lightweight | Faster for complex apps |
| Approval Process | No app store approval needed | Subject to App Store/Google Play rules |
Prerequisites: Prepare Your Membership and Branding
Before setting up your PWA, get your branding and membership structure ready to ensure a professional, polished experience.
- Customise Branding: Head to Memberships > Settings > Branding. Upload your logo, pick a colour scheme, and add a favicon for browser tabs to keep your brand consistent.
- Organise Membership Structure: Go to Memberships > Products. Set up product tiers, add courses, and define pricing and access levels for a clear user journey.
- Add a Custom Domain (Optional): In Settings > Domains, link a branded domain (e.g., app.yourbrand.com) to build trust and enhance the app-like feel.
With these in place, you’re ready to configure your PWA.
How to Set Up Your Whitelabel Membership PWA
Access Memberships
Start by going to the Memberships section in the left menu, then navigate to Courses > Settings using the top bar. This opens the Membership Settings area where you’ll configure your PWA.
Select App Settings
In Courses > Settings, find the App Settings tile. This is where you’ll tweak how your PWA looks and works on both desktop and mobile devices.
Enable PWA Installation
Turn on the Enable PWA option to let users install your app on their devices. This makes your PWA accessible via browsers like Chrome, Safari, or Edge, with an installation prompt for users.
Customise Your PWA Settings
Once Enable PWA is toggled on, you’ll see fields to customise your app’s appearance and behaviour.
- App Name, Short Name, and Description:
- Name: The full app name shown in installation prompts and title bars.
- Short Name: A shorter version for home screens or compact displays.
- Description: A quick sentence explaining what your app does, shown during installation.
- App Icon: Upload two icons (512×512 and 192×192) in .jpg or .png format. These appear on splash screens, app drawers, and home screens. Ensure both are identical for brand consistency and match the exact dimensions.
- App Colours: Choose from predefined colour palettes to style buttons, headers, and other UI elements. The options ensure good contrast and clarity across devices, aligning with your brand.
Save Your Settings
After entering your app details, uploading icons, and selecting a colour palette, click Save in the top-right corner. If you skip this, your changes won’t apply when users install the PWA.
Installing PWA on a Windows Computer
Once your PWA is set up and enabled, users can install it on a Windows PC using Chrome. They’ll see an install icon in the browser’s address bar when visiting your Memberships Login Portal. Clicking it adds a desktop shortcut for quick access.
Installing PWA on a Mac Computer
On a Mac, users can install the PWA using Chrome. When they visit the Memberships Login Portal, they’ll see an option to download the PWA, which creates a shortcut for easy access.
Installing PWA on an Android Mobile Device
For Android, PWAs are supported only in Chrome. Users can install it by visiting the Memberships Login Portal and selecting Add to Home Screen from the browser menu.
Installing PWA on an iOS Mobile Device
On iOS, PWAs work in Safari (version 11.3+). Users open the Memberships Login Portal in Safari and select Add to Home Screen from the browser menu.
Frequently Asked Questions
Can I submit my PWA to the App Store?
Yes, but you’ll need to package it as a native app using tools like PWABuilder or Capacitor.
Does my PWA work offline?
Yes, for content users have already loaded. Full offline functionality needs advanced caching setup.
Can I send push notifications with a PWA?
Push notifications work on Android but have limited support on iOS.
Do I need a developer to set up a whitelabel PWA?
No, Concours Pro’s interface is user-friendly, so you can configure it without coding.
