Integrate Partner widgets into CQG Desktop: iFrame specifications

Overview

Partners and CQG can collaborate to integrate partner widgets into CQG Desktop for distribution. All integrations atre subject to a business conversation and contract.

Partner Widget Embedded iFrame

integrations-embedd-partner-widget

Your widget can be available to customers in CQG Desktop from the left bar, widget category: App Store. Or, if you deploy a white label of CQG Desktop, your widget could be available to only your customers.

As a widget, customers will be able to add your widget to any page in any layout.

Information required

Basics

  • Widget name
  • Company name
  • Brief widget description (50 words)
  • Support contact info
  • Sales contact info

Other attributes to include in your iframe code

Sizing

  • width="100%"

Theming

  • &theme=slate
  • &theme=white

Reference partner stylesheet

  • link rel="stylesheet" type="text/css" href="${link-to-third-party-widget-style}"

White listing URLs

If partner widget is has a nested iframe on the partners site, the following domains may need to be whitelisted:

  • m.cqg.com
  • mdemo.cqg.com
  • uatm.cqg.com

Sample code

Dynamic content widget

Content is injected dynamically into iframe on widget instantiation and updated in case of theme change(it leads to widget reload).

<head>
link rel="stylesheet" type="text/css" href="${link-to-third-party-widget-style}"
</head>

<body style="margin:0">

<div id="cme-feed-component"
data-width=""
data-height=""
data-ellipsis-at="100"
data-show-ribbon="false"
data-render-view="list"
data-limit="10"
data-content-type="cmegroup:Research,cmegroup:Research/product-research-spotlight"
data-topics=""
data-products=""
data-page="1"
data-open-modal="true">
</div>

<script src="https://www.cmegroup.com/content/dam/cmegroup/files/cme-research-rss.min.js"></script>

</body>

Where ${link-to-third-party-widget-style} will be

  • https://link-to-third-party-widget-style.css for white theme.
  • https://link-to-third-party-widget-style-dark.css for black theme.

Simplest example

Ticker Tocker, we just provide link in to their application

<iframe [src]="templateUrl"
class="wpfe-ticker-tocker-widget-iframe"
frameborder="0"
sandbox="allow-same-origin;allow-scripts;allow-forms;allow-popups"
allowtransparency
allowfullscreen
#partnerIFrame>
</iframe>

Where templateUrl:

https://cqg.widgets-app.tickertocker.com?theme=${this.themeSettings.effectiveColorTheme}