Custom Event By Id Component

Your transcript and audio

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/ASRTranscript/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.

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

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

asrTranscript.on('authenticated', () => {
  asrTranscript.configure({
    options: {
      eventId: '123456',
      darkMode: true,
      relativeTimestamps: true,
      transcriptRelativeBeginSeconds: 0,
      transcriptRelativeEndSeconds: 300,
      showTitleInfo: true,
      showRecordingDetails: true,
      showPriceReaction: true,
      showSearch: true,
      showAudioPlayer: true,
      showSentiment: true,
    },
    overrides: {
      style: `
            .text-blue-600 {
                color: #008094 !important;
            }
        `,
    },
    tracking: {
      userId: 'abc123',
    },
  })
})

Configuration

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.

eventId

Pass in the event ID you received when creating your event. You must provide this.

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.

transcriptRelativeBeginSeconds, transcriptRelativeEndSeconds

When these flags are set, the transcript will only show items transcribed within those bounds. For example, if you set transcriptRelativeBeginSeconds to 300 (5 minutes), the component will render the transcript starting at 5 minutes. The starting time of the transcript will be shown as 00:00 in the component. If you also set transcriptRelativeEndSeconds, say to 600 (10 minutes), the component will render the transcript starting at the 5-minute mark and ending at 10 minutes. The starting and ending times for the transcript, however, will be shown as 00:00 and 05:00 respectively. You can use one or both fields to control the transcript start and end times shown in the component.

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.

Event Listeners

If you have your own audio player, you can use our seek-audio-seconds event - when the user clicks the transcript - to seek your audio player to that point in time.

asrTranscript.on('seek-audio-seconds', (time) => {
  console.log(time)
})

Methods

You can also sync the scroll position of the transcript to your audio on seek, by passing in the seconds using the seekTranscriptSeconds method.

const vid = document.getElementById('video')
if (vid) {
  vid.addEventListener('timeupdate', () => {
    asrTranscript.seekTranscriptSeconds(parseFloat(vid.currentTime))
  })
}

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/ASRTranscript/index.html',
    'YOUR-IFRAME-ID'
  )
  asrTranscript.load().then(() => {
    asrTranscript.authenticateApiKey('myPublicApiKeyHash')
  })
  asrTranscript.on('authenticated', () => {
    asrTranscript.configure({
      options: {
        eventId: '123456',
        darkMode: true,
        relativeTimestamps: true,
        transcriptRelativeBeginSeconds: 0,
        transcriptRelativeEndSeconds: 300,
        showTitleInfo: true,
        showRecordingDetails: true,
        showPriceReaction: true,
        showSearch: true,
        showAudioPlayer: true,
        showSentiment: true,
      },
      tracking: {
        userId: 'abc123',
      },
    })
  })
  asrTranscript.on('seek-audio-seconds', (time) => {
    console.log(time)
  })
  const vid = document.getElementById('video')
  if (vid) {
    vid.addEventListener('timeupdate', () => {
      asrTranscript.seekTranscriptSeconds(parseFloat(vid.currentTime))
    })
  }
</script>