> ## Documentation Index
> Fetch the complete documentation index at: https://help.coachiq.io/llms.txt
> Use this file to discover all available pages before exploring further.

# App Builder Overview & Navigation

> Master the App Builder interface to create and manage your athlete portal. Learn how to navigate sections, configure pages, and publish changes.

<Info>
  **Where to find this**: Dashboard → App (in the main navigation)
</Info>

## What you'll accomplish

The App Builder is where you bring your athlete portal to life—no code required. In this guide, you’ll learn how to navigate its layout, customize sections, and publish updates so your athletes always see your latest content and schedules.earn how to navigate and use the App Builder interface to create a professional, customized experience for your athletes across web and mobile platforms.

## Understanding the App Builder layout

The App Builder uses a three-panel interface that gives you complete control over your athlete portal:

<Frame caption="The App Builder interface showing the control panel, content area, and top action bar">
  <img src="https://mintcdn.com/coachiq/lCcqk2TRIA-yIOYQ/images/Athleteportalcoachessidecontrolpanel.png?fit=max&auto=format&n=lCcqk2TRIA-yIOYQ&q=85&s=27137107c19474f94c86b5303d0540cf" alt="App Builder control panel and interface layout" width="2210" height="1370" data-path="images/Athleteportalcoachessidecontrolpanel.png" />
</Frame>

### Interface components

<CardGroup cols={2}>
  <Card title="Left Sidebar (Control Panel)" icon="sidebar">
    **Navigation hub** - Switch between pages and settings:

    * Channels (communication)
    * Schedule (bookings)
    * Content (programs)
    * Products (purchases)
    * Settings (design & configuration)
  </Card>

  <Card title="Center Content Area" icon="layout">
    **Configuration space** - Where you manage sections and items:

    * Add/remove sections
    * Configure schedulers
    * Organize content
    * Set descriptions
  </Card>

  <Card title="Top Action Bar" icon="toggle-on">
    **Publishing controls** - Make changes live:

    * Active toggle (on/off)
    * Copy page button
    * Preview option
    * Update Page button
    * Page Settings access
  </Card>

  <Card title="Section Management" icon="layers">
    **Hierarchical structure** - Organize your content:

    * Sections contain categories
    * Categories contain items
    * Items link to actual content
    * Everything is customizable
  </Card>
</CardGroup>

## Navigating between pages

The App Builder organizes your athlete portal into distinct pages, each serving a specific purpose:

<Steps>
  <Step title="Access the main pages">
    Use the left sidebar to navigate between the four core pages:

    <Frame caption="The App Builder's main navigation showing all available pages">
      <img src="https://mintcdn.com/coachiq/lCcqk2TRIA-yIOYQ/images/Athleteportalcoachessidecontrolpanel.png?fit=max&auto=format&n=lCcqk2TRIA-yIOYQ&q=85&s=27137107c19474f94c86b5303d0540cf" alt="App Builder navigation sidebar with pages highlighted" width="2210" height="1370" data-path="images/Athleteportalcoachessidecontrolpanel.png" />
    </Frame>

    * **Channels**: Messaging and announcements
    * **Schedule**: Session bookings and calendar
    * **Content**: Programs and educational materials
    * **Products**: Memberships and purchases
  </Step>

  <Step title="Access Settings">
    Click the **Settings** section in the sidebar to configure:

    * **Design**: Themes and colors
    * **Menu & Links**: Navigation visibility
    * **Pages Paywall**: Access restrictions

    <Frame caption="Settings section in the App Builder sidebar">
      <img src="https://mintcdn.com/coachiq/lCcqk2TRIA-yIOYQ/images/athleteportalcoachesside.png?fit=max&auto=format&n=lCcqk2TRIA-yIOYQ&q=85&s=6c4d3445a9242a7f83ffcc7b722fa8e1" alt="App Builder settings navigation" width="2210" height="1370" data-path="images/athleteportalcoachesside.png" />
    </Frame>
  </Step>
</Steps>

## Working with sections and items

Each page in your athlete portal is built using a section-based architecture:

### Adding new sections

<Steps>
  <Step title="Navigate to your desired page">
    Click on Schedule, Content, or Products in the left sidebar.
  </Step>

  <Step title="Click 'Add Section'">
    Find the **Add Section** button in the content area to create a new category.

    <Frame caption="Adding sections and schedulers to organize your content">
      <img src="https://mintcdn.com/coachiq/1MsmAZgyOT2OsGTL/images/addingschedulerandsections.png?fit=max&auto=format&n=1MsmAZgyOT2OsGTL&q=85&s=b7c28152926b2b403fd2ccc507e68b10" alt="Add Section and Add Scheduler buttons in the Schedule page" width="1920" height="1080" data-path="images/addingschedulerandsections.png" />
    </Frame>
  </Step>

  <Step title="Configure your section">
    * Give it a descriptive name (e.g., "Rising Stars", "Elite Program")
    * Add a description for clarity
    * Set credit requirements if applicable
  </Step>
</Steps>

### Adding items to sections

Within each section, you can add specific items:

* **Schedule page**: Add schedulers (booking sessions)
* **Content page**: Add programs (courses/training)
* **Products page**: Add products (memberships/packages)

<Tip>
  **Organization tip**: Name your sections based on how athletes will understand them - by location ("Downtown Gym"), by level ("Beginner Classes"), or by type ("Private Training").
</Tip>

## Understanding the preview system

The App Builder shows you exactly what athletes will see:

<Frame caption="Compare what coaches configure (left) vs what athletes see (right)">
  <img src="https://mintcdn.com/coachiq/1MsmAZgyOT2OsGTL/images/athleteviewsectionsandschedulers.png?fit=max&auto=format&n=1MsmAZgyOT2OsGTL&q=85&s=ed076850bba5eda6791d1d41626500e0" alt="Athlete view showing sections and schedulers as they appear in the app" width="2210" height="1370" data-path="images/athleteviewsectionsandschedulers.png" />
</Frame>

<Note>
  The athlete view (shown above) displays your sections as cards with:

  * Section name and description
  * Credit requirements
  * "Book Now" or "Learn More" buttons
  * Professional, branded appearance
</Note>

## Page controls and settings

### Activating pages

Each page must be activated before athletes can see it:

<Steps>
  <Step title="Toggle the Active switch">
    Use the **Active** toggle in the top bar to enable/disable the entire page.

    <Frame caption="The Active toggle controls whether athletes can see this page">
      <img src="https://mintcdn.com/coachiq/1MsmAZgyOT2OsGTL/images/setpageasactiveathleteportal.png?fit=max&auto=format&n=1MsmAZgyOT2OsGTL&q=85&s=afe51686ec9bc408da9448d50507d662" alt="Active toggle switch in the App Builder" width="2210" height="1370" data-path="images/setpageasactiveathleteportal.png" />
    </Frame>
  </Step>

  <Step title="Configure visibility in Menu & Links">
    Even with a page active, you control its visibility through Settings → Menu & Links.
  </Step>
</Steps>

### Page-specific settings

Click the settings icons in the top bar to access:

<Frame caption="Page settings options for additional configuration">
  <img src="https://mintcdn.com/coachiq/1MsmAZgyOT2OsGTL/images/athleteportalpagesettings.png?fit=max&auto=format&n=1MsmAZgyOT2OsGTL&q=85&s=9b42dc0026505098952e41167041a68b" alt="Page settings buttons including Copy, Preview, and Settings" width="2210" height="1370" data-path="images/athleteportalpagesettings.png" />
</Frame>

* **Copy Page**: Duplicate the entire page configuration
* **Preview**: See how the page looks to athletes
* **Page Settings**: Advanced configuration options

## Publishing your changes

<Warning>
  **Important**: Changes are NOT live until you click "Update Page". Athletes continue seeing the previous version until you publish.
</Warning>

<Steps>
  <Step title="Make your desired changes">
    Add sections, configure items, adjust settings as needed.
  </Step>

  <Step title="Review your changes">
    Use the preview function to see how it will look to athletes.
  </Step>

  <Step title="Click 'Update Page'">
    The yellow **Update Page** button publishes all changes immediately.

    <Frame caption="The Update Page button makes your changes live">
      <img src="https://mintcdn.com/coachiq/1MsmAZgyOT2OsGTL/images/updateathleteportal.png?fit=max&auto=format&n=1MsmAZgyOT2OsGTL&q=85&s=b74f7b339d03db8d3e5dc934ed9d62c9" alt="Update Page button highlighted in the App Builder" width="2210" height="1370" data-path="images/updateathleteportal.png" />
    </Frame>
  </Step>

  <Step title="Verify the update">
    The button will briefly show "Updating..." then return to normal when complete.

    <Check>
      **Success!** Your changes are now live for all athletes across web and mobile apps.
    </Check>
  </Step>
</Steps>

## Common interface patterns

### The toggle hierarchy

The App Builder uses three levels of toggles:

1. **Page level**: Active toggle (entire page on/off)
2. **Menu level**: Settings → Menu & Links (navigation visibility)
3. **Section level**: Individual section toggles (show/hide sections)

### Visual indicators

* **Gray text**: Descriptions and helper text
* **Credit badges**: Show credit requirements clearly
* **Trash icons**: Remove sections or items
* **Drag handles**: Reorder sections (where available)

## Pro tips for navigation

<Tip>
  **Organization tip**: Start with one page at a time. Complete and test each page fully before moving to the next.
</Tip>

<Tip>
  **Testing tip**: Always preview your changes before publishing, especially when managing multiple sections.
</Tip>

## Common questions

<AccordionGroup>
  <Accordion title="Why can't athletes see my changes?">
    You need to click "Update Page" to publish changes. Also verify:

    * The page Active toggle is ON
    * The page is enabled in Menu & Links settings
    * Athletes have refreshed their app
  </Accordion>

  <Accordion title="Can I undo changes after updating?">
    There's no undo function, but you can:

    * Manually revert changes
    * Use the Copy Page feature to backup configurations
    * Contact support for assistance with major issues
  </Accordion>

  <Accordion title="How do I know which sections athletes can see?">
    Check three things:

    1. Page Active toggle (must be ON)
    2. Menu & Links visibility settings
    3. Individual section settings and paywall configuration
  </Accordion>

  <Accordion title="What's the difference between sections and schedulers?">
    * **Sections**: Categories that group similar items (like "Elite Training")
    * **Schedulers**: Actual bookable sessions within sections (like "Tuesday 6pm Elite Class")
  </Accordion>
</AccordionGroup>

## Next steps

Now that you understand the App Builder interface:

<CardGroup cols={2}>
  <Card title="Configure Channels" icon="messages" href="/athlete-portal/channels">
    Set up messaging and announcements
  </Card>

  <Card title="Add Content" icon="book" href="/athlete-portal/content">
    Upload programs and educational materials
  </Card>

  <Card title="Set Up Schedule" icon="calendar" href="/athlete-portal/schedule">
    Configure bookable sessions
  </Card>

  <Card title="Customize Design" icon="palette" href="/athlete-portal/design">
    Brand your athlete experience
  </Card>
</CardGroup>