Partner Widget Integration 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.

Primary Method: Embedded iFrame

Your widget will be available to customers in CQG Desktop from the left bar, widget category: App Store.

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-widdget-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-widdget-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

 

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}`