Skip to main content

News

The News widget shows a stream of the latest financial news. Each record contains the title, source, and time of publication. The body of the news message can be opened separately. Users can customize the stream by adjusting the widget’s settings to display news for requested symbols, tags, and filter conditions.

Features​

  • Filterable news feed by ticker symbol.
  • Full news article is available.
  • Integrated Symbol Search.

Showcases​

Basic view​

By default, widget shows news for all symbols.

Widget's basic view

Filtered symbol​

The news feed can be filtered for a specific symbol.

Widget without predefined symbol

Full article view​

Full articles are available for all news items.

Widget with open article

Dark mode​

By default, widgets support dark and light themes, though it's also possible to create a custom theme.

Widget in dark theme

Setup​

Installation​

The widget is distributed both via a CDN and as an NPM package.

npm i @dx-display/widgets-news

CDN Link: https://path-to-cdn/widgets/news.js

tip

Refer to this guide for instructions on utilizing our CDN bundle.

Configure DataProviders​

The News widget requires you to have access the following dxFeed Data Providers:

const dataProviders = {
  ipfPath: '/your-path/ipf',
  ipfAuthHeader: 'your-header',
  newsPath: 'api/news',
  newsAuthHeader: 'your-header',
  schedulePath: '/api/schedule',
}
Getting access

If you don't have access to these data providers, please contact dxFeed team.

Code example​

Below, you'll find a code example demonstrating widget integration, utilizing only the essential parameters. Refer to the widget API section for comprehensive details on all available options.

Show code!
import { newNewsWidget } from '@dx-display/widgets-news'

const dataProviders = {
  ipfPath: '/your-path/ipf',
  ipfAuthHeader: 'your-header',
  newsPath: 'api/news',
  newsAuthHeader: 'your-header',
  schedulePath: '/api/schedule',
}
// make sure that next element exist in your DOM
const container = document.getElementById('widget')
container.style.height = '600px'
container.style.width = '800px'

const widget = newNewsWidget({
  element: container,
  providers: dataProviders,
})

Configurator​

API​

Please refer to the links below for a comprehensive list of all parameters available for the described widget.