# Installation (https://docs.pixl.lennox.zip/sdk/installation)

> SDK per Script-Tag oder npm einbinden

Es gibt nichts zu installieren. Das SDK ist eine einzelne Datei auf dem pixl-Server, die du per Script-Tag lädst.

## Per Script-Tag [#per-script-tag]

```html
<script src="https://pixl.lennox.zip/sdk/pixl.js"></script>
```

Danach steht `Pixl` global zur Verfügung:

```js
const pixl = new Pixl({ key: 'pixl_DEIN_SCHLÜSSEL' });
```

Das SDK verbindet sich mit der pixl-Instanz, von der das Script kommt. Lädst du es von einer lokalen Instanz oder einem Tunnel, spricht es automatisch mit genau dieser. Kommt es von anderswo, etwa von jsDelivr, verbindet es sich mit pixl.lennox.zip. Du kannst die Adresse aber auch fest vorgeben:

```js
const pixl = new Pixl({
  key: 'pixl_DEIN_SCHLÜSSEL',
  baseUrl: 'https://pixl.lennox.zip',
});
```

## Optionen [#optionen]

| Option | Typ | Standard | Bedeutung |
|---|---|---|---|
| `key` | `string` | (Pflicht) | Dein [API-Schlüssel](/sdk/api-keys) |
| `baseUrl` | `string` | die pixl-Instanz, von der das Script kommt, sonst `https://pixl.lennox.zip` | Adresse der pixl-Instanz |
| `autoConnect` | `boolean` | `true` | Live-Verbindung sofort aufbauen. Bei `false` startest du sie selbst mit `pixl.connect()`. |
| `logs` | `boolean` | `true` | Meldet in der Browser-Konsole, wenn die Live-Verbindung abbricht und wieder steht. Bei `false` bleibt die Konsole still. |

## Mit fester Version [#mit-fester-version]

Unter `pixl.lennox.zip/sdk/pixl.js` kommt immer die Version, die pixl gerade ausliefert. Soll ein Widget bei einer bestimmten Version bleiben, lädst du das Script mit Versionsnummer von jsDelivr:

```html
<script src="https://cdn.jsdelivr.net/npm/@pixl-app/sdk@0.1.1/dist/pixl.js"></script>
```

Ab Version 0.1.1 verbindet es sich auch von dort mit pixl.lennox.zip, ohne `baseUrl`.

## Mit npm und Bundler [#mit-npm-und-bundler]

Für eigene Widgets mit Bundler und TypeScript gibt es das SDK auch als [npm-Paket](https://www.npmjs.com/package/@pixl-app/sdk):

```bash
npm i @pixl-app/sdk
```

```ts
import { Pixl } from '@pixl-app/sdk';
```

Die Typen sind dabei. Was sich in einer Version geändert hat, steht in der Datei `CHANGELOG.md` im Paket.

## Browser-Unterstützung [#browser-unterstützung]

Das SDK braucht `fetch` mit Streaming (`ReadableStream`). Das können alle aktuellen Browser, die Browserquellen in OBS und die Overlays von StreamElements. Auf `EventSource` verzichtet das SDK bewusst: So geht der Schlüssel als Header mit und steht nie in einer Adresse.