Setup

1. Load Aiera's client library into your HTML page using "<script />" tag

   <script src="[<https://dashboard.aiera.com/static/integration/aiera.0b07707e.js>](<https://dashboard.aiera.com/static/integration/aiera.0b07707e.js>)"></script>
   

2. Call into the library passing the following arguments:

   var aiera = Aiera.loadEventFrame({
     apiKey: ‘123456abcdef’,
     eventId: 1234567, // the Aiera event id
     userId: 1234567, // id to uniquely identify a user in YOUR system
     domId: "aiera-event" // optional: id of dom element to which the iframe will be added, defaults to “aiera-event"
   });
   

   Parameters

   Preferences

   Examples

   Beta: Enabling beta mode

   var aiera = Aiera.loadEventFrame({
     environment: Aiera.Environments.beta,
     apiKey: "123456abcdef",
     eventId: 1234567, // the Aiera event id
     userId: 1234567, // id to uniquely identify a user in YOUR system
     domId: "aiera-event" // optional: id of dom element to which the iframe will be added, defaults to “aiera-event"
   });
   

   Preferences: Show markup menu

   var aiera = Aiera.loadEventFrame({
     apiKey: "123456abcdef",
     eventId: 1234567, // the Aiera event id
     userId: 1234567, // id to uniquely identify a user in YOUR system
     domId: "aiera-event" // optional: id of dom element to which the iframe will be added, defaults to “aiera-event"
   });
   // Turn on the markup menu
   aiera.addPreference('eventMarkupMenu', true);
   

   Styles: Override to use Google Lato font

   styles: {
       event: {
           links: ['<https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap>'],
           styles: [
               " \\
              @font-face { \\
                font-family: 'Lato'; \\
                font-style: normal; \\
                font-weight: 500; \\
                font-display: swap; \\
                src: local('Lato Bold'), local('Lato-Bold'), url(<https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2>) format('woff2'); \\
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; \\
              } \\
              @font-face { \\
                font-family: 'Lato'; \\
                font-style: normal; \\
                font-weight: 600; \\
                font-display: swap; \\
                src: local('Lato Bold'), local('Lato-Bold'), url(<https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2>) format('woff2'); \\
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; \\
              } \\
               \\
               body { font-family: 'Lato', sans-serif; } \\
           "
           ]
       }
   }
   

Events

There are a few events that we publish that you can listen to:

aiera.on(eventName, listener);

The eventNames we currently support:

• viewLoaded - Fired when the iframe finishes it's initial load

• eventLoaded - Fired when all the event data has fully loaded

• status - Fired with the initial status of the event when it's loaded and then anytime the event's status changes

  • this passes an object to the event listener with eventId and status fields

    {	
    	eventId: 1234567,	
    	status: "started"
    }
    

• mediaStatus - Fired when the user starts, stops or pauses the audio stream

  • stopped - nothing is playing
  • listening - a live call is current playing (webrtc)
  • playing - a past call is currently playing (mp3)
  • paused - a past call is currently paused (mp3)

• click - Fired when the user clicks on the ticker in the event header

  • this listener is passed an obejct with a ticker field

    {	
    	ticker: "AAPL"
    }