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

# Integration & Setup Options

> Configure PN Player on your website or app with ease.

## Steps

<Steps>
  <Step title="Include PN Player resources in your website head tag">
    ```html theme={null}
    <script async src="https://cdn.pnplayer.com/index-B6OnkU.js" type="module"></script>
    <link href="https://cdn.pnplayer.com/index-DN2akQ.css" rel="stylesheet" />
    ```
  </Step>

  <Step title="Create an element">
    In html body create reference element for player to load

    ```html theme={null}
    <div id="pnplayer">
      <div id="pn-player"></div>
    </div>
    ```
  </Step>

  <Step title="Initialize player on the element">
    ```html theme={null}
    <script>
      const playerInstance = window.pnplayer("pn-player", {
                sources: [
                  { 
                    title: "Video title",
                    src: "Video HLS Url",
                    textTracks: [],
                  }
                ]
            });
    </script>
    ```

    This loads video player on the **pn-player** element.
  </Step>
</Steps>

### Setup Options

These are the options for configuring the layout and playback behavior of a player.

<ParamField path="sources" type="object[]" required>
  <Expandable title="properties">
    <ParamField path="title" type="string" required>
      Video title
    </ParamField>

    <ParamField path="src" type="string" required>
      Video HLS URL
    </ParamField>

    <ParamField path="textTracks" type="object[]">
      <Expandable title="properties">
        <ParamField path="src" type="string" required>
          URL of the track file (VTT/SRT)
        </ParamField>

        <ParamField path="kind" type="string" required>
          Track kind (e.g. subtitles, captions, chapters)
        </ParamField>

        <ParamField path="language" type="string" required>
          Language code (e.g. en-US)
        </ParamField>

        <ParamField path="type" type="string" default="vtt">
          Track file format (e.g. vtt, srt)
        </ParamField>

        <ParamField path="default" type="boolean" default="false">
          Whether this track is enabled by default
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="skipIntro" type="object">
      <Expandable title="properties">
        <ParamField path="start" type="number">
          Time (in seconds) when the Skip Intro button should start appearing during playback
        </ParamField>

        <ParamField path="end" type="number">
          Time (in seconds) where the player will seek to when the Skip Intro button is clicked
        </ParamField>

        <ParamField path="label" type="string">
          Text displayed on the Skip Intro button
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField path="customButtons" type="object[]">
      <Expandable title="properties">
        <ParamField path="label" type="string" required>
          Button text
        </ParamField>

        <ParamField path="link" type="string" required>
          Redirect URL for button
        </ParamField>

        <ParamField path="openInNewTab" type="boolean" default="false">
          Open URL in a new tab
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="layout" type="object">
  <Expandable title="properties">
    <ParamField path="captionStyles" type="object">
      <Expandable title="properties">
        <ParamField path="fonts" type="object[]">
          <Expandable title="properties">
            <ParamField path="label" type="string" required>
              Font display name
            </ParamField>

            <ParamField path="value" type="string" requried>
              Font family value
            </ParamField>

            <ParamField path="url" type="string">
              URL to the font file, e.g., [https://fonts.cdnfonts.com/s/107551/BRCobane-Regular-BF654d96a1718fa.woff](https://fonts.cdnfonts.com/s/107551/BRCobane-Regular-BF654d96a1718fa.woff)
            </ParamField>
          </Expandable>
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="playMode" type="string" default="playlist">
  Playback mode: "playlist" — auto-plays all videos in sources; "multiple" — sources are multiple language/audio versions of the same video
</ParamField>

<ParamField path="source" type="string">
  Source of the video being played (e.g. PN Platform, Desktop)
</ParamField>

<ParamField path="userId" type="string">
  Unique identifier of the user
</ParamField>

<ParamField path="key" type="string">
  Unique identifier for your integration ( you can find in dashboard)
</ParamField>