Skip to main content

​
First Steps

​
Installation

The first step is to create an account and generate some content. Next, choose your installation method:

​
How the embed script works

The script tag downloads the code for BeyondWords player and instantiates a new player instance. The async and defer attributes mean that the browser won’t stall while it downloads the script code. The onload attribute initializes a JavaScript class called BeyondWords.Player. By setting target: this, the player will be added immediately after the script tag in the <body>. That means it will appear at the position where you copy the script tag into your page.

​
How to configure it

The preferred way to configure the player is by logging into the BeyondWords dashboard, going to the Player tab, and changing its settings. However, you can also override properties at the script level, for example: 
<script async defer
  src='https://proxy.beyondwords.io/npm/@beyondwords/player@latest/dist/umd.js'
  onload='new BeyondWords.Player({
    target: this,
    projectId: <ID>,
    contentId: "<ID>",
    playerStyle: "large",
    callToAction: "Listen to this recipe",
    backgroundColor: "yellow",
  })'>
</script>
These settings will take precedence over those specified in the dashboard and allow more flexibility. These settings can also be changed after loading the player by using the Player SDK. Please refer to Player Settings for an explanation of all the settings that can be configured.

​
How NPM installation works

The initialization is almost identical to how the embed script works except we set target: #beyondwords-player. This instructs the player to initialize inside the DOM node with id='beyondwords-player'. Note that the DOM node must be on the page when the initializer is called or the player won’t load.

​
How to configure it

The preferred way to configure the player is by logging into the BeyondWords dashboard and changing its settings. However, you can also override properties in the initializer, for example: 
new BeyondWords.Player({
  target: '#beyondwords-player',
  projectID: <ID>,
  contentId: '<ID>',
  playerStyle: 'large',
  callToAction: 'Listen to this recipe',
  backgroundColor: 'yellow',
});
These settings will take precedence over those specified in the dashboard and allow more flexibility. These settings can also be changed after loading the player by using the Player SDK. Please refer to Player Settings for an explanation of all the settings that can be configured.

​
JavaScript Github repository

JavaScript SDK Documentation

View the JavaScript SDK documentation in our GitHub repository