--- title: "Integratiegids voor Storyblok" url: "https://helpdesk.kontainer.com/nl/article/integratiegids-voor-storyblok/" type: "article" category: ["Beheerinstellingen", "Integraties & plug-ins"] tags: ["Add-onfunctie", "Premium+-abonnementen", "DAM"] language: "nl" published: "2026-10-07T10:44:20+00:00" updated: "2026-10-07T12:06:39+00:00" summary: "Met de Storyblok-integratie van Kontainer voegen je redacteuren afbeeldingen, video's en bestanden rechtstreeks uit je DAM in de Visual Editor van Storyblok in – zonder ze te downloaden en opnieuw te…" --- # Integratiegids voor Storyblok Met de Storyblok-integratie van Kontainer kiezen je redacteuren afbeeldingen, video's en bestanden rechtstreeks uit je DAM, zonder bestanden naar Storyblok te uploaden. Storyblok slaat alleen een verwijzing naar het bestand op; het eigenlijke bestand blijft in Kontainer en wordt via een CDN geleverd. Op de [integratiepagina](https://kontainer.com/nl/integrations) van Kontainer leest je meer over toepassingen, voordelen en meer. ## Vereisten - Een Storyblok-space en **beheerdersrechten** daarop – zonder die rechten kan de extensie niet worden geïnstalleerd - Een Kontainer-account (https://jouwbedrijf.kontainer.com) - De Storyblok-integratie ingeschakeld voor je Kontainer-account – controleer bij je accountmanager of die bij je abonnement is inbegrepen ## Wat wordt waar opgeslagen? Je bestanden blijven in Kontainer. Er wordt niets geüpload naar de bestandsbibliotheek van Storyblok. Storyblok slaat een standaardwaarde voor een bestand op die naar het Kontainer-CDN verwijst, met daarnaast de Kontainer-referentie: - `filename` – de CDN-URL, inclusief het downloadsjabloon dat je hebt gekozen - `alt, title` – overgenomen uit de beschrijving van het bestand in Kontainer - `focus` – het brandpunt dat je in Kontainer hebt ingesteld, in het eigen formaat van Storyblok - `meta_data.kontainer_file_id, kontainer_folder_id, kontainer_url` – identificatiegegevens om het bestand op te halen - `meta_data.kontainer_thumbnail_url, kontainer_extension, kontainer_type` Omdat de alt-tekst en het brandpunt met de verwijzing meereizen, hoeven redacteuren metadata niet opnieuw in te typen in Storyblok, en wordt een bestand dat je in Kontainer vervangt overal bijgewerkt waar het wordt gebruikt. ## Aan de slag ### 1. De integratie in Kontainer inschakelen Vraag je accountmanager om de Storyblok-integratie voor je Kontainer-account in te schakelen. Daarmee kan Storyblok de Kontainer-bestandskiezer insluiten, en dat is vereist voordat de kiezer opent. ### 2. De extensie in Storyblok installeren Open de installatielink, kies de space waarin je wilt installeren en bevestig: ``` https://app.storyblok.com/#/install/kontainer@asset-picker ``` Je hebt beheerdersrechten nodig voor de doelspace. Installeer de extensie één keer per space. ### 3. Het Kontainer-veld aan een blok toevoegen Ga in je space naar de **Block Library**, open het blok waarin je de kiezer wilt hebben en voeg een nieuw veld toe. Stel het type in op **Plugin** en kies `kontainer` uit de lijst. ### 4. Het veld naar je Kontainer laten verwijzen Voeg bij het geselecteerde veld de optie `kontainerHost` toe en stel die in op je Kontainer-domein, bijvoorbeeld `jouwbedrijf.kontainer.com` (met of zonder `https://`). Storyblok slaat plug-inopties per veld op, dus herhaal dit bij elk veld dat de kiezer gebruikt. Storyblok neemt optiewaarden niet over tussen spaces, dus elke space configureert je afzonderlijk. ### 5. Bestanden kiezen Open een story die het blok gebruikt en klik bij het veld op **Select from Kontainer**. Log de eerste keer in met je gewone Kontainer-gebruikersnaam en -wachtwoord. Blader, zoek en filter in je bibliotheek zoals gewoonlijk, pas eventueel een downloadsjabloon toe (bijsnijden, formaat wijzigen, bestandsformaat) en kies het bestand. Het veld toont daarna een voorbeeld en de bestandsnaam. Met **Replace asset** kies je een ander bestand en met **Remove asset** maak je het veld leeg. Bestanden die geen afbeelding zijn, zoals pdf's en video's, tonen in plaats van een voorbeeldafbeelding een bestandskaart met het bestandstype. ## Veldopties | Optie | Vereist | Waarde | | --- | --- | --- | | `kontainerHost` | Ja | Je Kontainer-domein, bijvoorbeeld `jouwbedrijf.kontainer.com` | | `mode` | Nee | `external` (standaard) koppelt het bestand in Kontainer. `import` kopieert het naar de bestandsbibliotheek van Storyblok. | | `storyblokRegion` | Alleen bij importeren | `eu` (standaard), `us`, `ca`, `ap` of `cn` | | `storyblokManagementToken` | Alleen bij importeren | Een persoonlijk toegangstoken van Storyblok met schrijftoegang tot bestanden | | `maxImportMb` | Nee | Het grootste bestand dat de import accepteert, standaard `50` | ## Optioneel: bestanden in Storyblok importeren Sommige teams eisen dat elk bestand door Storyblok zelf wordt gehost. Stelt je `mode` in op `import`, dan wordt het bestand naar de eigen bestandsbibliotheek van de space gekopieerd in plaats van gekoppeld. Het bestand is dan een gewoon Storyblok-bestand, en de afbeeldingsservice van Storyblok kan het bewerken. Twee dingen om rekening mee te houden voordat je een veld op importmodus zet: - De kopie wordt niet meer bijgewerkt wanneer het bestand in Kontainer verandert. - Het managementtoken is een veldoptie, wat betekent dat het wordt geleverd aan de browser van elke redacteur die dat veld gebruikt. Maak daarvoor een **beperkt** token: geef het in Storyblok alleen de scope voor bestanden, beperkt tot de ene space die het nodig heeft. Gebruik geen token dat toegang heeft tot je hele account. ## Het bestand in je frontend gebruiken Het veld retourneert een standaard Storyblok-bestandsobject en gedraagt zich dus als elk ander bestandsveld: ``` const { filename, alt, focus } = story.content.hero; ``` Vraag het bestand op via `filename` – het wordt geleverd vanuit het CDN van Kontainer. De afbeeldingsservice van Storyblok schaalt of snijdt een externe URL niet bij. Gebruik dus de eigen transformatieparameters van Kontainer, of een downloadsjabloon dat je bij het kiezen selecteert, om de geleverde grootte en het formaat te bepalen. Het brandpunt is beschikbaar als Storyblok-waarde `focus` en als ruwe pixelcoördinaten in `meta_data`. ## Support Heb je hulp nodig bij het instellen of configureren van de Storyblok-plug-in? Ons supportteam helpt je graag. Neem contact op via: [support@kontainer.com](mailto:support@kontainer.com) ## Other languages - [English](https://helpdesk.kontainer.com/article/storyblok-integration-guide/index.md) - [Deutsch](https://helpdesk.kontainer.com/de/article/storyblok-integrationsleitfaden/index.md) - [Svenska](https://helpdesk.kontainer.com/sv/article/integrationsguide-for-storyblok/index.md) - [Dansk](https://helpdesk.kontainer.com/da/article/integrationsguide-til-storyblok/index.md) ## Related articles - [Kontainer x Drupal – plug-ingids](https://helpdesk.kontainer.com/nl/article/kontainer-x-drupal-plug-ingids/index.md): Premium+-functie Installeer onze plug-in om een Kontainer-knop aan je Drupal-cms toe te voegen. Verbeter je Drupal-ervaring met naadloze media-imports, efficiënte CDN-integratie en aanpasbare opmaaksj… - [Integratiegids voor TYPO3](https://helpdesk.kontainer.com/nl/article/integratiegids-voor-typo3/index.md): Met de Kontainer-integratie voor TYPO3 verbindt je je centrale Digital Asset Management-systeem (DAM) rechtstreeks met je TYPO3-cms. Redacteuren en ontwikkelaars zoeken, kiezen en voegen afbeeldingen,… - [Integratiegids voor WordPress](https://helpdesk.kontainer.com/nl/article/integratiegids-voor-wordpress/index.md): Met de WordPress-integratie van Kontainer voeg je eenvoudig afbeeldingen, video's en bestanden rechtstreeks uit je DAM in WordPress in – zonder handmatig downloaden en uploaden. - [Gids voor de HubSpot-plug-in](https://helpdesk.kontainer.com/nl/article/gids-voor-de-hubspot-plug-in/index.md): Werk sneller en maak aantrekkelijkere HubSpot-websites en -landingspagina's met directe toegang tot je centraal beheerde afbeeldingenbibliotheek in Kontainer. Met onze HubSpot-plug-in zoekt, kiest en…