AieraChat Component

Embed Aiera's AI-powered chat assistant as a component in your application.

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="700" width="400" id="YOUR-IFRAME-ID"></iframe>

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

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

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

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

aieraChat.on('authenticated', () => {
  aieraChat.configure({
    options: {
      darkMode: 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. A userId is required for AieraChat to associate chat sessions with the correct user.

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.

isMobile

When set to true, the component will use a mobile-optimized layout with adjusted font sizes and padding for smaller screens.

aieraChatDisableSourceNav

When set to true, clicking a source or citation in a chat response will emit a chat-source or chat-citation event instead of navigating within the component. This is useful when you want to handle source navigation in your own application — for example, opening a transcript viewer or filing in a different panel.

aieraChatDisableWebSearch

When set to true, the web search toggle button will be hidden from the chat input area. By default, users can toggle web search on or off to include external sources in AI responses.

aieraChatCollectInternalFeedback

When set to true, a feedback button will appear on each AI response, allowing users to provide feedback on response quality.

Event Listeners

This component emits events depending on user behavior. You can use these events for engagement tracking, or for navigating to sources within your own application when a user clicks a citation.

When aieraChatDisableSourceNav is set to true, the component will emit events instead of handling source navigation internally. This lets you control where and how sources are displayed in your application.

aieraChat.on('chat-source', (source) => {
  console.log('source clicked: ', source)
  // source contains targetId and targetType
  // Use these to navigate to the relevant event, filing, or research document
})
aieraChat.on('chat-citation', (citation) => {
  console.log('citation clicked: ', citation)
  // Emitted when a user clicks an inline citation marker in a response
})

Everything Together

<script src="https://public.aiera.com/aiera-sdk/0.0.51/embed.js"></script>
<iframe height="700" width="400" id="YOUR-IFRAME-ID"></iframe>
<script>
  const aieraChat = new Aiera.Module(
    'https://public.aiera.com/aiera-sdk/0.0.51/modules/AieraChat/index.html',
    'YOUR-IFRAME-ID'
  )
  aieraChat.load().then(() => {
    aieraChat.authenticateApiKey('myPublicApiKeyHash')
  })
  aieraChat.on('authenticated', () => {
    aieraChat.configure({
      options: {
        darkMode: true,
        aieraChatDisableSourceNav: true,
      },
      overrides: {
        style: `
            .text-blue-600 {
                color: #008094 !important;
            }
        `,
      },
      tracking: {
        userId: 'abc123',
      },
    })
  })
  aieraChat.on('chat-source', (source) => {
    console.log('source clicked: ', source)
  })
  aieraChat.on('chat-citation', (citation) => {
    console.log('citation clicked: ', citation)
  })
</script>