SoccersAPISoccersAPIWidgets V2

What happens when visitors click

Choose where matches, teams, competitions and players open, from a window over the widget to pages on your own site.

A widget is full of links: every match row, team name, competition and player in a lineup can be opened. The Navigation mode setting decides where each click opens. You find it in Entity navigation, in the right-hand column of the configurator. With a Match, League, Team or Player widget selected, the same section is called Match navigation, League navigation and so on.

The options at a glance

Navigation modeWhat the visitor seesBest for
Modal (default)A window opens over the widget. Closing it returns to the list.Most sites, and any narrow column.
In-widget contentThe widget itself shows the match, team or player, with a back arrow.Full-width pages and club hubs.
Floating cardsWhat visitors click stays pinned in the bottom corner of the widget while they keep browsing.Pages where people follow several live games.
Dynamic PagesA normal link to a page on your own website.A page of your own for every match, team, competition and player.
None (no entity links)Nothing opens. The widget only shows information.A single match in an article, or a sidebar.

Plans

Choosing the mode needs a plan with advanced navigation. On other plans every click opens the modal, with its default look. Dynamic Pages also needs the add-on on the domain where the widget runs; see Dynamic Pages.

The modal is a window over the widget. A link inside it (for example a player in the lineup) replaces its content, and the back button in its header returns to the previous item. With the default size, the window fills the screen on phones.

SettingWhat it does
Modal sizeAuto (2XL, sheet on mobile), from Small to 4XL, or Full screen. With Auto, the window fills the screen on phones.
Modal anchorWhere windows and pop-ups (item window, search, settings, calendar) open. Inside the widget keeps them within the widget's area, scrolling with it. On the page lets them cover the whole screen. Auto (host decides) is the same as Inside the widget when you use the installation code.
Modal frameEdge-to-edge or Carded.
Modal headerShows or hides the window's header bar with back, title, favourite and close.
Modal content insetSpace around the content, 0 to 32 px. Only with the Carded frame.

Minimize to floating card. With advanced navigation, every match, team, competition and player window has a Minimize to floating card button next to its close button. It pins the item to the floating area described below, so visitors can keep following it after closing the window.

In-widget content

The widget replaces the list with the item the visitor clicked, and shows a back arrow to return. The browser's back button returns too. Nothing opens on top of your page.

Combine it with Widget height (in Global behavior) if the widget sits between other content: with a fixed height the widget scrolls inside itself, so opening an item does not make your page jump.

Floating cards

Floating cards let visitors pin what they click and keep browsing. Each pinned item follows its live score while the list stays usable.

On widgets 900 px wide or more

  • A click opens the item expanded in the bottom corner of the widget: the whole match, team, competition or player in a compact form, with every tab. The header and tabs stay fixed and only the content scrolls.
  • Cards that fit side by side stay expanded: three when the widget is at least 1000 px wide, two between 900 and 999 px. The others become live chips in the pinned bar. Nothing is closed for lack of room.
  • A chip keeps the essentials up to date: the score, the minute and the last key event. A team chip follows the team's live, last or next match, a player chip follows the match of the player's team, and a competition chip shows how many of its matches are live.
  • Each card has Minimize (back to a chip), Open full view and Unpin. Clicking a chip restores it, and Escape minimizes the card that has focus.
  • Hide pinned tucks the whole area away without unpinning anything, and Show pinned brings it back.
  • Pinned items belong to the visit: they are cleared when the visitor reloads or leaves the page.

On narrower widgets and phones

Under 900 px, pinned items sit as chips in a tray along the bottom of the widget. Tapping a chip opens a sheet with the same compact view, buttons to move to the previous or next pinned item, and Open full view.

Settings

SettingWhat it does
Open as floating cardOne box per type: Matches, Teams, Leagues, Players. All are ticked by default. Unticked types open in the modal instead. At least one type must stay ticked; to open everything in a window, choose Modal.
Max pinned itemsHow many items can stay pinned at once, 1 to 10 (default 5). Pinning one more removes the least recently used chip, or the least recently used card when there is no chip.

The modal settings above also shape the window that Open full view opens.

Check the width of your column

Expanded cards need a widget at least 900 px wide. Set the preview width in the configurator to the real width of the column where the widget will sit before choosing this mode.

Everything is still shown, but nothing can be opened: match rows, team names and players are plain text. Choose it for a widget that only needs to inform, such as one match inside an article.

Dynamic Pages

With the Dynamic Pages add-on, a click is a normal link to a page on your own website, such as /en/matches/{match-name}/{match-id}. Your site shows the match, team, competition or player on that page. The option appears only for domains where the add-on is active. Without it, a saved Dynamic Pages choice opens the modal instead.

Read Dynamic Pages to decide whether you need it and Install Dynamic Pages to set it up.

Which one should I choose?

Your pageSuggested mode
A scores page or a homepage blockModal, or Floating cards if the column is wide
A club or competition hub that fills the pageIn-widget content
A live page where people follow several gamesFloating cards
One match inside an articleNone or Modal
A site with its own page for every match and teamDynamic Pages

On this page