useEditorConfiguration and organised by category. When used in the editor, they render with mock data so you can preview the layout without needing a live API connection.
Categories and components
Home Page
| Component | Description |
|---|---|
| HomePage | The complete home page with toggleable hero, plans, events and locations sections. Configure which sections to show, heading sizes, and custom class names per section. |
| HomePageHero | The hero area with main text, sub-text and search box. Can be used standalone or as part of HomePage. |
| NavBar | The portal navigation bar. Supports fixed/floating header and transparent/solid styles. |
HomePage Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Redirect URL | Custom redirect URL for the home page. |
| Navigation Bar | |
| Show navigation bar | Display the navigation bar at the top of the page. |
| Fixed header | Keep the navigation bar fixed at the top when scrolling. |
| Header type | Choose between Floating (transparent over hero) or Solid (solid background). |
| Hero | |
| Show hero section | Display the main hero area with title, search box and call-to-action text. |
| Background style | How to display the hero background — Primary colour, Bootstrap colour, Image from URL, or Custom image URL. |
| Bootstrap colour | Select a Bootstrap colour for a solid colour background (if using Bootstrap colour style). |
| Background image URL | URL of an image to use as the hero background (if using image style). |
| Show main text | Display the large primary heading text. |
| Show sub text | Display the secondary/subtitle text below the main heading. |
| Show search box | Display the location/plan search input field. |
| Location name | Override the automatically detected location name in the hero text. |
| Typewriter text 1 | First line of typewriter text in the hero (e.g., “Get work done in”). |
| Typewriter text 2 | Second line of typewriter text (e.g., “Coworking spaces in”). |
| Typewriter text 3 | Third line of typewriter text (e.g., “Find meeting space in”). |
| Additional CSS classes | Custom CSS classes to apply to the hero section for styling. |
| Plans | |
| Show plans section | Display the membership plans section. |
| Show title | Show the section heading (“Membership Plans”). |
| Title size | Choose Small or Large heading size. |
| Only show time passes | Filter to display only time pass products (exclude monthly plans). |
| Additional CSS classes | Custom CSS classes for the plans section styling. |
| Events | |
| Show events section | Display the upcoming events section. |
| Show title | Show the section heading (“Upcoming Events”). |
| Title size | Choose Small or Large heading size. |
| Number of events to show | How many upcoming events to display (1-9). |
| Additional CSS classes | Custom CSS classes for the events section styling. |
| Locations | |
| Show locations section | Display the locations grid section. |
| Show title | Show the section heading (“Our Locations”). |
| Title size | Choose Small or Large heading size. |
| Additional CSS classes | Custom CSS classes for the locations section styling. |
HomePageHero Parameters
| Parameter | Description |
|---|---|
| Background | |
| Background style | How to display the hero background — Primary colour, Bootstrap colour, Image from URL, or Custom image URL. |
| Bootstrap colour | Select a Bootstrap colour for a solid colour background (if using Bootstrap colour style). |
| Background image URL | URL of an image to use as the hero background (if using image style). |
| Content | |
| Show main text | Display the large primary heading text. |
| Show sub text | Display the secondary/subtitle text below the main heading. |
| Show search box | Display the location/plan search input field. |
| Location name | Override the automatically detected location name in the hero text. |
| Typewriter text 1 | First line of typewriter text (e.g., “Get work done in”). |
| Typewriter text 2 | Second line of typewriter text (e.g., “Coworking spaces in”). |
| Typewriter text 3 | Third line of typewriter text (e.g., “Find meeting space in”). |
| Advanced | |
| Additional CSS classes | Custom CSS classes to apply to the hero section for styling. |
NavBar Parameters
| Parameter | Description |
|---|---|
| Fixed header | Keep the navigation bar fixed at the top when scrolling. |
| Type | Choose between Floating (transparent over hero) or Solid (solid background). |
Dashboard
| Component | Description |
|---|---|
| PersonalDashboard | Complete member dashboard container. |
| PersonalDashboardHeader | Dashboard welcome header area. |
| DashboardHero | Hero area for the dashboard page. |
| QuickActions | Grid of quick-action buttons (book, pay, etc.). |
| AnnouncementsBanner | Displays active announcements from the dashboard. |
| OnBoardingSection | Step-by-step onboarding guide for new members. |
| StatisticsSection | Member usage statistics display. |
| WeeklyAgendaCalendar | Weekly calendar view of the member’s upcoming bookings. |
| DashboardFeaturedArticles | Highlighted articles on the dashboard. |
| DashboardFeaturedEvents | Highlighted upcoming events on the dashboard. |
PersonalDashboard Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Hero | |
| Background style | How to display the hero background — Primary colour, Bootstrap colour, Image from URL, or Custom image URL. |
| Bootstrap colour | Select a Bootstrap colour for a solid colour background (if using Bootstrap colour style). |
| Background image URL | URL of an image to use as the hero background (if using image style). |
| Quick Actions | |
| Show title | Display the section heading (“Quick Actions”). |
| Show “Book a room” | Show button to book a meeting room. |
| Show “Book a desk” | Show button to book a desk space. |
| Show “Buy a day pass” | Show button to purchase a day pass. |
| Show “Register a visitor” | Show button to register an upcoming visitor. |
| Show “View invoices” | Show link to view billing history and download invoices. |
| Show “View membership details” | Show link to view current plan and benefits. |
| Show “Contact support” | Show quick contact form for getting help. |
| Show “View FAQ articles” | Show link to browse common help articles. |
| Visibility | |
| Show announcements | Display the announcements banner showing site updates or policies. |
| Show onboarding | Show the step-by-step welcome guide for new members. |
| Show weekly calendar | Display a mini-calendar of upcoming bookings. |
| Show upcoming bookings | Show list of confirmed future bookings. |
| Show predicted bookings | Show AI-suggested bookings based on regular patterns. |
| Show referral banner | Display the friend referral promotion area. |
| Show featured articles | Highlight relevant help articles on the dashboard. |
| Show featured events | Showcase upcoming events that may be of interest. |
DashboardHero Parameters
| Parameter | Description |
|---|---|
| Slot for announcements content | Container slot for dynamic announcement components. |
| Background style | How to display the hero background — Primary colour, Bootstrap colour, Image from URL, or Custom image URL. |
| Bootstrap colour | Select a Bootstrap colour for a solid colour background (if using Bootstrap colour style). |
| Background image URL | URL of an image to use as the hero background (if using image style). |
QuickActions Parameters
| Parameter | Description |
|---|---|
| Show title | Display the section heading (“Quick Actions”). |
| Show “Book a room” | Show button to book a meeting room. |
| Show “Book a desk” | Show button to book a desk space. |
| Show “Buy a day pass” | Show button to purchase a day pass. |
| Show “Register a visitor” | Show button to register an upcoming visitor. |
| Show “View invoices” | Show link to view billing history and download invoices. |
| Show “View membership details” | Show link to view current plan and benefits. |
| Show “Contact support” | Show quick contact form for getting help. |
| Show “View FAQ articles” | Show link to browse common help articles. |
AnnouncementsBanner Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
OnBoardingSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
StatisticsSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
WeeklyAgendaCalendar Parameters
| Parameter | Description |
|---|---|
| No parameters available — uses default settings. |
DashboardFeaturedArticles Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
DashboardFeaturedEvents Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
Bookings
| Component | Description |
|---|---|
| ResourceList | Browsable list of bookable resources. |
| ResourceCalendar | Calendar view for browsing and booking resources. |
| BookingEdit | Booking creation and editing form. |
| BuildingAvailabilitySection | Real-time availability display for building/location. |
| PredictiveBookings | AI-suggested bookings based on member usage patterns. |
ResourceList Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Display options | |
| Show filters | Display filter controls for category, capacity and amenities. |
| Show grid | Show resources in a visual grid layout. |
| Show sensor data | Display real-time occupancy sensors (if enabled). |
| Show price | Display the hourly/daily pricing for each resource. |
| Show instant booking | Enable direct booking without approval (instant confirmation). |
| Show status badge | Display the availability status badge (Available/Unavailable) on each resource card. |
| Views | |
| Show calendar view | Add month/day calendar toggle for date selection. |
| Show floor plan view | Display resources on an interactive floor plan map. |
| Show map view | Show a simple map with resource locations marked. |
| Filters | |
| Show category filter | Allow filtering by resource type (e.g., Meeting Room, Desk). |
| Show capacity filter | Filter resources by maximum person capacity. |
| Show amenities filter | Filter resources by available features (e.g., Whiteboard, TV). |
ResourceCalendar Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Display options | |
| Show filters | Display filter controls for category, capacity and amenities. |
| Show calendar | Show the main date/time selection calendar. |
| Views | |
| Show calendar view | Add month/day calendar toggle for date selection. |
| Show floor plan view | Display resources on an interactive floor plan map. |
| Show map view | Show a simple map with resource locations marked. |
| Filters | |
| Show category filter | Allow filtering by resource type (e.g., Meeting Room, Desk). |
| Show capacity filter | Filter resources by maximum person capacity. |
| Show amenities filter | Filter resources by available features (e.g., Whiteboard, TV). |
BookingEdit Parameters
| Parameter | Description |
|---|---|
| Sections | |
| Show resource image | Display an image of the booked resource. |
| Show resource details | Show name, capacity and location information for the resource. |
| Show desk selection | Allow selecting specific desks within a shared space option. |
| Show visitor management | Enable adding guest/visitor names and email addresses. |
| Show additional products | Display optional add-ons (print credits, event tickets, etc.). |
| Show custom fields | Render any custom fields configured for bookings. |
| Show booking notes | Allow adding internal notes to the booking. |
| Checkout Options | |
| Show payment method | Display available payment methods during checkout. |
| Show basket summary | Show a summary of the booking and total cost before confirming. |
| Layout Options | |
| Show back button | Display a button to return to previous step in the booking flow. |
BuildingAvailabilitySection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
PredictiveBookings Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
Events
| Component | Description |
|---|---|
| EventPageRouter | Event listing with routing for event detail views. |
| FeaturedEventsList | Curated list of featured events. |
| UpcomingEvents | Chronological list of upcoming events. |
| EventDetailsPage | Full event detail page. |
| EventCheckoutPage | Event purchase checkout flow. |
| SimpleEventsGrid | Simple grid display of events. |
EventPageRouter Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show featured events section | Display the curated “Featured Events” section at the top. |
| Show featured section title | Show heading (“Featured Events”) for the featured section. |
| Show upcoming events section | Display the chronological list of all upcoming events. |
| Views | |
| Show calendar views (Month, Day) | Enable month and day view toggles in the calendar. |
| Filters | |
| Upcoming events to skip | Number of recent events to hide (for pagination). |
| Show filters | Display category and date range filter controls. |
FeaturedEventsList Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Featured Events”). |
UpcomingEvents Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Title | |
| Show title | Display the section heading (“Upcoming Events”). |
| Title size | Choose Small or Large heading size. |
| Filters | |
| Events to skip (0-10) | Number of events to exclude from the top of the list. |
| Advanced | |
| Additional CSS classes | Custom CSS classes for styling the event cards and container. |
EventDetailsPage Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the event name and date as a page header. |
| Show comments section | Allow customers to leave reviews and ratings after attending. |
| Show related events | Recommend similar upcoming events at the bottom of the page. |
EventCheckoutPage Parameters
| Parameter | Description |
|---|---|
| Sections | |
| Show event image | Display the main promotional image for the event. |
| Show event description | Show the full event details (date, time, location, what’s included). |
| Checkout Options | |
| Show basket summary | Display order summary with total price before payment. |
| Layout Options | |
| Show back button | Allow customer to return to event details page without completing purchase. |
SimpleEventsGrid Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Title | |
| Show title | Display the section heading (“Upcoming Events”). |
| Title size | Choose Small or Large heading size. |
| Filters | |
| Number of events to show (1-9) | How many upcoming events to display in the grid. |
| Advanced | |
| Additional CSS classes | Custom CSS classes for styling the event cards and container. |
Courses
| Component | Description |
|---|---|
| CoursePageRouter | Course listing with routing for detail views. |
| FeaturedCourseList | Curated list of featured courses. |
| CoursesList | Complete list of available courses. |
| CourseDetailsPage | Full course detail page. |
| CourseCheckoutPage | Course purchase checkout flow. |
CoursePageRouter Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show featured courses section | Display the curated “Featured Courses” section at the top. |
| Show featured section title | Show heading (“Featured Courses”) for the featured section. |
| Show courses list section | Display the chronological list of all available courses. |
| Show courses list title | Show heading (“Available Courses”) for the main course list. |
| Title size | Choose Small or Large heading size for the main course list. |
| Filters | |
| Courses to skip | Number of recent courses to hide (for pagination). |
| Show filters | Display category filter controls. |
FeaturedCourseList Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Featured Courses”). |
CoursesList Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Available Courses”). |
| Title size | Choose Small or Large heading size. |
| Courses to skip | Number of courses to exclude from the top of the list. |
CourseDetailsPage Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the course name and instructor as a page header. |
| Show course lessons section | List all course modules/lessons with duration estimates. |
CourseCheckoutPage Parameters
| Parameter | Description |
|---|---|
| Sections | |
| Show course image | Display the main promotional image for the course. |
| Show course description | Show the full course details (schedule, what you’ll learn, who it’s for). |
| Checkout Options | |
| Show basket summary | Display order summary with total price before payment. |
| Layout Options | |
| Show back button | Allow customer to return to course details page without completing purchase. |
Articles
| Component | Description |
|---|---|
| BlogPageRouter | Article listing with routing for detail views. |
| FeaturedBlogList | Curated list of featured articles. |
| RecentBlogPosts | Chronological list of recent articles. |
| BlogPostDetailsPage | Full article detail page. |
BlogPageRouter Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show featured posts section | Display the curated “Featured Articles” section at the top. |
| Show featured section title | Show heading (“Featured Articles”) for the featured section. |
| Show recent posts section | Display the chronological list of all articles. |
| Filters | |
| Recent articles to skip | Number of recent articles to exclude from display (for pagination). |
| Show filters | Display category and search filter controls. |
FeaturedBlogList Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Featured Articles”). |
RecentBlogPosts Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Posts to Skip (0-10) | Number of articles to exclude from the top of the list. |
BlogPostDetailsPage Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the article title and author info as a page header. |
| Show comments section | Allow customers to leave comments on articles. |
| Show related articles | Recommend similar articles at the bottom of the page. |
Store
| Component | Description |
|---|---|
| SimpleProductGrid | Grid display of purchasable products. |
| SimplePlansGrid | Grid display of available membership plans. |
| ProductCheckoutPage | Single product checkout flow. |
| ProductsCheckoutPage | Multi-product checkout flow. |
SimpleProductGrid Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Products”). |
| Title size | Choose Small or Large heading size. |
| Only show time passes | Filter to display only time pass products (exclude other product types). |
| Advanced | |
| Additional CSS classes | Custom CSS classes for styling the product cards and container. |
SimplePlansGrid Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Title | |
| Show title | Display the section heading (“Membership Plans”). |
| Title size | Choose Small or Large heading size. |
| Filters | |
| Number of plans to show | How many membership plans to display in the grid (1-9). |
| Advanced | |
| Additional CSS classes | Custom CSS classes for styling the plan cards and container. |
ProductCheckoutPage Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Display Options | |
| Show title | Display the product name as a page header. |
| Checkout Options | |
| Show payment method | Display available payment methods during checkout. |
| Show basket summary | Show order summary with total price before confirming purchase. |
| Layout Options | |
| Show back button | Allow customer to return to product listing without completing purchase. |
ProductsCheckoutPage Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Display Options | |
| Show filters | Display category and location filter controls. |
| Show product type filter | Filter products by type (e.g., Day Pass, Desk, Room). |
| Show location selector | Allow switching between locations to view local products. |
| Product Card Options | |
| Show product description | Display the product summary text on each card. |
| Show product price | Show the hourly/daily/monthly pricing on each card. |
| Show product image | Display a visual thumbnail for each product. |
| Layout Options | |
| Grid gap | Space between cards in the grid (e.g., “1.5rem”). |
| Minimum card width | Smallest width a product card can shrink to (e.g., “300px”). |
My Activity
| Component | Description |
|---|---|
| MyBookingsSection | Member’s booking history and upcoming bookings. |
| MyInvoicesSection | Member’s invoices and payment history. |
| MyVisitorsSection | Member’s visitor registrations. |
| MyDeliveriesSection | Member’s parcel/delivery log. |
| MyEventsSection | Member’s event registrations. |
| MyCoursesSection | Member’s course enrolments. |
| MyPlansSection | Member’s active plans and subscriptions. |
MyBookingsSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the section heading (“My Bookings”). |
| Show filter bar | Show date and category filters for quick searching. |
| Show resource image | Display thumbnail images for booked resources. |
| Actions | |
| Show booking settings button | Link to manage recurring bookings and preferences. |
| Show make a booking button | Quick access button to book a new resource. |
| Show modify button | Allow editing existing bookings (if enabled). |
| Team | |
| Show team bookings | Include bookings made by other team members in this view. |
MyInvoicesSection Parameters
| Parameter | Description |
|---|---|
| Sections | |
| Show title | Display the section heading (“My Invoices”). |
| Show filter bar | Show date and status filters for quick searching. |
| Actions | |
| Show download button | Allow customers to download invoice PDFs. |
| Show pay button | Quick access button to make a payment on an invoice. |
MyVisitorsSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the section heading (“My Visitors”). |
| Show filter bar | Show date and status filters for quick searching. |
| Actions | |
| Show register visitor button | Quick access to invite a guest/visitor. |
| Show delete button | Allow deleting past visitor records. |
| Show reinvite button | Resend the invitation email to a registered visitor. |
MyDeliveriesSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the section heading (“My Deliveries”). |
| Show filter bar | Show date and status filters for quick searching. |
| Actions | |
| Show manage button | Link to manage delivery preferences and notifications. |
MyEventsSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the section heading (“My Events”). |
| Show filter bar | Show date and category filters for quick searching. |
| Show event card image | Display promotional images on each event card. |
| Actions | |
| Show ticket action buttons | Quick access to view/download tickets, or cancel attendance. |
| Show see all events button | Link to browse the full upcoming events calendar. |
MyCoursesSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the section heading (“My Courses”). |
| Show course image | Display thumbnail images for enrolled courses. |
| Show progress badge | Show progress percentage on each enrolled course card. |
| Actions | |
| Show see all courses button | Link to browse all available courses (for upgrading or taking more). |
MyPlansSection Parameters
| Parameter | Description |
|---|---|
| Sections | |
| Show title | Display the section heading (“My Plans”). |
| Show join a plan button | Quick access to browse and purchase new membership plans. |
| Show my plans section | List currently active plans with renewal dates. |
| Show my benefits section | Display included benefits (booking credit, passes, etc.). |
| Show my products section | List any one-time purchased products or credits. |
| Benefits | |
| Show booking credit section | Display remaining booking credit balance and expiry. |
| Show booking time section | Show available booking time (e.g., 40 hours/month). |
| Show passes section | Display any unused day passes included in the plan. |
Team
| Component | Description |
|---|---|
| TeamMembersSection | Team member list and management. |
| TeamBookingsSection | Team booking overview. |
| TeamAttendanceSection | Team attendance tracking. |
| TeamPermissionsSection | Team permission management. |
TeamMembersSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Team Members”). |
| Show filter bar | Show search and role filters for quick searching. |
| Show add members button | Quick access to invite new team members. |
TeamBookingsSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the section heading (“Team Bookings”). |
| Show filter bar | Show date and status filters for quick searching. |
| Actions | |
| Show booking settings button | Link to team-wide booking preferences and policies. |
| Show make a booking button | Quick access for admins to book resources on behalf of members. |
| Display options | |
| Show team member column | Display which team member each booking belongs to. |
TeamAttendanceSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Team Attendance”). |
| Show my attendance section | Show your own recent check-in/out history. |
| Show team attendance matrix | Display a calendar overview of all team member attendance. |
| Show manage attendance button | Link to adjust attendance settings and policies. |
TeamPermissionsSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Team Permissions”). |
| Show access card | Display team member access card information. |
| Show manage permissions button | Link to adjust role-based permissions and settings. |
| Show access account button | Quick link to view and edit your personal account details. |
Personal / Profile
| Component | Description |
|---|---|
| PersonalInformationSection | Member profile editing form. |
| BillingInformationSection | Billing address and details. |
| BillingCardSection | Payment method management card. |
| EInvoicingCardSection | E-invoicing configuration card. |
| PaymentMethodsSections | Multi-provider payment method management (Stripe, Spreedly, GoCardless). |
| ProfessionalProfileSection | Public professional profile editing. |
| SettingTabsSection | Account settings tabbed interface. |
| CredentialsSection | Password and security credentials. |
| IntegrationsSection | Third-party integration settings. |
| VoManageSection | Virtual office management interface. |
PersonalInformationSection Parameters
| Parameter | Description |
|---|---|
| Profile images | |
| Allow banner upload | Enable uploading a profile header/banner image. |
| Allow avatar upload | Enable uploading a profile photo/avatar image. |
BillingInformationSection Parameters
| Parameter | Description |
|---|---|
| Billing Card | |
| Show title | Display the section heading (“Billing Information”). |
| eInvoicing Card | |
| Show title | Display the section heading (“E-Invoicing”). |
BillingCardSection Parameters
| Parameter | Description |
|---|---|
| Sections | |
| Show title | Display the section heading (“Billing Information”). |
EInvoicingCardSection Parameters
| Parameter | Description |
|---|---|
| Sections | |
| Show title | Display the section heading (“E-Invoicing”). |
PaymentMethodsSections Parameters
| Parameter | Description |
|---|---|
| No parameters available — uses default settings. |
ProfessionalProfileSection Parameters
| Parameter | Description |
|---|---|
| Sections | |
| Show social networks | Display links to your LinkedIn, Twitter, or other social profiles. |
| Show skills & expertise | Show your professional skills and areas of expertise. |
| Show directory section | Include you in the public member directory search. |
SettingTabsSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Tabs visibility | |
| Show Bookings tab | Enable the Bookings settings tab in the account settings menu. |
| Show Preferences tab | Enable the Email/SMS notification preferences tab. |
| Show Security tab | Enable the password and two-factor authentication settings tab. |
| Show Integrations tab | Enable the third-party integration management tab (Google, Outlook, Apple). |
| Show Notifications tab | Enable the mobile push notification settings tab. |
CredentialsSection Parameters
| Parameter | Description |
|---|---|
| Section visibility | |
| Show PIN section | Display the 4-digit PIN setup and management area. |
| Show change password section | Allow changing your account password. |
| Show “Request new password” button | Display a quick link to reset forgotten passwords via email. |
IntegrationsSection Parameters
| Parameter | Description |
|---|---|
| Section visibility | |
| Show Calendar Integrations section | Display Google Calendar, Outlook and Apple Calendar sync settings. |
| Show Calendar Feeds section | Display iCal feed URLs for subscribing externally. |
| Show Resource Feeds section | Display API feeds for integrating with external systems. |
| Provider visibility | |
| Show Google | Enable Google account linking and sync options. |
| Show Outlook | Enable Microsoft Outlook/Exchange account linking. |
| Show Apple | Enable Apple Calendar account linking. |
VoManageSection Parameters
| Parameter | Description |
|---|---|
| Tabs | |
| Show handling preferences tab | Configure how packages and mail are handled (hold time, notifications). |
| Show address book tab | Manage the list of people who can collect your deliveries. |
| Show identity checks tab | View and manage completed identity verification status. |
| Display | |
| Show profile mismatch alert | Display a warning if your profile information doesn’t match official records. |
Community
| Component | Description |
|---|---|
| CommunityBoardListSection | Community discussion board. |
| DirectorySection | Member directory listing. |
| PerksSection | Available perks and benefits. |
| Newsletter | Newsletter subscription form. |
CommunityBoardListSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the section heading (“Community Board”). |
| Show filter bar | Show category and date filters for quick searching. |
| Actions | |
| Show “Start discussion” button | Quick access to create a new forum thread or discussion topic. |
DirectorySection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show title | Display the section heading (“Directory”). |
| Show filter bar | Show search and category filters for finding members. |
| Filters | |
| Show industry / skill filter | Filter directory results by profession or area of expertise. |
| Show order filter | Sort results by date joined, name, or company size. |
| Show search box | Display the member search input field. |
| Card display | |
| Show company name | Display the registered business/company name on each card. |
| Show home location | Display which location is set as this member’s primary base. |
| Actions | |
| Show view profile button | Quick access to view a member’s full public profile. |
| Show message button | Allow sending an in-app message to another member. |
PerksSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Community Perks”). |
| Show filter bar | Show category filters for finding specific perks. |
| Max perks to show | Limit how many perk cards display before showing “View all”. |
| Advanced | |
| Additional CSS classes | Custom CSS classes for styling the perks grid and cards. |
Newsletter Parameters
| Parameter | Description |
|---|---|
| Title Type | Set context for the newsletter title — General, Blog, or Event specific. |
| Show image | Display a featured image in the newsletter signup card. |
| Advanced | |
| Additional CSS classes | Custom CSS classes for styling the newsletter form and container. |
Support
| Component | Description |
|---|---|
| FaqPageSection | Frequently asked questions. |
| HelpDeskSection | Help desk / support ticket interface. |
| ContactUsPage | Contact form page. |
| LocationsGrid | Grid of all business locations. |
FaqPageSection Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Show title | Display the section heading (“Help & FAQ”). |
| Show filter bar | Show search and category filters for finding answers. |
| Show “Help me find an answer” button | Launch the guided help assistant that asks questions to suggest relevant articles. |
HelpDeskSection Parameters
| Parameter | Description |
|---|---|
| Show title | Display the section heading (“Help Desk”). |
| Show filter bar | Show search and category filters for finding answers. |
| Show “Help me find an answer” button | Launch the guided help assistant that asks questions to suggest relevant articles. |
| Show “Request help” button | Quick access to open a new support ticket or contact the team. |
ContactUsPage Parameters
| Parameter | Description |
|---|---|
| Show mock data (in editor only) | Show mock data instead of live data when editing. |
| Sections | |
| Show contact us header | Display the section title and introductory text. |
| Show contact us form | Show the name, email, subject and message input fields. |
| Show contact map | Include an interactive map showing the location address. |
LocationsGrid Parameters
| Parameter | Description |
|---|---|
| Title | |
| Show title | Display the section heading (“Our Locations”). |
| Title size | Choose Small or Large heading size. |
| Advanced | |
| Additional CSS classes | Custom CSS classes for styling the locations grid and cards. |
Mock data in the editor
When editing a page, section components render with mock data instead of making live API calls. This means you see realistic placeholder content (sample events, bookings, members, etc.) that lets you design the layout without needing actual data. Most section components include a Show mock data (in editor only) toggle in their properties. This defaults totrue in the editor. When disabled, the component attempts to fetch live data — useful for testing with your actual data during local development.
Default page layouts
Every built-in page has a default layout — a pre-configured arrangement of section components. For example:- Home defaults to a HomePage component with hero, plans, events and locations.
- Personal Dashboard defaults to DashboardHero, QuickActions, AnnouncementsBanner, WeeklyAgendaCalendar, and more.
- Articles defaults to NavBar + BlogPageRouter + Newsletter.