---
title: "Guide d’intégration de Storyblok"
url: "https://helpdesk.kontainer.com/fr/article/guide-dintegration-storyblok/"
type: "article"
category: ["Paramètres d'administration", "Intégrations et plugins"]
tags: ["Fonctionnalité complémentaire", "Offres Premium+", "DAM"]
language: "fr"
published: "2026-10-08T05:41:10+00:00"
updated: "2026-10-08T05:41:10+00:00"
summary: "Avec l'intégration de Kontainer à Storyblok, vos éditeurs peuvent insérer des images, des vidéos et des fichiers directement depuis votre DAM dans le Visual Editor de Storyblok, sans les télécharger p…"
---

# Guide d’intégration de Storyblok

Avec l'intégration de Kontainer à Storyblok, vos éditeurs peuvent sélectionner des images, des vidéos et des fichiers directement depuis votre DAM, sans téléverser de fichiers dans Storyblok. Storyblok ne conserve qu'une référence au fichier ; le fichier lui-même reste dans Kontainer et est diffusé via le CDN.

Rendez-vous sur la [page des intégrations](https://kontainer.com/fr/integrations) de Kontainer pour en savoir plus sur les cas d'usage, les avantages, etc.

## Prérequis

- Un espace Storyblok, avec des droits d'**administrateur** sur celui-ci : l'extension ne peut pas être installée sans eux
- Un compte Kontainer (https://votreentreprise.kontainer.com)
- L'intégration de Storyblok activée sur votre compte Kontainer : vérifiez auprès de votre responsable de compte qu'elle est incluse dans votre offre

## Ce qui est stocké, et où

Vos fichiers restent dans Kontainer. Rien n'est téléversé dans la bibliothèque de fichiers de Storyblok. Storyblok enregistre une valeur de fichier standard qui pointe vers le CDN de Kontainer, la référence Kontainer étant conservée à côté :

- `filename` : l'URL CDN, avec le modèle de téléchargement que vous avez choisi
- `alt, title` : repris de la description du fichier dans Kontainer
- `focus` : le point focal défini dans Kontainer, au format propre à Storyblok
- `meta_data.kontainer_file_id, kontainer_folder_id, kontainer_url` : des identifiants pour retrouver le fichier
- `meta_data.kontainer_thumbnail_url, kontainer_extension, kontainer_type`

Comme le texte alternatif et le point focal accompagnent la référence, les éditeurs n'ont pas à ressaisir les métadonnées dans Storyblok, et le remplacement d'un fichier dans Kontainer le met à jour partout où il est utilisé.

## Pour commencer

### 1. Activer l'intégration dans Kontainer

Demandez à votre responsable de compte d'activer l'intégration de Storyblok pour votre compte Kontainer. Cela permet à Storyblok d'intégrer le sélecteur de fichiers de Kontainer, et c'est indispensable pour que le sélecteur s'ouvre.

### 2. Installer l'extension dans Storyblok

Ouvrez le lien d'installation, choisissez l'espace dans lequel vous souhaitez l'installer et confirmez :

```
https://app.storyblok.com/#/install/kontainer@asset-picker
```

Vous devez disposer de droits d'administrateur sur l'espace cible. L'installation se fait une seule fois par espace.

### 3. Ajouter le champ Kontainer à un bloc

Dans votre espace, rendez-vous dans **Block Library**, ouvrez le bloc dans lequel vous souhaitez le sélecteur et ajoutez un nouveau champ. Définissez son type sur **Plugin** et choisissez `kontainer` dans la liste.

### 4. Faire pointer le champ vers votre Kontainer

Le champ étant sélectionné, ajoutez l'option `kontainerHost` et définissez-la sur le domaine de votre Kontainer, par exemple `votreentreprise.kontainer.com` (avec ou sans `https://`).

Storyblok enregistre les options de plugin champ par champ : répétez donc cette étape pour chaque champ qui utilise le sélecteur. Storyblok ne reporte pas les valeurs d'options d'un espace à l'autre : chaque espace se configure séparément.

### 5. Sélectionner des fichiers

Ouvrez une story qui utilise le bloc et cliquez sur **Select from Kontainer** dans le champ. Lors de la première utilisation, connectez-vous avec votre nom d'utilisateur et votre mot de passe Kontainer habituels. Parcourez, recherchez et filtrez votre bibliothèque comme d'habitude, appliquez si besoin un modèle de téléchargement (recadrage, redimensionnement, format), puis sélectionnez le fichier.

Le champ affiche alors un aperçu et le nom du fichier. **Replace asset** permet de choisir un autre fichier et **Remove asset** vide le champ. Les fichiers qui ne sont pas des images, comme les PDF et les vidéos, affichent une carte avec le type de fichier à la place d'un aperçu.

## Options du champ

| Option | Obligatoire | Valeur |
| --- | --- | --- |
| `kontainerHost` | Oui | Le domaine de votre Kontainer, par exemple `votreentreprise.kontainer.com` |
| `mode` | Non | `external` (par défaut) relie le fichier dans Kontainer. `import` le copie dans la bibliothèque de fichiers de Storyblok. |
| `storyblokRegion` | Import uniquement | `eu` (par défaut), `us`, `ca`, `ap` ou `cn` |
| `storyblokManagementToken` | Import uniquement | Un jeton d'accès personnel Storyblok avec accès en écriture aux fichiers |
| `maxImportMb` | Non | Taille maximale d'un fichier accepté par l'import, `50` par défaut |

## Facultatif : importer des fichiers dans Storyblok

Certaines équipes exigent que tous les fichiers soient hébergés par Storyblok lui-même. En définissant `mode` sur `import`, le fichier est copié dans la bibliothèque de fichiers de l'espace au lieu d'être relié. Il devient alors un fichier Storyblok ordinaire, que le service d'images de Storyblok peut transformer.

Deux points à garder à l'esprit avant de passer un champ en mode import :

- La copie n'est plus mise à jour lorsque le fichier change dans Kontainer.
- Le jeton de gestion est une option de champ : il est donc transmis au navigateur de chaque éditeur qui utilise ce champ. Créez-en un jeton **restreint** : dans Storyblok, accordez-lui uniquement le périmètre Assets, limité à l'unique espace concerné. Ne réutilisez pas un jeton qui a accès à l'ensemble de votre compte.

## Utiliser le fichier dans votre frontend

Le champ renvoie un objet de fichier Storyblok standard : il se comporte comme n'importe quel autre champ de fichier :

```
const { filename, alt, focus } = story.content.hero;
```

Appelez le fichier à partir de `filename` : il est servi depuis le CDN de Kontainer.

Le service d'images de Storyblok ne redimensionne ni ne recadre une URL externe : utilisez donc les paramètres de transformation propres à Kontainer, ou un modèle de téléchargement choisi lors de la sélection, pour contrôler la taille et le format livrés. Le point focal est disponible à la fois sous la forme de la valeur `focus` de Storyblok et sous la forme de coordonnées brutes en pixels dans `meta_data`.

## Support

Si vous avez besoin d'aide pour installer ou configurer le plugin Storyblok, notre équipe de support se fera un plaisir de vous aider.

Contactez : [support@kontainer.com](mailto:support@kontainer.com)

## Other languages

- [English](https://helpdesk.kontainer.com/article/storyblok-integration-guide/index.md)
- [Dansk](https://helpdesk.kontainer.com/da/article/integrationsguide-til-storyblok/index.md)
- [Deutsch](https://helpdesk.kontainer.com/de/article/storyblok-integrationsleitfaden/index.md)
- [Español](https://helpdesk.kontainer.com/es/article/guia-de-integracion-con-storyblok/index.md)
- [Nederlands](https://helpdesk.kontainer.com/nl/article/integratiegids-voor-storyblok/index.md)
- [Svenska](https://helpdesk.kontainer.com/sv/article/integrationsguide-for-storyblok/index.md)

## Related articles

- [Créer et gérer des automatisations](https://helpdesk.kontainer.com/fr/article/creer-et-gerer-des-automatisations/index.md): Configurez des automatisations qui déplacent, taguent, copient ou signalent des fichiers dans votre DAM Kontainer, et gérez-les depuis la vue d'ensemble Automations.
- [Notifications Slack depuis Kontainer](https://helpdesk.kontainer.com/fr/article/notifications-slack-depuis-kontainer/index.md): Recevez les notifications de Kontainer directement dans Slack et restez informé sans surveiller plusieurs systèmes. L'intégration de Slack vous permet de choisir précisément les notifications que vous…
- [Monter WebDAV sur Mac et Windows](https://helpdesk.kontainer.com/fr/article/monter-webdav-sur-mac-et-windows/index.md): Établissez une connexion WebDAV pour accéder aux fichiers de votre Kontainer comme à ceux d’un disque local, c’est-à-dire via le Finder sur Mac ou l’Explorateur de fichiers sur Windo…
- [Kontainer et Office (version M365) – guide du plugin](https://helpdesk.kontainer.com/fr/article/kontainer-et-office-version-m365-guide-du-plugin/index.md): Manuel du complément Office 365 À noter : si le plugin Office est inclus dans votre offre, il peut encore nécessiter une activation. Contactez le Customer Success si vous avez besoin d’aide…