Event List Component

Our most flexible component, start with our entire universe of events, and customize it to meet your needs.

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 eventList = new Aiera.Module(
    'https://public.aiera.com/aiera-sdk/0.0.51/modules/EventList/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.

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

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

eventList.on('authenticated', () => {
  eventList.configure({
    hideSettings: true,
    options: {
      ticker: 'aapl',
      darkMode: true,
      showCompanyFilter: false,
      eventListView: 'combined',
      eventListFilters: [
        { name: 'transcripts', visible: true, defaultValue: true },
        { name: 'earningsOnly', visible: false, defaultValue: true },
      ],
      showSentiment: true,
    },
    overrides: {
      style: `
            .text-blue-600 {
                color: #008094 !important;
            }
        `,
    },
    tracking: {
      userId: 'abc123',
    },
  })
})

Configuration

hideSettings

The hideSettings flag should almost always be true. It is a user-specific setting, and is associated with your API key. Meaning, if one user changes the settings, it will impact all users. It was created for component integration with a deeper user-level authentication. Please reach out to us if you would like more information on this type of integration (i.e. SSO users).

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 meet your needs, functionally.

ticker

The ticker should only 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.

showCompanyFilter

This flag controls the visibility of a button in the top right of the component, which allows a user to search for and select, then filter by a single company.

eventListView

This enum controls how the list of events are displayed. The default display 'tabs', will have "Live & Upcoming" events in one tab, and "Recent" events in another tab. When setting a watchlist (documentation below), there may not be many events in "Live & Upcoming" which makes the UX feel empty - in that case we recommend setting eventListView to 'combined' - which will stack the live and upcoming events above the recent events.

accepted enum values

• tabs
• combined

eventListFilters

By default, there are two event list filters visible - the ability to filter by events with a transcript, and events where the event type is "earnings". You can use the eventListFilter option to set the default value, and whether or not the filter control is visible to the user.

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.

setWatchlist

Pass along a user's watchlist, to filter the events to those whose equities match the passed in tickers.

eventList.on('configured', () => {
  eventList.setWatchlist([
    { BBG: 'AAPL:US' },
    { ISIN: 'US0378331005' },
    { PERMID: '4295905573' },
    { RIC: 'AAPL.OQ' },
    { ticker: 'AAPL' },
    { ticker: 'AAAPL' }, // invalid tickers will be ignored
  ])
})

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
• PermIDs
• 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).

Event Listeners

This component emits events depending on user behavior. You can use these events for engagement tracking, or even for updating parts of your interface depending on how the user engages with the component.

eventList.on('instrument-selected', (ticker) => {
  console.log('selected ticker: ', ticker)
})
eventList.on('event-selected', (event) => {
  console.log('selected event: ', event)
})
eventList.on('event-audio', (event) => {
  console.log(`${event.action} audio:`, event)
})

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 eventList = new Aiera.Module(
    'https://public.aiera.com/aiera-sdk/0.0.51/modules/EventList/index.html',
    'YOUR-IFRAME-ID'
  )
  eventList.load().then(() => {
    eventList.authenticateApiKey('myPublicApiKeyHash')
  })
  eventList.on('authenticated', () => {
    eventList.configure({
      hideSettings: true,
      options: {
        ticker: 'aapl',
        darkMode: true,
        showCompanyFilter: false,
        eventListView: 'combined',
        eventListFilters: [
          { name: 'transcripts', visible: true, defaultValue: true },
          { name: 'earningsOnly', visible: false, defaultValue: true },
        ],
        showSentiment: true,
      },
      overrides: {
        style: `
            .text-blue-600 {
                color: #008094 !important;
            }
        `,
      },
      tracking: {
        userId: 'abc123',
      },
    })
  })
  eventList.on('configured', () => {
    eventList.setWatchlist([
      { BBG: 'AAPL:US' },
      { ISIN: 'US0378331005' },
      { PERMID: '4295905573' },
      { RIC: 'AAPL.OQ' },
      { ticker: 'AAPL' },
      { ticker: 'AAAPL' }, // invalid tickers will be ignored
    ])
  })
  eventList.on('instrument-selected', (ticker) => {
    console.log('selected ticker: ', ticker)
  })
  eventList.on('event-selected', (event) => {
    console.log('selected event: ', event)
  })
</script>