How-To Guide: Using the Team Cover Widget

This guide provides step-by-step instructions for adding and configuring the new Team Cover widget within the page builder.

Demo video:

 

What is the Team Cover Widget?

The Team Cover is a new, reusable component designed to display a team's name, logo, and current record (e.g., "9-7-1 | 2nd in NFC North"). It is SEO-friendly, accessible, and ensures a consistent visual style across all sites.

The first available version is for all NFL teams. NBA teams should be live


Adding the Widget to a Page

Follow these steps to add the NFL Team Cover widget to your article or page.

Step 1: Add the "Sport Stats" Component

  1. In the page builder, find the Sport Stats component in the list of components on the left-hand side of the screen.

  2. Drag and drop it onto the desired location on your page.

Step 2: Select the Widget Type

  1. Click on the "Sport Stats" component you just added to the page.

  2. On the right side of the screen, find the dropdown menu labeled Type.

  3. Select NFL Team Cover from the list of options.

Step 3: Configure the Team

  1. Below the "Type" dropdown, you will see a text box labeled Config.

  2. You must manually tell the widget which team to display by entering a small piece of code.

  3. Copy and paste the following code into the Config box:

    {
      "team": "CODE"
    }
    
  4. Replace "CODE" with the specific three-letter abbreviation for the NFL team you want to display. For example, for the Miami Dolphins, the code is MIA, so you would enter:

    {
      "team": "MIA"
    }
    

Step 4: Preview and Save
Click the Preview button at the top of the page to ensure the correct team cover is displayed. If it looks right, you can save or publish your page.


NFL Team Codes Reference List

Use the following list to find the correct three-letter code for each NFL team. The code must be exact for the widget to work correctly.

City    Team Name    Code
Denver    Broncos    DEN
Los Angeles    Chargers    LAC
Kansas City    Chiefs    KC
Las Vegas    Raiders    LV
Buffalo    Bills    BUF
Miami    Dolphins    MIA
New York    Jets    NYJ
New England    Patriots    NE
Indianapolis    Colts    IND
Jacksonville    Jaguars    JAC
Houston    Texans    HOU
Tennessee    Titans    TEN
Cincinnati    Bengals    CIN
Cleveland    Browns    CLE
Baltimore    Ravens    BAL
Pittsburgh    Steelers    PIT
Tampa Bay    Buccaneers    TB
Atlanta    Falcons    ATL
Carolina    Panthers    CAR
New Orleans    Saints    NO
San Francisco    49ers    SF
Arizona    Cardinals    ARI
Los Angeles    Rams    LA
Seattle    Seahawks    SEA
Washington    Commanders    WAS
Dallas    Cowboys    DAL
Philadelphia    Eagles    PHI
New York    Giants    NYG
Chicago    Bears    CHI
Detroit    Lions    DET
Green Bay    Packers    GB
Minnesota    Vikings    MIN


Troubleshooting

Problem: The widget is blank, not showing up, or displaying the wrong team.

  • Check the Widget Type: Ensure you have selected NFL Team Cover from the "Type" dropdown.

  • Verify the Config Code: Make sure the text in the "Config" box is formatted correctly: {"team": "CODE"}. There should be no extra characters, and "team" must be in lowercase.

  • Check the Team Code: Confirm that the three-letter team code is correct by checking it against the reference list above.

Note: This manual configuration is a temporary step. In the future, this process will be simplified with dropdown menus to select the league and team directly.