Download

Integration Guide

XBO Market Kit > Integration Guide

Integration Guide

Developer documentation for custom integrations and advanced usage

1. Theme Integration

Integrate XBO Market Kit widgets directly into your WordPress theme templates.

Using do_shortcode()

Add widgets to any theme template file:

<?php
// In your theme's template file (header.php, sidebar.php, etc.)
echo do_shortcode('
BTC
BTC
BTC/USDT
--
0.00%
ETH
ETH
ETH/USDT
--
0.00%
');
?>

Conditional Display

<?php
// Show ticker only on homepage
if ( is_front_page() ) {
    echo do_shortcode('
BTC
BTC
BTC/USDT
--
0.00%
ETH
ETH
ETH/USDT
--
0.00%
SOL
SOL
SOL/USDT
--
0.00%
');
}

// Show movers on blog pages
if ( is_home() || is_archive() ) {
    echo do_shortcode('
PairPrice24h Change
ATH/USDT		$0.00591+14.53%
YB/USDT		$0.1752+10.82%
FLOW/USDT		$0.0397+9.07%
LAYER/USDT		$0.0935+8.97%
KAITO/USDT		$0.3399+5.46%
JELLYJELLY/USDT		$0.065097+3.17%
ARB/USDT		$0.1021+3.03%
DRIFT/USDT		$0.087+2.84%
FF/USDT		$0.0813+2.82%
CHZ/USDT		$0.03303+2.77%
');
}
?>

Template Part Example

<?php
/**
 * Template Part: Crypto Ticker Bar
 * File: template-parts/crypto-ticker.php
 */
?>
<div class="crypto-ticker-bar">
    <?php echo do_shortcode('
BTC
BTC
BTC/USDT
--
0.00%
ETH
ETH
ETH/USDT
--
0.00%
BNB
BNB
BNB/USDT
--
0.00%
XRP
XRP
XRP/USDT
--
0.00%
'); ?>
</div>

2. Custom Styling

Override default styles to match your site’s design.

CSS Class Reference

All widgets use the .xbo-mk- prefix for CSS classes:

/* Ticker Widget */
.xbo-mk-ticker { }
.xbo-mk-ticker-card { }
.xbo-mk-ticker-symbol { }
.xbo-mk-ticker-price { }
.xbo-mk-ticker-change { }
.xbo-mk-ticker-change--positive { color: #49B47A; }
.xbo-mk-ticker-change--negative { color: #FD3B5E; }

/* Top Movers Widget */
.xbo-mk-movers { }
.xbo-mk-movers-list { }
.xbo-mk-movers-item { }

/* Order Book Widget */
.xbo-mk-orderbook { }
.xbo-mk-orderbook-bids { }
.xbo-mk-orderbook-asks { }

/* Recent Trades Widget */
.xbo-mk-trades { }
.xbo-mk-trades-list { }
.xbo-mk-trades-item { }

/* Slippage Calculator */
.xbo-mk-slippage { }
.xbo-mk-slippage-form { }
.xbo-mk-slippage-result { }

Custom Styles Example

Add to your theme’s style.css or Customizer:

/* Dark theme override */
.xbo-mk-ticker {
    background: #1a1a2e;
    border-radius: 12px;
    padding: 20px;
}

.xbo-mk-ticker-card {
    background: #16213e;
    border: 1px solid #0f3460;
}

.xbo-mk-ticker-symbol {
    color: #e94560;
    font-weight: 700;
}

.xbo-mk-ticker-price {
    color: #ffffff;
    font-size: 24px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .xbo-mk-ticker {
        padding: 10px;
    }
    .xbo-mk-ticker-card {
        margin-bottom: 10px;
    }
}

3. REST API Usage

Access market data programmatically via WordPress REST API.

API Endpoints

EndpointMethodDescription
/wp-json/xbo/v1/tickerGETGet ticker data for symbols
/wp-json/xbo/v1/moversGETGet top gainers/losers
/wp-json/xbo/v1/orderbookGETGet order book depth
/wp-json/xbo/v1/tradesGETGet recent trades
/wp-json/xbo/v1/slippageGETCalculate slippage

JavaScript Example

// Fetch ticker data
fetch('/wp-json/xbo/v1/ticker?symbols=BTC/USDT,ETH/USDT')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        // Process ticker data
    })
    .catch(error => console.error('Error:', error));

// Fetch top movers
fetch('/wp-json/xbo/v1/movers?count=10')
    .then(response => response.json())
    .then(data => {
        // Display movers data
    });

PHP Example

<?php
// Get ticker data programmatically
$response = wp_remote_get(
    home_url('/wp-json/xbo/v1/ticker?symbols=BTC/USDT,ETH/USDT')
);

if ( ! is_wp_error( $response ) ) {
    $data = json_decode( wp_remote_retrieve_body( $response ), true );

    foreach ( $data as $ticker ) {
        echo '<div>';
        echo '<strong>' . esc_html( $ticker['symbol'] ) . '</strong>: ';
        echo esc_html( $ticker['price'] );
        echo '</div>';
    }
}
?>

4. Shortcode Reference

Complete shortcode documentation with all available attributes.

Ticker Shortcode

BTC
BTC
BTC/USDT
--
0.00%
ETH
ETH
ETH/USDT
--
0.00%
SOL
SOL
SOL/USDT
--
0.00%

Attributes:

  • symbols – Trading pairs (comma-separated)
  • columns – Grid columns (1-6, default: 4)
  • refresh – Auto-refresh seconds (15, 30, 60)
  • showSparkline – Show trend chart (true/false)

Top Movers Shortcode

PairPrice24h Change
ATH/USDT		$0.00591+14.53%
YB/USDT		$0.1752+10.82%
FLOW/USDT		$0.0397+9.07%
LAYER/USDT		$0.0935+8.97%
KAITO/USDT		$0.3399+5.46%
JELLYJELLY/USDT		$0.065097+3.17%
ARB/USDT		$0.1021+3.03%
DRIFT/USDT		$0.087+2.84%
FF/USDT		$0.0813+2.82%
CHZ/USDT		$0.03303+2.77%

Order Book Shortcode

Order Book — BTC/USDT
PriceAmount
PriceAmount
Spread: --

Recent Trades Shortcode

Recent Trades — BTC/USDT
TimeSidePriceAmount

Slippage Calculator Shortcode

Slippage Calculator
  • 1INCH
  • A
  • AAPLX
  • AAVE
  • ADA
  • AKT
  • ALGO
  • ALMANAK
  • AMZNON
  • APE
  • APT
  • AR
  • ARB
  • ASTER
  • ATH
  • ATOM
  • AUDIO
  • AVA
  • AVAX
  • AVGOX
  • AVNT
  • AXL
  • AXS
  • AZTEC
  • BAL
  • BAT
  • BCH
  • BCUT
  • BLUR
  • BNB
  • BONK
  • BREV
  • BROCCOLI
  • BTC
  • CAKE
  • CC
  • CELO
  • CHZ
  • COMP
  • CRV
  • DAI
  • DOGE
  • DOT
  • DRIFT
  • DYDX
  • EGLD
  • EIGEN
  • ENA
  • ENS
  • ESP
  • ETC
  • ETH
  • ETHW
  • EURC
  • FARTCOIN
  • FET
  • FF
  • FIL
  • FLOKI
  • FLOW
  • FLR
  • GALA
  • GAS
  • GOOGLX
  • GRASS
  • GRT
  • HBAR
  • HNT
  • HONEY
  • HYPE
  • ICP
  • IMU
  • IMX
  • INJ
  • IO
  • IOTA
  • IOTX
  • IP
  • JELLYJELLY
  • JTO
  • JUP
  • KAITO
  • KMNO
  • LAYER
  • LDO
  • LINEA
  • LINK
  • LIT
  • LLYX
  • LPT
  • LTC
  • MANA
  • MASK
  • ME
  • MET
  • METAX
  • MMT
  • MNT
  • MON
  • MORPHO
  • MOVE
  • MSFTON
  • MUBARAK
  • NEAR
  • NEIRO
  • NEO
  • NIGHT
  • NOT
  • NVDAX
  • ONDO
  • OP
  • PAXG
  • PENDLE
  • PENGU
  • PEPE
  • PGX
  • PI
  • PNUT
  • POL
  • PUMP
  • PYTH
  • PYUSD
  • QNT
  • QQQX
  • QTUM
  • RAY
  • RENDER
  • RON
  • S
  • SAND
  • SEI
  • SHIB
  • SKR
  • SKY
  • SNX
  • SOL
  • SPYX
  • STRK
  • STX
  • SUI
  • SUSHI
  • TAO
  • THETA
  • TIA
  • TNSR
  • TON
  • TRUMP
  • TRX
  • TSLAX
  • TWT
  • UMA
  • UNI
  • UP
  • USD1
  • USDC
  • USDE
  • USDG
  • USDT
  • VET
  • VINE
  • VIRTUAL
  • W
  • WBTC
  • WET
  • WIF
  • WLD
  • WLFI
  • XAUT
  • XBO
  • XEC
  • XLM
  • XPL
  • XRP
  • XTZ
  • YB
  • ZAMA
  • ZEC
  • ZIL
  • ZORA
  • ZRX
  • No results
/
  • AUD
  • EUR
  • GBP
  • MXN
  • RLUSD
  • USD
  • USDC
  • USDT
  • No results
Avg Price
—
Slippage
—
Spread
—
Spread %
—
Depth Used
—
Total Cost
—
Calculating...

Need More Help?

Check out the API Documentation for detailed endpoint specifications

View API Docs