Getting Started - Media Manager

Getting Started

You need two things: a KS (Kaltura session string) and a partner ID (number). Replace them in the file below, open it in a browser, and click the button.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Media Manager</title>
</head>
<body>
  <button id="open" disabled style="padding: 12px 24px; font-size: 16px; border-radius: 6px; border: none; background: #006EFA; color: #fff; cursor: pointer; opacity: 0.7;">Loading…</button>
  <p id="status"></p>

  <script type="module">
    const ks = 'YOUR_KS_TOKEN';
    const partnerId = Number('YOUR_PARTNER_ID');

    const btn = document.getElementById('open');
    const status = document.getElementById('status');

    if (ks === 'YOUR_KS_TOKEN' || isNaN(partnerId)) {
      btn.textContent = 'See Instruction Below';
      status.textContent = 'Replace YOUR_KS_TOKEN and YOUR_PARTNER_ID with real values to get started.';
    } else {
      const { createWorkspace } = await import(
        'https://unisphere.nvp1.ovp.kaltura.com/v1/loader/index.esm.js'
      );

      const workspace = await createWorkspace({
        config: {
          appId: 'my-app',
          appVersion: '1.0.0',
          experiences: {
            'media-manager': {
              'kaltura-media-manager': {
                settings: { ks, partnerId },
              },
            },
          },
          ui: { theme: 'light', language: 'en' },
        },
        workspaceName: 'my-workspace',
      });

      const runtime = await workspace.getRuntimeAsync(
        'unisphere.widget.media-manager',
        'kaltura-media-manager'
      );

      if (!runtime) {
        status.textContent = 'Failed to load the Media Manager runtime.';
      } else {
        btn.disabled = false;
        btn.style.opacity = '1';
        btn.textContent = 'Open Media Manager';

        btn.addEventListener('click', () => {
          runtime.mountVisual({
            type: 'dialog',
            target: { target: 'body' },
            settings: { context: { type: 'myMedia' } },
          });
        });
      }
    }
  </script>
</body>
</html>

The resulting dialog opens with default filters, no upload button, and no row actions — a read-only media browser.

What just happened

1. The loader script downloads the Media Manager widget from the Kaltura CDN.
2. createWorkspace registers the runtime with your credentials.
3. getRuntimeAsync resolves once the widget is ready.
4. mountVisual opens the modal. It closes itself via its built-in X button.

Use an inline table instead

You can mount the widget directly into a container element rather than opening a modal. Replace the mountVisual call with:

<div id="media-table" style="width: 100%; height: 600px;"></div>

runtime.mountVisual({
  type: 'table',
  target: 'media-table',
  settings: { context: { type: 'myMedia' } },
});

The container must have explicit width and height. Tables are multi-instance — you can mount more than one.

To unmount later: runtime.unmountVisual(id) (where id is returned by mountVisual).

Next steps

• Row Actions — Add select, delete, and custom buttons
• Uploads — Enable file uploads and understand the lifecycle
• Header — Filters, upload button, status indicator, breadcrumbs
• Data & Credentials — Interceptors, media type filters, page size, credential rotation