UI Components

Last Event By Ticker Component

The latest event for a single equity

Installation

First, you'll need to stick this embed script tag in the top of your page:

<script src="https://public.aiera.com/aiera-sdk/0.0.51/embed.js"></script>

Next, place your iframe wherever you would like the component to render:

<iframe height="575" width="375" id="YOUR-IFRAME-ID"></iframe>

Make sure to replace YOUR-IFRAME-ID with an ID (unique to the page), that represents the event transcript.

Next, in the body of your page, we'll place a script tag and load the component you're using.

The first argument is the URL to the component, and the second argument is the ID you put on your iFrame (YOUR-IFRAME-ID), which indicates to the script, where to render the component.

<script>
  const latestEvent = new Aiera.Module(
    'https://public.aiera.com/aiera-sdk/0.0.51/modules/EventByTicker/index.html',
    'YOUR-IFRAME-ID'
  )
</script>

Authentication

In that same script tag, authenticate the component against your API key, after the module has loaded: Only use your PUBLIC API KEY, on your white-listed domains.

latestEvent.load().then(() => {
  latestEvent.authenticateApiKey('myPublicApiKeyHash')
})

After authentication is successful, let's pass in our configuration options:

latestEvent.on('authenticated', () => {
  latestEvent.configure({
    options: {
      ticker: 'aapl',
      darkMode: true,
      showTitleInfo: true,
      showRecordingDetails: true,
      showPriceReaction: true,
      showSearch: true,
      showAudioPlayer: true,
      showSentiment: true,
    },
    overrides: {
      style: `
            .text-blue-600 {
                color: #008094 !important;
            }
        `,
    },
    tracking: {
      userId: 'abc123',
    },
  })
})

Configuration

Top LevelData TypeDefaultRequired
overridesobjectnullno
trackingobjectnullno
optionsnullnullno

overrides

The overrides object is how you can take full control over the styles of the component. You can pass in a CSS style sheet that will be applied to all component UI. You can override any of our named classes, as well as the tailwind css classes we use.

tracking

Aiera often requires some level of user tracking for reporting and billing purposes. In the configuration tracking object, you can pass along an anonimized userId, so Aiera can track the number of unique users engaging with the component.

options

The options object is the best way to manipulate the component to really meet your needs, functionally.

OptionsData TypeDefaultRequired
tickerstringnullyes
darkModebooleanfalseno
relativeTimestampsbooleanfalseno
showTitleInfobooleantrueno
showRecordingDetailsbooleantrueno
showPriceReactionbooleantrueno
showSearchbooleantrueno
showAudioPlayerbooleantrueno
showSentimentbooleantrueno

ticker

The ticker should be used when you would like to filter all events to a single equity. This is especially useful if your platform has specific company profile pages, and you want to include all of the events for that company. showCompanyFilter should also be set to false when setting the ticker.

darkMode

Out of the box, our components support a dark mode and light mode. Set this to true, to use dark mode for the component.

relativeTimestamps

When this flag is set to true, the transcript timestamps will be displayed using times relative to the elapsed time from the beginning of audio, instead of showing them when the audio occurred.

For example, 00:01 for 1 minute, 00:30 for 30 minutes, 01:03 for 1 hour, 3 minutes, etc.

showTitleInfo

You can disable the event title if you already have the event title elsewhere on your page.

showRecordingDetails

You can disable the event connection details.

showPriceReaction

You can hide the price chart (when available).

showSearch

You can hide the search box at the top.

showAudioPlayer

You can disable playing audio.

showSentiment

By default, if text is identified as positive or negative using our machine learning models, the text will be green or red respectively. Set showSentiment to false, if you would like to disable this feature.

Supported Tickers

  • Bloomberg tickers with an exchange-specific code (separated either by a space or a colon)
  • Bloomberg tickers with a country-level composite code (separated either by a space or a colon)
  • Local exchange tickers with an exchange MIC (separated either by a space or a colon)
  • Reuters/Refinitiv RICs
  • ISINs
  • CUSIPs (US only)
  • US-based equities that have an international entity will roll up into the same company. Using a company like Canon, for example, we would have events/transcripts tagged with the tickers "7751" (TOKYO) and "CAJ" (NYSE).

Everything Together

<script src="https://public.aiera.com/aiera-sdk/0.0.51/embed.js"></script>
<iframe height="575" width="375" id="YOUR-IFRAME-ID"></iframe>
<script>
  const latestEvent = new Aiera.Module(
    'https://public.aiera.com/aiera-sdk/0.0.51/modules/EventByTicker/index.html',
    'YOUR-IFRAME-ID'
  )
  latestEvent.load().then(() => {
    latestEvent.authenticateApiKey('myPublicApiKeyHash')
  })
  latestEvent.on('authenticated', () => {
    latestEvent.configure({
      options: {
        ticker: 'aapl',
        darkMode: true,
        showTitleInfo: true,
        showRecordingDetails: true,
        showPriceReaction: true,
        showSearch: true,
        showAudioPlayer: true,
        showSentiment: true,
      },
      overrides: {
        style: `
            .text-blue-600 {
                color: #008094 !important;
            }
        `,
      },
      tracking: {
        userId: 'abc123',
      },
    })
  })
</script>
Previous
Event List By Ticker