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 Level | Data Type | Default | Required |
---|---|---|---|
overrides | object | null | no |
tracking | object | null | no |
options | null | null | no |
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.
Options | Data Type | Default | Required |
---|---|---|---|
ticker | string | null | yes |
darkMode | boolean | false | no |
relativeTimestamps | boolean | false | no |
showTitleInfo | boolean | true | no |
showRecordingDetails | boolean | true | no |
showPriceReaction | boolean | true | no |
showSearch | boolean | true | no |
showAudioPlayer | boolean | true | no |
showSentiment | boolean | true | no |
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>