---
title: Getting Started
url: https://docs.kaltura.com/docs/embeddable-kaltura-products/media-manager/getting-started
---


## 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.

```html
<!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:

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

```js
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](/docs/embeddable-kaltura-products/media-manager/row-actions) — Add select, delete, and custom buttons
- [Uploads](/docs/embeddable-kaltura-products/media-manager/uploads) — Enable file uploads and understand the lifecycle
- [Header](/docs/embeddable-kaltura-products/media-manager/header) — Filters, upload button, status indicator, breadcrumbs
- [Data & Credentials](/docs/embeddable-kaltura-products/media-manager/data) — Interceptors, media type filters, page size, credential rotation
