Aieracast Component

Replicate Aiera's Aieracast experience in Component form.

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="100%" 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 aieracast = new Aiera.Module(
    'https://public.aiera.com/aiera-sdk/0.0.51/modules/Aieracast/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.

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

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

aieracast.on('authenticated', () => {
  aieracast.configure({
    hideSettings: true,
    options: {
      darkMode: true,
      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.

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.

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.

aieracast.on('configured', () => {
  aieracast.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).

Everything Together

<script src="https://public.aiera.com/aiera-sdk/0.0.51/embed.js"></script>
<iframe height="575" width="100%" id="YOUR-IFRAME-ID"></iframe>
<script>
  const aieracast = new Aiera.Module(
    'https://public.aiera.com/aiera-sdk/0.0.51/modules/Aieracast/index.html',
    'YOUR-IFRAME-ID'
  )
  aieracast.load().then(() => {
    aieracast.authenticateApiKey('myPublicApiKeyHash')
  })
  aieracast.on('authenticated', () => {
    aieracast.configure({
      hideSettings: true,
      options: {
        darkMode: true,
        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',
      },
    })
  })
  aieracast.on('configured', () => {
    aieracast.setWatchlist([
      { BBG: 'AAPL:US' },
      { ISIN: 'US0378331005' },
      { PERMID: '4295905573' },
      { RIC: 'AAPL.OQ' },
      { ticker: 'AAPL' },
      { ticker: 'AAAPL' }, // invalid tickers will be ignored
    ])
  })
</script>