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 562067
<span class="metabet-odds metabet-market-spread-away metabet-query-562067"></span>
Spread for the Home team in Game 562067
<span class="metabet-odds metabet-market-spread-home metabet-query-562067"></span>
Dynamic Money Line
Moneyline for the Away team in Game 562067
<span class="metabet-odds metabet-market-moneyLine-away metabet-query-562067"></span>
Moneyline for the Home team in Game 562067
<span class="metabet-odds metabet-market-moneyLine-home metabet-query-562067"></span>
Dynamic Over/Under
Over/Under for Game 562067
<span class="metabet-odds metabet-market-overUnder metabet-query-562067"></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-show-granular, metabet-location, metabet-market, metabet-period, 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
Parlay Tiles
You can configure a Parlay Tile using our Parlay Builder.
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-show-search, 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-show-search, metabet-style
Embed Modifiers
Beyond the required classes, you can add extra modifiers to set defaults and tweak the display.
show-granular
This adds a dropdown to Game Tiles, letting users choose individual sections of a game to focus on, like 1st Quarter or 2nd Half.
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. The full list is: BET_365
, BET_RIVERS
, DESERT_DIAMOND
, DRAFTKINGS
, FANDUEL
, MGM
, POINTSBET
, SPORTS_INTERACTION
, SPORT_888
, SUGAR_HOUSE
, TIPICO
, UNIBET
, WILLIAM_HILL
(aka Caesars), and WYNN
.
period
Used with Game Tiles, this modifier changes the display from showing lines for a full game to showing lines for a specific period like 1st Quarter or 2nd Half. The allowed values are: FirstPeriod
, SecondPeriod
, FirstHalf
, FirstFiveInnings
, ThirdPeriod
, FourthPeriod
, and SecondHalf
. You can also use the abbreviated versions: 1P
, 1Q
, 2P
, 2Q
, 1H
, 3P
, 3Q
, 4Q
, 2H
.
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>
.
show-provider
When using Dynamic Odds, adding metabet-show-provider
will insert the logo of the sportsbook next to the line.
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-562067
. You can also use IDs from other data providers, as well as a name and start time pairing, like metabet-query-nfl/jets/1733680800000
. 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
. Additional values for the NFL Playoffs include metabet-roundname-wild-card-round
, metabet-roundname-divisional-round
, metabet-roundname-conference-championships
, and metabet-roundname-super-bowl
.
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.
show-search
This adds a search box so users can search for a team or player in the Odds and Futures Boards.
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-style-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.