> ## Documentation Index
> Fetch the complete documentation index at: https://docs.beyondwords.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Get started with the BeyondWords player

## Overview

BeyondWords Player is the easiest way to add BeyondWords audios into your website or app.

It is a fully-featured audio player for content generated and hosted on BeyondWords. It is fully integrated with analytics and monetization features on BeyondWords without the need for any extra configuration.

<img src="https://mintcdn.com/beyondwords/6v-xuioZrdejSSCf/assets/images/new-images/distribution/player.png?fit=max&auto=format&n=6v-xuioZrdejSSCf&q=85&s=25a1e746ef6b522c36ad8c9563608258" alt="player" width="3006" height="1546" data-path="assets/images/new-images/distribution/player.png" />

<Info>
  Please note that the BeyondWords player is automatically installed if you are using any of the following integrations:

  * Magic Embed
  * WordPress
  * Ghost
</Info>

## Installation

Choose one of the following methods to install the BeyondWords player:

### Install via embed script

Add the script in your web app:

```javascript theme={null}
<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>'
    })">
</script>
```

<Info>
  You'll need to replace `<ID>` with your actual project ID and content ID. See the [Identifiers](#identifiers) section below for details on all available identifier options.
</Info>

<Tip>
  For production environments, consider specifying a fixed version instead of using `@latest` to ensure stability.
</Tip>

### Install via NPM

<Steps>
  <Step title="Add the player NPM package">
    ```javascript theme={null}
    npm add @beyondwords/player
    ```
  </Step>

  <Step title="Add a target div in your web app">
    ```javascript theme={null}
    <div id='beyondwords-player'></div>
    ```
  </Step>

  <Step title="Initialize the player">
    ```javascript theme={null}
    import BeyondWords from '@beyondwords/player';

    new BeyondWords.Player({ target: '#beyondwords-player', projectId: <ID>, contentId: '<ID>' });
    ```
  </Step>
</Steps>

<Info>
  You'll need to replace `<ID>` with your actual project ID and content ID. See the [Identifiers](#identifiers) section below for details on all available identifier options.
</Info>

## Identifiers

You will need to replace project `ID` and content `ID` with your `projectId` and `contentId`. You can use any of the following properties in conjunction with the `projectId` to initialize the player:

| **Property** | **Description**                                                                                                                                                                                   |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `contentId`  | Unique UUID string for the audio content.<br /> You can also pass the previous integer audio ID as a string for users migrating from the legacy API.                                              |
| `sourceId`   | The externally provided source identifier for a content item.<br />This could be the ID from your CMS, the `<guid>` from an RSS `<item>`, or the post ID if generated using the WordPress Plugin. |
| `sourceUrl`  | The URL containing the source content.<br /> This could be the public URL submitted via the API, the `<link>` from an RSS `<item>`, or the post URL from the WordPress Plugin.                    |
| `playlistId` | The unique ID for a playlist created in the dashboard or through the API.                                                                                                                         |

## Advanced customization

For developers looking to build custom interfaces or use the player in headless mode, additional documentation is available on GitHub. This includes guides on:

* Building your own UI on top of the BeyondWords player
* Using the player SDK programmatically
* Implementing custom analytics

For complete documentation on advanced customization options, visit the [BeyondWords Player GitHub repository](https://github.com/beyondwords-io/player?tab=readme-ov-file).

## Next steps

After installing the player, you'll likely want to customize its appearance and behavior to match your brand and user experience requirements.

<CardGroup>
  <Card title="Player settings" icon="sliders" href="/docs-and-guides/distribution/player/settings">
    Configure your player's appearance, branding, and interactive features
  </Card>

  <Card title="JavaScript SDK" icon="js" href="/docs-and-guides/distribution/player/sdk/javascript/getting-started">
    Integrate the player in web applications
  </Card>

  <Card title="iOS SDK" icon="apple" href="/docs-and-guides/distribution/player/sdk/ios/getting-started">
    Integrate the player in iOS applications
  </Card>

  <Card title="Android SDK" icon="android" href="/docs-and-guides/distribution/player/sdk/android/getting-started">
    Add the player to Android applications
  </Card>
</CardGroup>