How to Use Web Fallbacks in the BuddyBoss App

Introduction

Web fallbacks let you embed any WordPress page or custom post type inside your BuddyBoss App, no React Native screen required. Fallbacks load responsively, automatically stripping your site theme’s header and footer so content appears as a native screen. Combined with deep linking, fallbacks ensure users move fluidly between web-based content and native app features (like member profiles or courses).

Tutorial Video

What Are Web Fallbacks?

Web fallbacks display your existing website pages (e.g., the WooCommerce shop or a Movies archive) inside the app when a dedicated React Native screen isn’t available. The app wraps these pages in its native header and navigation, delivering a seamless experience without rebuilding each page in code.

Benefits of Web Fallbacks

• Seamless Integration: Web pages appear inside the app, header and footer removed, so they match native screens.
  
• Cost & Time Efficiency: No custom development; leverage existing content immediately.
  
• Page Builder Support: Continue using tools like Elementor or Gutenberg, with full design flexibility.
  

Limitations of Web Fallbacks

• Internet Required: Pages load over WiFi or mobile data. Fallbacks won’t display offline.
  
• Performance: Dependent on site speed; not as instant as native screens.
  

Accessing Web Fallback Settings

1. In WordPress, go to BuddyBoss App > Menus.
   
2. Choose Tab Bar Menu or More Screen Menu where you want your web link.
   
3. Click Save Menu if you’ve made any prior changes.
   

Adding Web Fallback Pages

1. Under Core App or WordPress Pages, click Add to Menu for the desired page (e.g., Shop, Movies).
   
2. Drag the menu item into place.
   
3. Click Save Menu.
   

Previewing Web Fallback Content

1. Open the BuddyBoss App on your device.
   
2. Tap your Shop or Movies tab.
   
3. Notice the app’s native header bar stays visible while your theme’s header/footer are removed.
   
4. Tap an item (e.g., a product or movie) to open it in the web view.
   
5. Use the app’s back arrow to return.
   

Leveraging Deep Linking to Native Screens

1. Within a fallback page, tap a link to a native resource (e.g., a username in a widget).
   
2. The app intercepts the URL and opens the corresponding native screen (e.g., that member’s profile).
   
3. Use the back arrow to navigate back to your web fallback.
   

What Are App Pages?

App Pages are true native screens built with App Blocks (look for the phone icon). They load instantly, cache content for offline access, and deliver smoother performance.

Benefits of App Pages

• Native Experience: Faster loads and silky navigation.
  
• Offline Availability: Cached content remains accessible without internet.
  
• Enhanced Performance: No external web requests; all content is served natively.
  

Accessing App Pages

Navigate to Dashboard > BuddyBoss App > App Pages to create or manage native screens.

Understanding Native vs. Web Fallback Approaches

• Web Fallbacks:
  
  1. No development needed—simply add existing pages to the app’s menus.
     
  2. Ideal for rapid feature exposure and full page–builder support.
     
  3. Requires an internet connection and may be slower than native screens.
     
• Native Screens (App Pages):
  
  1. Built with React Native and App Blocks for maximum performance.
     
  2. Work offline via API caching and load instantly.
     
  3. Require REST API support and React Native component development:
     
     • Enable your custom post type in WordPress’s REST API.
       
     • Create React Native index and detail screens.
       
     • (Optional) Integrate with BuddyBoss’s API caching for offline speed.
       

Troubleshooting and FAQs

Q: My fallback page still shows the site header/footer.
A: Ensure you’re using BuddyBoss Theme; other themes require adding user-agent detection to strip chrome.

Q: Deep links aren’t routing to native screens.
A: Verify the link matches BuddyBoss deep-link patterns (e.g., /members/{username}).

Q: Web fallback menu items don’t appear.
A: Confirm you clicked Save Menu, then force-close and reopen the app to refresh menus.

Q: I need faster loading than fallbacks allow.
A: Build a dedicated App Page: enable your custom post type in the REST API, code React Native screens, and use API caching.

Q: Custom post type archive isn’t listed under Pages.
A: Use Custom Links with the exact URL or ensure your post type is REST API–enabled and appears under Core App.