# MediaMelon Web Kaltura Player Plugin Integration Document

[**Step 1:** Import Frameworks](#step-1-install-the-npm-package)

[**Step 2:** Register MediaMelon Plugin](#step-2-register-mediamelon-plugin)

[**Step 3:** Configure and Initialise MediaMelon SDK](#step-3-configure-and-initialise-mediamelon-sdk)

### Step 1: Install the NPM Package

**package link:** <https://www.npmjs.com/package/mm-kaltura-sdk>

```javascript
npm install mm-kaltura-sdk
```

### Step 2: Register MediaMelon Plugin

Register the MediaMelon Plugin in the start file

```typescript
import { registerPlugin } from '@playkit-js/kaltura-player-js';
import { pluginName, MediaMelonKPPlugin } from './mediamelon-plugin';

registerPlugin(pluginName, MediaMelonKPPlugin);
```

### Step 3: Configure and Initialise MediaMelon SDK

```javascript
const config = {
    logLevel: 'DEBUG',
    targetId: 'player-placeholder',
    provider: {},
    playback: {
      autoplay: true
    },
    ui: {
      translations: {
        en: {
          'plugin-example': {
            greeting: 'Welcome'
          }
        }
      }
    },
    plugins: {
      mediaMelonKPPlugin: {            
        customerId: 'CUSTOMER_ID',
        domainName: 'DOMAIN_NAME',
        subscriberTag: 'SUBSCRIBER_TAG',
        subscriberId: 'SUBSCRIBER_ID',
        subscriberType: 'SUBSCRIBER_TYPE',
        playerName: 'PLAYER_NAME',
        playerVersion: 'PLAYER_VERSION',
        playerBrand: 'PLAYER_BRAND',
        playerModel: 'PLAYER_MODEL',
        videoAssetInfo: {
          assetId: 'ASSET_ID',
          assetName: 'ASSET_NAME',
          videoId: 'VIDEO_ID',
          seriesTitle: 'SERIES_TITLE',
          episodeNumber: 'EPISODE_NUMBER',
          season: 'SEASON',
          contentType: 'CONTENT_TYPE',
          drmProtection: 'DRM_PROTECTION',
          genre: 'GENRE',
        },
        appName: 'APP_NAME',
        appVersion: 'APP_VERSION',
        deviceMarketingName: 'DEVICE_MARKETING_NAME',
        videoQuality: 'VIDEO_QUALITY',
        deviceId: 'DEVICE_ID',
        videoQuality: "VIDEO_QUALITY",
        customTags: {
          'KEY1' : "VALUE1",
          'KEY2' : "VALUE2"
        }
      }
    }
  };

  const player = KalturaPlayer.setup(config);
```

<table data-header-hidden><thead><tr><th width="296">Variable</th><th>Description</th></tr></thead><tbody><tr><td>Variable</td><td>Description</td></tr><tr><td>PLAYER_NAME</td><td>String containing the Player Name.</td></tr><tr><td>CUSTOMER_ID</td><td>String containing your MediaMelon-assigned Customer ID.</td></tr><tr><td>SUBSCRIBER_ID</td><td>String containing your Subscriber’s ID. If you do not use subscriber IDs, enter null</td></tr><tr><td>DOMAIN_NAME</td><td>String containing your section of your subscriber or assets.</td></tr><tr><td>SUBSCRIBER_TYPE</td><td>String containing the Subscriber Type (e.g. “Free”, “Paid”). If you do not use subscriber types, enter null</td></tr><tr><td>SUBSCRIBER_TAG</td><td>String containing an additional subscriber-specific information. This is sent in clear (not hashed) to SmartSight and it is advised to not send sensitive information in this field.</td></tr><tr><td>ASSET_ID</td><td>String containing Asset Id.</td></tr><tr><td>ASSET_NAME</td><td>String containing Asset Name.</td></tr><tr><td>VIDEO_ID</td><td>String containing your video’s ID. If you do not use videos IDs, enter null.</td></tr><tr><td>CONTENT_TYPE</td><td>String containing type of the Content. For example - "Movie", "Special", "Clip", "Scene Epis Lifts".</td></tr><tr><td>GENRE</td><td>String containing Genre of the content. For example - "Comedy", "Horror".</td></tr><tr><td>DRM_PROTECTION</td><td>Widevine, Fairplay, Playready etc. Unknown means content is protected, but protection type is unknown. For clear contents, do not set this field</td></tr><tr><td>EPISODE_NUMBER</td><td>String containing sequence number of the Episode.</td></tr><tr><td>SEASON</td><td>String containing the Season. For example - "Season1".</td></tr><tr><td>SERIES_TITLE</td><td>String containing Title of the Series.</td></tr><tr><td>CUSTOM_TAGS</td><td>Extra custom metadata can be added here if required.</td></tr><tr><td>PLAYER_BRAND</td><td>String containing Player Brand.</td></tr><tr><td>PLAYER_MODEL</td><td>String containing Player Model. For example - This could be a variant of player. Say name of third party player used by organisation. Or any human readable name of the player.</td></tr><tr><td>PLAYER_VERSION</td><td>String containing Player Version.</td></tr></tbody></table>