Skip to main content
All CollectionsViz FlowicsCustom Control Interfaces
Soccer Graphics Custom Control Interface
Soccer Graphics Custom Control Interface
Updated over 9 months ago

Viz Flowics offers ready-to-use graphics templates and control interfaces based on Google Sheets for your live sports productions. Currently supported sports include Volleyball, Baseball, and Soccer, with more coming soon.

This article explains how to use our ready-made Soccer graphics package with a custom control interface provided by Viz Flowics and built on a Google Sheet. The first step in setting up this interface involves familiarizing yourself with the four tabs: Database, Lineups, Set Lineups, Standings, Control, and Settings.

1. Google Sheets Tabs

1.1 Database tab

This tab contains all the data needed for a Soccer game, including:

  • Team names, tri-code, shield, and colors for 3 possible kits. We recommend that all images be hosted in the Assets Library.

  • Sponsor logos (in case you want to show sponsors)

  • Bug logo

  • Red cards and Yellow Cards logos

All information in this tab can be edited at any time and will be used as a data source for the other tabs. In most cases, you will just need to update this tab for your first production as part of the initial setup, but you will not need to make any further changes unless you switch to produce another league or competition with other teams.

1.2 Line up Home/Away tab

These tabs display players' names and nicknames, starters, substitutes, and headshots. Use the drop-down menu to select teams from the Database tab. Set up the teams and enter the players' names. Hit “SET LINE UP HOME/AWAY PROVIDER” at the right of each tab.

1.3 Set Line up Home/Away tab

Use the dropdown to set the formation lines and hit the “SYNC LINEUP SHEET” to sync the lineup tabs.

Choose the captain on the right lineup. Hit “SET LINEUP, HOME PROVIDER”.

1.4 Standings tab

Choose the teams from the dropdown, and set the highlights and stats. Type the numbers in the table.

If there is a need to give any extra information about the table, type it at the bottom and hit “SET STANDINGS”. As an example here the message says : *Everton deducted 10 points following a breach of the Premier League's Profitability and Sustainability Rules (orange text).

1.5 Settings tab

This tab identifies and links all elements from the graphics editor to the Google Sheets.

1.6 Control tab.

This is the main UI for the graphics operator. Through this interface, you will be able to control all your graphics and data sources, during your live production. This tab controls what goes on and off the screen.

2. Set up

2.1 Getting your Graphics Token

Learn how to get the token of your graphics package by clicking here.

After generating the token, copy and paste it into the TOKEN field in the Settings tab.

2.2 URLs

By having the component's URLs you can easily access the graphic package: Editor, Output, and Remote.


To get the graphics editor URL, open the editor to copy its URL.

After this, click “Open Remote” and “Open Output” (at the top right). Two new tabs will be open.

On the remote tab, copy the “Remote URL”.

On the output tab, the “Output URL” can be copied.

Copy each of the URLs and paste it on the Settings tab.

2.3 Data providers - Getting the node ID

  1. In the Graphics editor click on the "Control" Data Provider (located in the Global Data Providers section)

  2. Obtain the “Node ID” by copying the last 4 characters of the URL.

Paste it into the 'control' field

2.4 Integration IDs

Usually, there is no need to change integration IDs unless any overlays from the graphics editor have been removed.

To find more information about Integration IDs click here

3. Operation

3.1 Setup

Go to the Settings tab. Set up the teams by selecting any of the options from the drop-down list and then choose the appropriate color kit: first or second (sometimes different teams have the same first kit). Fill up “League” and “Venue”, after that, select from the dropdown one of the different bugs available. When it’s all ready, click "SET SETTINGS."

3.2 Scorebug

On the Control tab use the “+” or “-” below the code to set the score. To set the score to zero press “RESET SCORE” and to send the scorebug to the screen just press “IN/OUT”.

Set the time to show on the score bug: type or select the time from the gray options “0”, “45”, “90” or “105” - hit “SET TIME” and press “play” (or “pause”, during the game). The button “RESET TIME” will restart the clock to the beginning (if the start was 45 minutes, it will reset the clock to 45 minutes, not zero).

This is how it looks like once it is on air:

3.3 Injury time and red cards

Type the minutes needed and hit “IN” to send it to the screen and “OFF” to take it off. Set red cards from the dropdown. Hit “SET CARDS” to send it to the screen.

3.4 Bookings

This overlay is set to stay on screen for 5 seconds and then it goes automatically off. To change this time, type the number of seconds needed above “DELAY” in the top right corner. Once it’s done type the shirt number of the player and select from the dropdown the card (red or yellow). If there is a need to display that player will miss the next match, select from the dropdown (yes or no). After that, hit “CARD HOME IN/OUT” or “CARD AWAY IN/OUT”. To clear all settings on home or away bookings, hit “CLEAR”

3.5 Goal scorers

This overlay is set to stay on screen for 7 seconds and then it goes automatically off. To change this time, type the number of seconds needed above “DELAY” in the top right corner. Once it’s done type the shirt number of the player and set when the goal happened. From the dropdown choose if it was a penalty goal or an own goal. If it is an “own goal”, choose a player from the opposite team. To send it to the screen, hit “GOAL HOME IN/OUT” or “GOAL AWAY IN/OUT”. To clear all settings on home or away goal scorers, hit “CLEAR”

3.6 Substitutions

This overlay is set to stay on screen for 12 seconds and then it goes automatically off. To change this time, type the number of seconds needed above “DELAY” in the top right corner. Once it’s done type the shirt number of each player (starter and sub). To send it to the screen, hit “SUBS HOME IN/OUT” or “SUBS HOME IN/OUT”. To clear all settings on home or away substitutions, hit “CLEAR”.

3.7 Scoreboard Lower Third

This overlay shows goals, time, period, penalties, and own goals. Type the shirt and set the minutes for each goal, choose if it was a penalty or own goal from the dropdown, and select the period. Once all information is correct click “SET SCOREBOARD”, to send it on/off the screen hit “IN/OUT”. To clear all information on the board, hit “CLEAR”

3.8 Commentators

This overlay is set to stay on screen for 5 seconds and then it goes automatically off. To change this time, type the number of seconds needed above “DELAY” in the top right corner. Select the number of commentators from the dropdown and fill their names and titles. If there is only one commentator, make sure the other field is blank. Hit “COMMENTATORS IN/OUT” to send it on screen.

3.9 Referee

This overlay is set to stay on screen for 5 seconds and then it goes automatically off. To change this time, type the number of seconds needed above “DELAY” in the top right corner. Type the referee name and hit “REFEREE IN/OUT” to send it on screen.

3.10 Dropline

This overlay is set to stay on screen for 5 seconds and then it goes automatically off. To change this time, type the number of seconds needed above “DELAY” in the top right corner. Type the social media hashtag and hit “DROPLINE IN/OUT” to send it on screen.

3.11 Sponsors

This overlay is set to stay on screen for 5 seconds and then it goes automatically off. To change this time, type the number of seconds needed above “DELAY” on the top right corner. Choose the most convenient format (wide or square) and select from the dropdown the sponsor to be shown. Hit “SPONSOR WIDE IN/OUT” or “SPONSOR SQUARE IN/OUT”

3.12 More overlays

3.12.1 Lineup Home IN/OUT

This full-screen overlay displays the lineup with starters' pictures in the field along with substitute names. Hit “Lineup Home IN/OUT “ once to send it on screen and again to take it off.

3.12.2 Lineup Away IN/OUT

This full-screen overlay displays the lineup with starters' pictures in the field along with substitute names. Hit “Lineup Away IN/OUT “ once to send it on screen and again to take it off.

3.12.3 Opening FS IN/OUT

This full-screen overlay displays teams and their shields. Hit “Opening FS IN/OUT “ once to send it on screen and again to take it off.

3.12.4 Opening L3 IN/OUT

This overlay displays teams and their shields as well as the chosen league and venue. Hit “Opening L3 IN/OUT “ once to send it on screen and again to take it off.

3.12.5 Standings IN/OUT

This overlay displays the standings table. Hit “Standings IN/OUT“ once to send it on screen and again to take it off. This data comes from the “Standings” tab.

3.13 Penalty shots

This lower third overlay displays the full time score. On the Penalty Shots panel there is a score only for penalties. Hit “IN/OUT” at the bottom right to send this overlay on screen.

The first five shots are set as “OFF” (do not show on screen), once the teams start, choose from the dropdown “SCORE” or “MISS”. The first one will display a green circle on screen and the second one will display a red one. Hit “SET PENALTIES” everytime a new shot is played to update the screen.

If the five shots are not enough, hit “RESET SHOTS” to clear them all. Don’t forget to update the total score at the top of the panel.

3.14 Take all off/Clear all

If there is a need to take all overlays off-screen, just hit “TAKE ALL OUT”. Once the game is over, hit “CLEAR ALL’ to restart the sheet.

Did this answer your question?