📖 Documentation

Using Vanilla Javascript

Registering the Interpretation Player

<!-- stylesheet -->
<link rel="stylesheet" href="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.62/interpretation-player.min.css" />

<!-- Component -->
<div 
  id="akkadu-interpretation-player" 
  data-sdk-key="your_sdk_key" 
  data-position-menu="bottom" 
  data-is-box-shadow="true"
  data-is-player-controlled="true">
</div> 
<script>
  const component = document.querySelector('#akkadu-interpretation-player')
  component.addEventListener('onReady', function (e) { 
    console.info('received onReady event:', e.detail.isReady);
  });
  component.addEventListener('onLanguageSelected', function (e) { 
    console.info('received onLanguageSelected event:', e.detail.languageSelected);
  });
  component.addEventListener('onConnectionStatusUpdated', function (e) { 
    console.info('received onConnectionStatusUpdated event:', e.detail.connection);
  });
</script>

<!-- 🚨 Script must be loaded after the component -->
<script src="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.62/interpretation-player.min.js" ></script>

  • You will also have to add a roomname query parameter on your audience pages. More

  • Make sure the script is loaded after the component.

More
  • You can either put the script at the end of your page before the body tag

Or you can add a the listener load and add the script once the page is fully loaded :

<script>
  window.addEventListener("load", function () {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.62/interpretation-player.min.js";
    document.head.appendChild(s);
  })
</script>
  • You can also use our examples repository here.

Get the latest versions of the script here

Video Example

🚀 Quick Implementation

  • We made a simple version of our interpretation-player that doesn't require you to listen to our events.
  • In this version we will control your video-player for you.
<!-- stylesheet -->
<link rel="stylesheet" href="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.62/interpretation-player.min.css" />

<!-- Component -->
<div 
  id="akkadu-interpretation-player" 
  data-sdk-key="your_sdk_key" 
  data-is-player-controlled="true"
  data-room-name="your_room_name">
</div> 

<!-- 🚨 Script must be loaded after the component -->
<script src="https://akkadu-assets.s3.amazonaws.com/akkadu-rsi-widget/rsi-vanilla/1.0.62/interpretation-player.min.js" ></script>
  • You will simply need to add as parameter:
    • Your data-sdk-key
    • Your data-room-name
    • data-is-player-controlled to true