This library covers every custom element available on your website, and how to add and configure each one.
Most elements pull their data live from your 360Player app — the same teams, posts, matches, results, registrations, and events described in 360Player Integrations.
Setting that data up there is what makes it appear here; each element below notes exactly which data it uses and links back to the relevant section.
How to add an element
Click Add in the left-hand panel, or click the + that appears inside a section on the page, to open the Elements panel.
Search or scroll to find the element you want — searching "360" shows every 360Player element in the library.
Add it to the page: click it if you opened the panel from the + inside a section, or drag it onto the page if you opened it from Add in the left-hand panel.
With the element selected in edit mode, click Content in the right-hand panel to edit its content settings, or Design to edit its design/style settings.
Adjust the settings below (each element's own section covers what's available) until you're happy with the result.
360 Matches & Results Slider (App)
Data source: pulls from your 360Player Upcoming Matches and Results (see Upcoming Matches / Results) — filter by team using each team's Group ID.
What it does
Displays upcoming matches and/or past results in a horizontal slider (carousel), pulling data from your site's Matches/Results collections.
Each match card shows team names, score (for results) or "VS" (for upcoming), date/time/venue, and competition name.
Includes a "Group" dropdown filter (e.g. filter by division/league) and, optionally, "All / Upcoming / Results" toggle buttons.
Has navigation arrows and a progress bar to browse through the slides.
Shows a customizable "no matches found" message when there's no data, and a loading spinner while fetching.
How to use it — Content editor settings
What to Show: choose whether to display both upcoming & results (with filter buttons), only upcoming, or only results.
Title (optional) + Title Style (H1/H2): add a heading above the widget; leave blank to hide it.
"View All" Link Text & Link: add a link/button (e.g. to a full schedule page) shown next to the title.
Filtering (expandable group): filter by specific teams (by Group ID or team name, comma-separated) and customize the "All Groups" dropdown label.
Match Limits (expandable group): set max number of upcoming matches, max results, and how many recent results show before upcoming matches in the "All" view.
Labels & Messages (expandable group): customize the text for "All / Upcoming / Results" filter buttons and the empty-state message.
How to use it — Design panel settings
Widget Title: typography for the title and "View All" link, plus hover color.
Filter Bar: colors/typography for active & inactive filter buttons, corner radius for filter bar/buttons/group dropdown.
Slider Arrows: background, color, border, hover states, and progress bar track/fill colors and height.
Match Card: background, border, corner radius, padding, and gap between cards.
Team Names, Score & VS, and Competition Footer: typography for each text element, plus footer divider styling.
360 Posts (App)
Data source: pulls from your 360Player Posts marked Public (see Posts) — filter or exclude specific teams using Group ID.
What it does
Automatically displays posts from your Groups in a card grid, with the option to feature the most recent post, filter by group, and load more posts via pagination.
How to use it — Content editor settings
Title and "View All" link: set a section title (H1 or H2), a rich-text description, and optionally a "View All" link next to the title.
Layout & pagination: Posts page path (used to build each card's link); enable/disable "Featured Post" (the most recent post shows larger); number of columns for desktop, tablet, and mobile; show only 1 post on mobile; posts per page; and a "Load more" button (text and alignment: left/center/right).
Groups & filtering: show a badge with the group name on each card; show a group filter dropdown for visitors; restrict to specific Group ID(s), or exclude certain groups.
Fallback image: shown when a post doesn't have its own image.
How to use it — Design panel settings
Lets you customize colors, typography, spacing, borders, and button styles to match your site's visual identity (we'll break this down control-by-control if needed, same as the other elements).
Usage notes
If you set "Filter by Group ID(s)", the group filter shown to visitors is hidden automatically.
The "Exclude Group ID(s)" field is ignored if a specific filter is already set.
The widget uses the Content Library / Collections API to fetch posts in real time.
360 Groups (App)
Data source: pulls from the teams toggled on in Website Settings.
What it does
Displays your teams/groups automatically as clickable cards, linked to their individual pages.
Can show all groups in one grid, or split them into labeled sections by category.
Lets you manually add extra teams (e.g. ones not pulled automatically) into any existing or new group.
Highlights the card matching the page currently being viewed.
How to use it — Content editor settings
Title & Description — optional heading and text shown above the widget; leave empty to hide them.
Title Tag / Group Heading Tag — choose H1/H2 for the main title and H2/H3 for each group's heading (for SEO/accessibility).
Filter by group — type one category name to show a flat grid of just that group, or several comma-separated names to display them as ordered sections. Leave blank to show everything.
Page URL Path — the URL segment used when linking to each team's page (e.g.
new-groupsbecomesyoursite.com/new-groups/team-name).Card Icon — optional icon shown on each card; leave empty to hide.
Columns — choose how many cards appear per row (2–5).
Manual Teams — add teams not already listed automatically: give them a Name, a Category (matches an existing group or creates a new one), and a Link.
How to use it — Design panel settings
Title and description text styles.
Team card background, border, corner radius, and padding.
Hover colors for card background, text, and icon.
Active/current-page card colors, border, and opacity.
Card icon color and size (plus hover variant).
Group heading style, divider line color, and spacing above each group.
Gap/spacing between cards in the grid.
360 Forms (App)
Data source: pulls from your 360Player Registrations (see Registrations), using each registration's category URL.
What it does
Displays a list of registration forms, grouped and filterable by category.
Each form appears as a card showing title, description, category badge, and open/closed status.
Shows available spots remaining and a "Register" button linking to the form.
Lets visitors filter forms using category pills, or view them grouped by category title.
How to use it — Content editor settings
Quick setup:
Open the content editor to enter a title/description and paste your form category URLs (comma-separated) under "Forms Settings."
Turn "Show Filter" on to display clickable category pills, or off to show static category group titles instead.
Customize all labels (Open/Closed, Available Spots, button text, "All Categories," etc.) to match your language/branding.
Optionally enable the button icon and choose an icon.
Settings you can adjust:
Title, description, and heading level (H1/H2).
Form category URLs, filter visibility, description visibility.
All status/label text (Open, Closed, Available spots, category label).
Button text and optional icon.
How to use it — Design panel settings
Container background and header spacing.
Filter pill colors, borders, corners, padding (active/inactive states).
Form card background, corner radius, title/description text styles.
Category and status badge colors and corner radius.
Button colors (including hover), padding, corner radius, width, and icon size.
360 Calendar (App)
Data source: pulls from your 360Player Events — matches, practices, meetings, camps, and cups (see Upcoming Matches / Events) — filter by team using Group ID.
What it does
Displays a monthly calendar of events (matches, practices, meetings, camps, cups) pulled from your connected data groups.
Lets visitors browse by month using previous/next navigation buttons.
Includes a group filter dropdown and category filter pills so visitors can narrow down what's shown.
Shows event details (date, time, location, description) with color-coded type badges and group badges.
How to use it — Content editor settings
Quick setup:
Add the widget to your page.
In the content editor, set the Group ID(s) to control which event groups appear (use "null" for all).
Optionally add a title/description and customize labels to match your organization's terminology.
Use the design panel to match the calendar's colors, badges, and typography to your site's branding.
Visitors can then navigate months, filter by group, and filter by event category directly on the published page.
Settings you can adjust:
Title & Description: optional title (with H1/H2 heading level choice) and description text shown above the calendar.
Group ID: enter "null" to show all groups, a single Group ID to show one group, or multiple IDs separated by commas.
Category Labels: customize the text labels for Match, Practice, Meeting, Camp, Cup, and Other categories.
Advanced Text & Labels: "All Groups" dropdown label, week label prefix (e.g. "W"), multi-day counter wording ("Day X of Y"), canceled event tooltip text, and the empty-month message.
How to use it — Design panel settings
Title & Description: text styling for the heading and description.
Navigation Bar: month label style, nav button colors/borders/icon color, corner radius.
Group Dropdown: label/option text, button and list backgrounds, borders, selected-option highlight, corner radius.
Category Filters: filter pill text, active/inactive backgrounds and borders, corner radius.
Week Header: label style and divider line color.
Event Card: background, border, corner radius, title/meta/description text styles, canceled marker color.
Date Block: text color, weekday/day/month/counter text styles (divider auto-matches the card border color).
Group Badge and Type Badge: text style, background colors per event type (Match, Practice, Cup, Camp, Meeting, Other), corner radius.
Empty State: text styling for the "no events" message.
Loading Spinner: spinner color.
360 Matches & Results List (App)
Data source: pulls from your 360Player Upcoming Matches and Results (see Upcoming Matches / Results) — filter by team using Group ID.
What it does
Automatically displays upcoming matches ("Upcoming") and results ("Results") from the site's match collections (matchesUpcoming and matchesComplete).
Organizes matches into switchable tabs, with cards showing teams, score, date/time, venue, and competition.
Lets you filter by team/group via a dropdown selector.
Supports pagination via a "Show More" button, or weekly navigation with a "Next Week" button.
How to use it — Content editor settings
Title & Description: set an optional title, the heading level (H1/H2), and a description.
Main Settings: filter by team(s)/group(s), show only home matches, set the max number of upcoming matches/results shown, enable the "Show More" button (with customizable text and increment), and edit the "Upcoming"/"Results" tab labels (each can be hidden).
Text & Translations: customize all displayed text ("All Groups" option, "no matches" messages, loading text, default home/away team names, "vs" text).
Week Settings: set the word "Week" (translatable), enable/disable the week subtitle on cards, restrict the display to the current week only (with a "Next Week" button).
How to use it — Design panel settings
Title & Description: typography styles.
Tab Bar: background/text colors for active/inactive tabs, borders, corner radius, and typography.
Team Filter: corner radius and text styles for the selector and label.
Show More/Next Week Button: button styling and the week subtitle style.
Match Card: background, border, corner radius, internal padding, and spacing between cards.
Team Names, Score & VS, Competition Footer: typography and specific borders for each element.
360 Team Page (App)
Data source: pulls from that team's data in Website Settings, Posts, Upcoming Matches / Results, and Events — all linked to this widget via that team's Group ID.
What it does
Displays a full team page pulled from your 360Player account — including news, contacts, events, upcoming matches, and results — organized into tabs.
How to use it — Content editor settings
Quick setup:
Add the widget to your page.
In the content editor, enter the Group ID from your 360Player groups collection. This links the widget to a specific team.
Settings you can adjust:
Default Active Tab — choose which tab (News, Contacts, Events, Matches, Results) opens first.
Tab Labels — rename any of the five tab buttons.
Team Header — toggle the team logo on/off.
Section Visibility — show/hide each of the five tabs independently.
Items Per Section — set how many matches, results, and news posts appear (1–20 each).
Events — Navigation & Labels — customize calendar title, prev/next month buttons, week prefix, empty-state message, and multi-day counter wording.
Event Categories — rename the category labels (Match, Practice, Cup, Camp, Meeting, Other); colors stay fixed per category.
Display Options — toggle team badges in matches, scores in results, author info in news, and phone/email in contacts.
No Data Message — customize the fallback text shown when a tab has no data.
How to use it — Design panel settings
Team Header — background, minimum height, team name/subtitle typography, logo corner radius and spacing.
Contact Persons — card background/border/corners, avatar shape, name/role/info text styles.
Tab Bar — background, tab text/active colors, button corners, typography.
Match Cards — background/border/corners, accent/score color, team name/score/meta text styles, badge shape.
Event Cards — background/border/corners, date block styling, calendar title, event title/meta/type styles, canceled marker color, group badge colors.
News/Post Cards — background/border/corners, "Show More" button styling, title/content/author/date text styles, avatar shape.
Widget Background — overall background, padding, empty-state text color.
360 Post Page (App)
Data source: pulls from your 360Player Posts (see Posts).
What it does
Displays a full article from your connected "posts" collection — including author info, hero image, body text, embedded videos, image gallery, and attachments. Designed to be placed on a dynamic article/post detail page.
Automatically detects and shows the article matching the current page's URL.
Alternatively, you can set a fixed Article ID so the widget always shows one specific article, regardless of the page.
Shows a loading message while fetching, and an error message if the article can't be found.
Includes a share button that copies the article link, and a lightbox for viewing hero/gallery images full-size.
How to use it — Content editor settings
Article ID (optional) — leave blank for auto-detect, or enter a specific ID to pin an article.
Show Author Info — toggle author name/avatar and date on or off.
Show Group Badge — toggle the author's group badge on or off.
Show Attachments — toggle the attachments section on or off.
Date Format — choose Relative, Short, or Long date display.
Loading Message — text shown while the article loads.
Error Message — text shown if the article isn't found.
Attachments Section Heading — customizable title above attachment links/files.
How to use it — Design panel settings
Article Container — shadow toggle, background, border, corner radius, padding, max width.
Author & Group Badge — avatar/badge size, author name and date typography.
Title — title typography.
Main Image — corner radius, max height, caption typography.
Article Body — body text style and line spacing.
Videos — corner radius, gap between videos.
Image Gallery — corner radius, gap between images, caption typography.
Share Button — background and icon color.
Attachments — heading style, and background/text colors for link and file buttons.
Best practices
Use on a page connected to your posts collection for auto-detection to work.
Use the fixed Article ID option only if you want to always show one particular article regardless of the URL.
Toggle off sections (author, badge, attachments) you don't need to keep the layout clean.
360 Team Page Squad (App)
Data source: pulls from that team's data in Website Settings, Posts, Upcoming Matches / Results, and Events — all linked to this widget via that team's Group ID.
What it does
Displays a full team page with tabs for News, Contacts, Squad, Events, Upcoming Matches, and Results, pulling data tied to a specific team via its Group ID. (Squad is added manually inside the editor).
How to use it — Content editor settings
Getting started:
Enter the Group ID from your 360Player team collection so the widget shows the correct team's data.
Choose which tabs are visible and set the Default Active Tab shown when the page loads.
Rename any tab label (e.g., change "Matches" to "Fixtures").
Settings you can adjust:
Toggle each tab on/off: News, Contacts, Squad, Events, Matches, Results.
Add Squad Players manually (photo, name, number, position) — players sharing the same position text are grouped together automatically.
Set item limits per section (Upcoming Matches, Results, News Posts count).
Customize Events category labels (Match, Practice, Cup, Camp, Meeting, Other) and the "no events" message.
Toggle visibility of extra details: team badges in matches, scores in results, author in news, email/phone in contacts.
Set a custom "no data available" message.
How to use it — Design panel settings
Style the Team Header (background, team name, subtitle, logo corners).
Style the Tab Bar (background, typography, active tab colors, button corners).
Choose Squad layout: grid cards or contact-style rows; customize card background, border, corners, photo size, and columns per device (desktop/tablet/mobile).
Style Contact cards, Match cards, Event cards, and News/Post cards individually (backgrounds, borders, corners, typography).
Adjust overall widget background and padding.