--- title: "Storyblok-Integrationsleitfaden" url: "https://helpdesk.kontainer.com/de/article/storyblok-integrationsleitfaden/" type: "article" category: ["Admin-Einstellungen", "Integrationen & Plugins"] tags: ["Add-on Funktion", "DAM", "Add-on Funktion", "Premium+ Pakete"] language: "de" published: "2026-09-24T05:36:35+00:00" updated: "2026-09-24T05:36:35+00:00" summary: "Mit der Storyblok-Integration von Kontainer können Ihre Redakteure Bilder, Videos und Dateien direkt aus Ihrem DAM in den Visual Editor von Storyblok einfügen – ohne manuelles Herunter- und Hochladen." --- # Storyblok-Integrationsleitfaden Mit der Storyblok-Integration von Kontainer können Ihre Redakteure Bilder, Videos und Dateien direkt aus Ihrem DAM auswählen, ohne Dateien zu Storyblok hochzuladen. Storyblok speichert lediglich eine Referenz zur Datei; die eigentliche Datei bleibt in Kontainer und wird über das CDN ausgeliefert. Weitere Informationen zu Anwendungsfällen, Vorteilen usw. finden Sie auf der [Kontainer-Integrationsseite.](https://kontainer.com/de/integrations) ## Voraussetzungen - Ein Storyblok-Space sowie **Administratorrechte** dafür – ohne diese lässt sich die Extension nicht installieren - Ein Kontainer-Konto (https://ihrunternehmen.kontainer.com) - Die aktivierte Storyblok-Integration in Ihrem Kontainer-Konto – klären Sie mit Ihrem Account Manager, ob sie in Ihrem Tarif enthalten ist ## Was wird wo gespeichert Ihre Dateien bleiben in Kontainer. Es wird nichts in die Asset-Bibliothek von Storyblok hochgeladen. Storyblok speichert einen gewöhnlichen Asset-Wert, der auf das Kontainer-CDN verweist, zusammen mit der Kontainer-Referenz: - `filename` – die CDN-URL, einschließlich der von Ihnen gewählten Download-Vorlage - `alt, title` – übernommen aus der Beschreibung der Datei in Kontainer - `focus` – der in Kontainer gesetzte Fokuspunkt, im Format von Storyblok - `meta_data.kontainer_file_id, kontainer_folder_id, kontainer_url` – Kennungen zum Abrufen der Datei - `meta_data.kontainer_thumbnail_url, kontainer_extension, kontainer_type` Da der Alt-Text und der Fokuspunkt mit der Referenz übertragen werden, müssen Redakteure Metadaten nicht erneut in Storyblok eingeben. Wird eine Datei in Kontainer ersetzt, aktualisiert sie sich überall dort, wo sie verwendet wird. ## Erste Schritte ### 1. Integration in Kontainer aktivieren Bitten Sie Ihren Account Manager, die Storyblok-Integration für Ihr Kontainer-Konto zu aktivieren. Dadurch darf Storyblok den Kontainer File Picker einbetten; ohne diesen Schritt öffnet sich der Picker nicht. ### 2. Extension in Storyblok installieren Öffnen Sie den Installationslink, wählen Sie den gewünschten Space aus und bestätigen Sie: ``` https://app.storyblok.com/#/install/kontainer@asset-picker ``` Dafür benötigen Sie Administratorrechte für den Ziel-Space. Die Installation erfolgt einmal pro Space. ### 3. Kontainer-Feld zu einem Block hinzufügen Gehen Sie in Ihrem Space zur **Block Library**, öffnen Sie den Block, in dem Sie den Picker verwenden möchten, und fügen Sie ein neues Feld hinzu. Setzen Sie dessen Typ auf **Plugin** und wählen Sie `kontainer` aus der Liste. ### 4. Feld auf Ihr Kontainer ausrichten Fügen Sie dem ausgewählten Feld die Option `kontainerHost` hinzu und tragen Sie Ihre Kontainer-Domain ein, zum Beispiel `ihrunternehmen.kontainer.com` (mit oder ohne `https://`). Storyblok speichert Plugin-Optionen pro Feld – wiederholen Sie diesen Schritt daher für jedes Feld, das den Picker verwendet. Optionswerte werden von Storyblok nicht zwischen Spaces übernommen, jeder Space wird also separat konfiguriert. ### 5. Assets auswählen Öffnen Sie eine Story, die den Block verwendet, und klicken Sie im Feld auf **Select from Kontainer**. Melden Sie sich beim ersten Mal mit Ihrem gewohnten Kontainer-Benutzernamen und Passwort an. Durchsuchen und filtern Sie Ihre Bibliothek wie gewohnt, wenden Sie optional eine Download-Vorlage an (Zuschnitt, Größenänderung, Format) und wählen Sie die Datei aus. Das Feld zeigt anschließend eine Vorschau und den Dateinamen. Mit **Replace asset** wählen Sie eine andere Datei, mit **Remove asset** leeren Sie das Feld. Für Dateien, die keine Bilder sind – etwa PDFs und Videos – wird anstelle einer Bildvorschau eine Dateikarte mit dem Dateityp angezeigt. ## Feldoptionen | Option | Erforderlich | Wert | | --- | --- | --- | | `kontainerHost` | Ja | Ihre Kontainer-Domain, z. B. `ihrunternehmen.kontainer.com` | | `mode` | Nein | `external` (Standard) verlinkt die Datei in Kontainer. `import` kopiert sie in die Asset-Bibliothek von Storyblok. | | `storyblokRegion` | Nur bei Import | `eu` (Standard), `us`, `ca`, `ap` oder `cn` | | `storyblokManagementToken` | Nur bei Import | Ein persönlicher Storyblok-Zugriffstoken mit Schreibrechten für Assets | | `maxImportMb` | Nein | Maximale Dateigröße für den Import, Standard `50` | ## Optional: Dateien nach Storyblok importieren Manche Teams verlangen, dass sämtliche Assets von Storyblok selbst gehostet werden. Wenn Sie `mode` auf `import` setzen, wird die Datei in die Asset-Bibliothek des Space kopiert statt verlinkt. Sie ist dann ein gewöhnliches Storyblok-Asset und kann vom Image Service von Storyblok transformiert werden. Zwei Punkte sollten Sie beachten, bevor Sie ein Feld auf den Import-Modus umstellen: - Die Kopie wird nicht mehr aktualisiert, wenn sich die Datei in Kontainer ändert. - Der Management-Token ist eine Feldoption und wird damit an den Browser jedes Redakteurs ausgeliefert, der dieses Feld verwendet. Erstellen Sie dafür ein **eingeschränktes** Token: Vergeben Sie in Storyblok ausschließlich den Scope „Assets“ und beschränken Sie das Token auf den einen Space, der es benötigt. Verwenden Sie kein Token, das Zugriff auf Ihr gesamtes Konto hat. ## Das Asset in Ihrem Frontend verwenden Das Feld gibt ein gewöhnliches Storyblok-Asset-Objekt zurück und verhält sich damit wie jedes andere Asset-Feld: ``` const { filename, alt, focus } = story.content.hero; ``` Rufen Sie die Datei über `filename` ab – sie wird von Kontainers CDN ausgeliefert. Der Image Service von Storyblok kann externe URLs weder skalieren noch zuschneiden. Verwenden Sie daher die Transformationsparameter von Kontainer oder eine bei der Auswahl gewählte Download-Vorlage, um Größe und Format der ausgelieferten Datei zu steuern. Der Fokuspunkt steht sowohl als `focus`-Wert von Storyblok als auch als Pixelkoordinaten in `meta_data` zur Verfügung. ## Support Wenn Sie Hilfe bei der Einrichtung oder Konfiguration des Storyblok-Plugins benötigen, hilft Ihnen unser Support-Team gerne weiter. Bitte kontaktieren Sie uns unter: [support@kontainer.com](mailto:support@kontainer.com) ## Other languages - [English](https://helpdesk.kontainer.com/article/storyblok-integration-guide/index.md) ## Related articles - [Semantische Suche im DAM](https://helpdesk.kontainer.com/de/article/semantische-suche-im-dam/index.md): Einrichtung der semantischen Suche für DAM in Kontainer – dem DAM Search Agent – damit Nutzer Assets beschreiben können, statt Stichwörter zu erraten. Enthält die Wahl des KI-Anbieters, die Checkliste… - [Strapi-Integrationsleitfaden](https://helpdesk.kontainer.com/de/article/strapi-integrationsleitfaden/index.md): Mit der Strapi-Integration von Kontainer können Sie Bilder, Videos und Dateien ganz einfach direkt aus Ihrem DAM in das Admin-Panel von Strapi einfügen – ohne manuelles Herunter- und Hochladen. - [Slack-Benachrichtigungen von Kontainer](https://helpdesk.kontainer.com/de/article/slack-benachrichtigungen-von-kontainer/index.md): Bringen Sie Kontainer-Benachrichtigungen direkt in Slack und bleiben Sie auf dem Laufenden, ohne mehrere Systeme überwachen zu müssen. - [Multi-Brand Guide](https://helpdesk.kontainer.com/de/article/multi-brand-guide/index.md): The Multi-Brand feature allows you to create and manage multiple branded experiences within a single Kontainer account. Each brand can have its own logo, colors, fonts, styling, and login experience,…