Documentation

This is the documentation for MetaBet products using JavaScript and HTML. If your site relies on WordPress, you should use the MetaBet WordPress Plugin documentation.

Global Include

The first step in integrating MetaBet is adding the following JavaScript include to the <head> section of your webpage:
<script defer src="https://go.metabet.io/js/global.js?siteID=DEMO"></script>

Intelligent Hyperlinking

To enable, simply add a "metabet-bubble" class to the HTML element that encapsulates all of the text of the article. It can be added to multiple sibling elements, but we recommend adding it to just one.

Dynamic Odds

A list of Dynamic Odds embeds for all games in the next 30 days is located at https://www.metabet.io/catalog. Pasting any one of the embeds onto a page with MetaBet Javascript installed will trigger dynamic live odds to be inserted directly into your HTML, for example:

Dynamic Spread

Spread for the Away team in Game 504588
<span class="metabet-odds metabet-market-spread-away metabet-query-504588"></span>

Spread for the Home team in Game 504588
<span class="metabet-odds metabet-market-spread-home metabet-query-504588"></span>

Dynamic Money Line

Moneyline for the Away team in Game 504588
<span class="metabet-odds metabet-market-moneyLine-away metabet-query-504588"></span>

Moneyline for the Home team in Game 504588
<span class="metabet-odds metabet-market-moneyLine-home metabet-query-504588"></span>

Dynamic Over/Under

Over/Under for Game 504588
<span class="metabet-odds metabet-market-overUnder metabet-query-504588"></span>

Optional Modifiers: metabet-location, metabet-style

Ad Tiles

Game Tiles

Tiles are installed with a single div:
<div class="metabet-gametile metabet-size-SIZE metabet-query-QUERY"></div>

The SIZE value can be set to any size desired, but it is optimized for five sizes: 300x50, 320x50, 336x280, 300x250, and 728x90. You can create a responsive tile by setting the width to 100%, for example, metabet-size-100%x300. By default, the display is with "classic" / American odds. To enable the "modern" view, add the "metabet-style-modern" class to the div.

The QUERY value can support a wide range of value types, including a MetaBet game ID, a supported data provider game ID, team name, or city. MetaBet game IDs can be found at https://www.metabet.io/catalog. If the QUERY value normally has a space in it, underscores should be used instead. For example, a tile for Manchester United would be represented as "manchester_united".

Example 1

A "classic" 336x280 game summary tile for game ID 415226:
<div class="metabet-gametile metabet-size-336x280 metabet-query-415226"></div>

Example 2

A "classic" 336x280 game summary tile for any New York-based team:
<div class="metabet-gametile metabet-size-336x280 metabet-query-new_york"></div>

Example 3

A "modern" 728x90 for game summary tile for any upcoming NBA game:
<div class="metabet-gametile metabet-size-728x90 metabet-query-nba metabet-style-modern"></div>

Optional Modifiers: metabet-location, metabet-market, metabet-style

Odds Compare Tiles

Tiles are installed with a single div:
<div class="metabet-oddscompare metabet-size-SIZE metabet-query-QUERY"></div>

The SIZE value can be set to any size desired, but it is optimized for two sizes: 336x280, 300x250. You can create a responsive tile by setting the width to 100%, for example, metabet-size-100%x300. By default, the display is with "classic" / American odds. To enable the "modern" view, add the "metabet-style-modern" class to the div.

The QUERY value can support a wide range of value types, including a MetaBet game ID, a supported data provider game ID, team name, or city. MetaBet game IDs can be found at https://www.metabet.io/catalog. If the QUERY value normally has a space in it, underscores should be used instead. For example, a tile for Manchester United would be represented as "manchester_united".

Example 1

A "classic" 336x280 odds compare tile for game ID 415226:
<div class="metabet-oddscompare metabet-size-336x280 metabet-query-415226"></div>

Example 2

A "classic" 336x280 game summary tile for any New York-based team:
<div class="metabet-oddscompare metabet-size-336x280 metabet-query-new_york"></div>

Example 3

A "modern" 728x90 for game summary tile for any upcoming NBA game:
<div class="metabet-oddscompare metabet-size-728x90 metabet-query-nba metabet-style-modern"></div>

Optional Modifiers: metabet-location, metabet-style

Odds Board

The Odds Board is installed with a single div:
<div class="metabet-odds-board"></div>

Optional Modifiers: metabet-hide-consensus, metabet-league, metabet-location, metabet-market, metabet-rows, metabet-style

Futures Board

The Futures Board is installed with a single div:
<div class="metabet-futures-board"></div>

Optional Modifiers: metabet-hide-consensus, metabet-league, metabet-location, metabet-rows, metabet-style


Embed Modifiers

Beyond the required classes, you can add extra modifiers to set defaults and tweak the display.

league

Products that have a visible sport or league dropdown can have a default set using this modifier. metabet-league-nba would default the dropdown to NBA and metabet-league-nfl code would default to the NFL.

location

A geographic location can be set by including this modifier. Including metabet-location-pa would only show prices from Pennsylvania, metabet-location-nj would only show prices from New Jersey.

market (Game Tile, Odds Board)

You can set the default market for Tiles or an Odds Board by including metabet-market-spread, metabet-market-moneyLine, or metabet-market-overUnder. The Odds Board has an additional option, metabet-market-smart-moneyLine that will show Money Line for MLB, NHL, and Soccer, but show Spread for every other sport.

market (Odds Compare)

The market modifier lets you choose the line to compare across multiple books. You can choose from metabet-market-spread-away, metabet-market-spread-home, metabet-market-moneyLine-away, metabet-market-moneyLine-home, and metabet-market-overUnder.

market (Dynamic Odds)

View the full list of supported markets.

market (Futures Board)

You can set the default market for the Futures Board via this modifier, when used along with the league modifier. You can choose a value from the full list of supported markets.

providers

Each site has a pre-configured list of sportsbooks that will be used, but you can override this for any individual shortcode by specifying a list of books in order. Adding metabet-providers-draftkings-pointsbet-mgm to a Game Tile would limit the lines shown to just those three books. Adding it to an Odds or Futures Board would limit the columns to just those three, in that order.

piece

This modifier is used with Dynamic Odds whenever an Over/Under line is being displayed. By default, the Line and the Over price in parentheses will be displayed, for example: 48.5 (-110). If you'd like to show just the Line, just the Over price, or just the Under price, you can include a modifier of metabet-piece-line, metabet-piece-over, or metabet-piece-under.

priority

This modifier is used with Props/Futures Tiles to move a player or team to the top of the list. Lines are shown in price order by default, and this allows you to prioritize an entry that's usually lower on the list. For example, you could prioritze the Orioles and the Red Sox in the World Series market with <div class="metabet-sideoddstile metabet-query-mlb/mlb_winner metabet-priority-orioles-red_sox"></div>.

query

Arguably, the most important modifier we have, query instructs a Tile what it should display. You can instruct it to focus on a specific game by passing in that Game ID, such as metabet-game-504588. You can also use IDs from other data providers, as well as a name and start time pairing, like metabet-query-mlb/marlins/1660086300000. To create a tile that's always showing the next Dallas Cowboys game, use metabet-query-nfl/cowboys. For an evergreen MLB tile, use metabet-query-mlb. To have a Prop/Futures Tile show lines for Lebron James, use metabet-query-nba/lebron_james. To show lines for a specific market like AL MVP or Winner of the NFC North, the query should be one of our supported markets.

roundname

Use this modifier with an Odds Board to choose the initial round of games to be displayed, like metabet-roundname-Week-4, metabet-roundname-Week-8, metabet-roundname-Preseason-Week-3.

rows

This modifier can change the number of rows displayed. Including metabet-rows-10 on a Futures Board would limit it to just the first 10 entries. Including metabet-rows-10 on a Futures Tile would modify it from showing the first three markets to showing up to 10.

size

Use this modifier to set the width and height of a Tile, such as metabet-size-350x300 or metabet-size-728x90. To have a tile span the entire width of a section you can use percentages, like metabet-size-100%x150

style

The default style we use for displaying odds is metabet-classic, American-style odds (+200). You can also use metabet-style-modern ($30), metabet-style-modern-cents ($30.00), metabet-style-decimal (3) or metabet-style-fraction (3/1).

hide-consensus

Including metabet-hide_consensus will hide the Consensus column in Odds and Futures boards.

hide-league, hide-market, hide-location

You can use metabet-hide-league, metabet-hide-market, and/or metabet-hide-location to hide navigation dropdowns in Odds and Futures Boards.