Integrate CQG Widgets on Partner websites

Overview

Webwidgets are widgets from CQG Desktop that can be posted on partner websites.

integrations-cqg-webwidgets

Process and Configuration

Partners will need to send the URL to their CQG account representative where the widget will be hosted so the URL can be white listed.
After a Webwidget is approved and configured, your CQG account representative will send you iframe code to embed your public website.
Partners can use the parameters below to adjust the iframe code to control what is displayed in the Webwidget.

Widget modes

There are three modes of web widgets data view: quotes, chart and all (quotes and chart). The required view is controlled by a special url search parameter: ?view={mode}.

Quotes Only

When ?view=quotes - this view displays the CQGD QSS widget according to the specified url search parameters:

  • &symbols={symbols} - array of required symbols (comma separated) with which QSS widget will be populated;
  • &columns={columns} - array of required columns (comma separated) for QSS widget. A list of all available columns is shown below.

Supported columns:

  • symbol
  • description
  • exchange
  • contractMonthYear
  • instrument_expiration_date
  • quote
  • quotetoday
  • quotenc
  • quotencp
  • quotenctoday
  • quotencptoday
  • trade
  • tradevolh
  • tradenc
  • tradench
  • tradencp
  • tradencph
  • tradesettle
  • bid
  • ask
  • bidvol
  • askvol
  • totvol
  • tradevol
  • open
  • indicativeOpen
  • high
  • low
  • settle
  • settlenc
  • lastQuoteOrSettleToday
  • quotesTradeDate
  • lastSettlementDate
  • openInterest
  • today_settlement
  • yesterday_open_price
  • yesterday_high_price
  • yesterday_low_price
  • yesterday_contract_volume
  • yesterday_close_price
  • yesterday_close_date
  • yesterday_settlement
  • yesterday_settlement_date

e.g. https://webwidgets.cqg.com/quotes/?pl=PartnerLabel1&view=quotes&symbols=ep,sp&columns=symbol,description,trade,bid,ask,close,settle,tradenc,totvol

Chart Only

When ?view=chart - this view displays the CQGD Chart widget according to the specified url search parameters:

  • &symbol={symbol} - string of proposed symbol that will be used in Chart widget;
  • &chartQuoteKind={kind} - string of quote kind (bid/ask/trade) that will be used in Chart widget.

e.g. https://webwidgets.cqg.com/quotes/?pl=PartnerLabel1&view=chart&symbol=ep

Quotes & Chart linked

When ?view=all - this view displays both CQGD QSS and Chart widgets with splitter according to the specified url search parameters:

  • &symbols={symbols} - array of required symbols (comma separated) with which QSS widget will be populated and the first symbol will be used in Chart widget;
  • &columns={columns} - array of required columns (comma separated) for QSS widget. A list of all available columns is shown below;
  • &chartQuoteKind={kind} - string of quote kind (bid/ask/trade) that will be used in Chart widget.

e.g. https://webwidgets.cqg.com/quotes/?pl=PartnerLabel1&theme=slate&view=all&symbols=ep,sp&columns=symbol,description,trade,bid,ask,close,settle,tradenc,totvol

Themes

Two themes are available to choose from: slate and white. Use &theme={theme} parameter to select. slate theme is default.

Widget Usage

Embed an iframe tag with widgets.cqg.com url into a web page. E.g.

<html>
<head>
</head>
<body>
<div>
Some text here.
</div>
<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="100%"
    height="800"
    src="https://webwidgets.cqg.com/quotes/?pl=PartnerLabel1&theme=slate&view=all&symbols=ep,sp&columns=symbol,description,trade,bid,ask,close,settle,tradenc,totvol">
</iframe>
<div>
And some text here.
</div>
</body>
</html>