> ## Documentation Index
> Fetch the complete documentation index at: https://docs.komerza.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation & Einrichtung
> Installiere die Komerza Client-Bibliothek und initialisiere deinen Storefront
## Installation
Binde die Komerza Client-Bibliothek via CDN ein. Füge dieses Script-Tag in dein HTML ein:
```html theme={null}
```
Die Bibliothek ist nach dem Laden des Skripts global als `globalThis.komerza` verfügbar.
### CDN-Vorteile
* **Kein Build-Schritt erforderlich** - Funktioniert mit einfachem HTML/CSS/JS
* **Immer aktuell** - Neueste Version wird automatisch ausgeliefert
* **Schnelles Laden** - Global via CDN gecacht
* **Leichtgewichtig** - Minimaler Einfluss auf die Seitenladezeit
## Initialisierung
Initialisiere die Bibliothek mit deiner Shop-ID, bevor du andere Funktionen verwendest:
```javascript theme={null}
komerza.init("deine-shop-id");
```
Du **musst** `init()` aufrufen, bevor du andere `komerza`-Funktionen
verwendest. Alle anderen Funktionen schlagen fehl, wenn die Bibliothek nicht
initialisiert wurde.
### Deine Shop-ID finden
Deine Shop-ID findest du in deinem Komerza-Dashboard. Es ist ein eindeutiger Bezeichner für deinen Shop, typischerweise im UUID-Format.
### Beispiel
```html theme={null}
Mein Shop
```
## Wann initialisieren
Rufe `init()` einmal beim Laden deiner Seite auf, bevor du andere `komerza`-Methoden verwendest:
**✅ Gut - Beim Seitenaufruf initialisieren:**
```javascript theme={null}
```
**❌ Schlecht - Methoden vor init verwenden:**
```javascript theme={null}
```
## Framework-Integration
### Vanilla JavaScript
```html theme={null}
```
### React
```jsx theme={null}
import { useEffect } from "react";
function App() {
useEffect(() => {
// Beim Mounten der Komponente initialisieren
if (globalThis.komerza) {
globalThis.komerza.init("deine-shop-id");
}
}, []);
return Mein Shop
;
}
```
### Vue
```vue theme={null}
```
### Svelte
```svelte theme={null}
```