Skip to main content

Embed the News widget

Paste this where you want the widget to appear:

<script
  src="https://www.dealsize.ai/dealsize-widget.js"
  async
  data-widget="news"
  data-symbol="AAPL"
  data-variant="full"
  data-locale="en"
  data-height="700px"
  data-utm-source="yourdomain.com"
></script>

How it works​

The loader script replaces itself with a container <div> holding an iframe pointed at the News widget page. Every data-* attribute except the iframe-level ones (data-width, data-height, data-container-id) is converted from kebab-case to camelCase and forwarded as a query parameter. For example, data-accent-color="#069BEC" becomes accentColor=%23069BEC.

data-symbol takes an FMP ticker, or your broker code for the major instruments. See Symbols.

The script bakes in no defaults: anything you don't pass is filled in by the widget's server-side configuration schema, so your embed never goes stale.

Common recipes​

Compact symbol feed with your brand color:

<script
  src="https://www.dealsize.ai/dealsize-widget.js"
  async
  data-widget="news"
  data-symbol="XAUUSD"
  data-variant="minimal"
  data-accent-color="#E01013"
  data-height="auto"
  data-utm-source="yourdomain.com"
></script>

Category feed (no symbol), images off:

<script
  src="https://www.dealsize.ai/dealsize-widget.js"
  async
  data-widget="news"
  data-category="forex"
  data-show-images="false"
  data-utm-source="yourdomain.com"
></script>

Load more in place (default)​

The minimal widget ends with a "Load more" button. Each click adds the next page of articles to the same list, until there are no more or data-max-items is reached, so visitors never leave your page and you don't need a news page of your own. With data-height="auto" the widget grows as articles are added; with a fixed height the list scrolls inside it.

Linking a minimal widget to a full page​

If you do have a news page, set data-see-more-mode="link" to show "See more" instead, point it at your page, and put a full widget there. You don't need to pass the symbol yourself:

<!-- On your instrument page -->
<script
  src="https://www.dealsize.ai/dealsize-widget.js"
  async
  data-widget="news"
  data-variant="minimal"
  data-symbol="AAPL"
  data-see-more-mode="link"
  data-see-more-url="https://yourdomain.com/news"
></script>

<!-- On https://yourdomain.com/news -->
<script
  src="https://www.dealsize.ai/dealsize-widget.js"
  async
  data-widget="news"
  data-variant="full"
></script>
  1. "See more" opens https://yourdomain.com/news?ds_symbol=AAPL in a new tab, so visitors keep the page they were on. If the symbol has no news, the minimal widget's "See more" opens your page without ds_symbol (all news) instead. With a {symbol} token in the URL it's hidden, since the token can't be left out.
  2. The full widget reads ds_symbol from your page's URL and opens scoped to AAPL. It takes priority over data-symbol, which still works as the default when ds_symbol is absent or not a valid symbol.
  3. When the user clears the symbol in the widget (the ✕ on the chip, or picking a category tab), the loader removes ds_symbol from your address bar with history.replaceState. The page doesn't reload and no history entry is added, so a refresh no longer brings the symbol back. If you set data-symbol, a refresh falls back to it.

If your page carries the symbol somewhere else, such as a path (/news/AAPL, via a {symbol} token in data-see-more-url), listen for the widget's message and update your URL yourself:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://www.dealsize.ai') return
  const data = event.data
  if (data?.type !== 'dealsize-widget' || data.action !== 'symbolChange') return
  // data.symbol is null when the user cleared it
})

To keep ds_symbol (or any symbol) out of your URLs, hide the widget's control with data-show-see-more="false" and add your own link next to the widget. You then decide where it goes and what it carries:

<script
  src="https://www.dealsize.ai/dealsize-widget.js"
  async
  data-widget="news"
  data-variant="minimal"
  data-symbol="AAPL"
  data-show-see-more="false"
></script>
<a href="/news">More news</a>

Your full widget on /news then shows all news, or whatever data-symbol your page sets.

Auto-height: pass data-height="auto" and the iframe grows and shrinks with its content. See the FAQ for the underlying postMessage protocol.

Always pass data-utm-source

Sign-ups from your embed are only reliably credited to you when you pass your domain explicitly. Why?