{"id":8313,"date":"2026-10-08T07:41:51","date_gmt":"2026-10-08T05:41:51","guid":{"rendered":"https:\/\/helpdesk.kontainer.com\/article\/guide-dintegration-strapi\/"},"modified":"2026-10-08T07:41:51","modified_gmt":"2026-10-08T05:41:51","slug":"guide-dintegration-strapi","status":"publish","type":"article","link":"https:\/\/helpdesk.kontainer.com\/fr\/article\/guide-dintegration-strapi\/","title":{"rendered":"Guide d&rsquo;int\u00e9gration de Strapi"},"content":{"rendered":"<p>Avec l&rsquo;int\u00e9gration de Kontainer \u00e0 Strapi, vos \u00e9diteurs peuvent s\u00e9lectionner des images, des vid\u00e9os et des fichiers directement depuis votre DAM, sans t\u00e9l\u00e9verser de fichiers dans Strapi.<br \/>\nStrapi ne conserve qu&rsquo;une r\u00e9f\u00e9rence au fichier&nbsp;; le fichier lui-m\u00eame reste dans Kontainer et est diffus\u00e9 via le CDN.<\/p>\n<p>Rendez-vous sur la <a href=\"https:\/\/kontainer.com\/fr\/integrations\" target=\"_blank\" rel=\"noopener\">page des int\u00e9grations<\/a> de Kontainer pour en savoir plus sur les cas d&rsquo;usage, les avantages, etc.<\/p>\n<h2>Pr\u00e9requis<\/h2>\n<ul>\n<li>Strapi v5 (Strapi v4 n&rsquo;est pas pris en charge)<\/li>\n<li>Node.js 18 ou sup\u00e9rieur<\/li>\n<li>Un compte Kontainer (https:\/\/votreentreprise.kontainer.com)<\/li>\n<li>Un d\u00e9veloppeur ayant acc\u00e8s au code de votre Strapi et capable de le d\u00e9ployer<\/li>\n<\/ul>\n<h2>Ce qui est stock\u00e9, et o\u00f9<\/h2>\n<p>Vos fichiers restent dans Kontainer. Rien n&rsquo;est t\u00e9l\u00e9vers\u00e9 dans la m\u00e9diath\u00e8que de Strapi. Strapi ne stocke qu&rsquo;une r\u00e9f\u00e9rence JSON au fichier, qui comprend&nbsp;:<\/p>\n<ul>\n<li><code>fileId, fileName, folderId <\/code>&nbsp;: des identifiants pour retrouver le fichier<\/li>\n<li><code>url<\/code>&nbsp;: l&rsquo;URL CDN, avec le mod\u00e8le de t\u00e9l\u00e9chargement que vous avez choisi<\/li>\n<li><code>thumbnailUrl, type, extension, dimensions, size<\/code><\/li>\n<li><code>alt, description <\/code>et tous les champs personnalis\u00e9s de Kontainer<\/li>\n<\/ul>\n<p>Comme le texte alternatif et toutes les valeurs des champs personnalis\u00e9s accompagnent la r\u00e9f\u00e9rence, les \u00e9diteurs n&rsquo;ont pas \u00e0 ressaisir les m\u00e9tadonn\u00e9es dans Strapi, et votre frontend peut les lire directement dans la r\u00e9ponse de l&rsquo;API Strapi.<\/p>\n<h2>Pour commencer<\/h2>\n<h3>1. Installer le plugin<\/h3>\n<p>Dans votre projet Strapi&nbsp;:<\/p>\n<pre><code>npm install @kontainer\/strapi-plugin<\/code><\/pre>\n<p>Validez package.json et package-lock.json pour que le plugin soit livr\u00e9 avec votre d\u00e9ploiement. Strapi d\u00e9tecte et active le plugin automatiquement&nbsp;: aucune modification de fichier de configuration n&rsquo;est n\u00e9cessaire.<\/p>\n<h3>2. Ajouter le champ Kontainer \u00e0 un type de contenu<\/h3>\n<p>Dans le Content-Type Builder, choisissez Custom fields \u2192 Kontainer media, ou ajoutez-le directement au sch\u00e9ma&nbsp;:<\/p>\n<p><code>\"hero\": {<br \/>\n\"type\": \"customField\",<br \/>\n\"customField\": \"plugin::kontainer.media\"<br \/>\n}<\/code><\/p>\n<p>Le Content-Type Builder est en lecture seule en production&nbsp;: effectuez donc cette modification dans votre environnement de d\u00e9veloppement, puis d\u00e9ployez la modification du sch\u00e9ma.<\/p>\n<h3>3. Compiler<\/h3>\n<p>L&rsquo;interface d&rsquo;administration du plugin est compil\u00e9e dans le bundle d&rsquo;administration. Cette \u00e9tape est obligatoire&nbsp;: sans elle, le bouton \u00ab&nbsp;Choose from Kontainer&nbsp;\u00bb n&rsquo;appara\u00eet pas.<\/p>\n<p><code> npm ci --omit=dev<br \/>\nnpm run build<br \/>\nnpm run start<br \/>\n<\/code><\/p>\n<h3>4. Se connecter \u00e0 Kontainer<\/h3>\n<p>Rendez-vous dans Settings \u2192 Kontainer \u2192 Configuration et saisissez l&rsquo;URL de votre Kontainer. C&rsquo;est toute la configuration&nbsp;: aucune cl\u00e9 d&rsquo;API ni variable d&rsquo;environnement n&rsquo;est n\u00e9cessaire.<\/p>\n<p>Les param\u00e8tres sont enregistr\u00e9s dans la base de donn\u00e9es de Strapi&nbsp;: vous devrez donc les d\u00e9finir une fois par environnement (pr\u00e9production et production s\u00e9par\u00e9ment).<\/p>\n<h3>5. S\u00e9lectionner des fichiers<br \/>\n<\/h3>\n<p>Dans l&rsquo;\u00e9diteur, cliquez sur \u00ab&nbsp;Choose from Kontainer&nbsp;\u00bb dans le champ. Parcourez, recherchez et filtrez votre biblioth\u00e8que Kontainer, appliquez si besoin un mod\u00e8le de t\u00e9l\u00e9chargement (recadrage, redimensionnement, format), puis s\u00e9lectionnez le fichier. Strapi enregistre la r\u00e9f\u00e9rence&nbsp;; l&rsquo;URL CDN refl\u00e8te le mod\u00e8le que vous avez choisi.<\/p>\n<h2>Facultatif&nbsp;: suivi de l&rsquo;utilisation des fichiers<\/h2>\n<p>Kontainer peut vous montrer o\u00f9 chaque fichier est utilis\u00e9 dans Strapi. Sous Settings \u2192 Kontainer, cliquez sur Generate pour cr\u00e9er un jeton, puis enregistrez l&rsquo;URL du point d&rsquo;acc\u00e8s affich\u00e9e, avec le jeton, comme int\u00e9gration dans Kontainer, sous Param\u00e8tres \u2192 Int\u00e9grations. Kontainer interroge ensuite Strapi et signale l&rsquo;utilisation dans tous les types de contenu, y compris les brouillons, les langues, les composants et les zones dynamiques.<\/p>\n<h2>Utiliser la r\u00e9f\u00e9rence dans votre frontend<\/h2>\n<p>La r\u00e9f\u00e9rence est renvoy\u00e9e telle quelle par l&rsquo;API de contenu de Strapi&nbsp;:<\/p>\n<p><code>const page = await fetch(`${STRAPI_URL}\/api\/pages\/${documentId}`).then((r) =&gt; r.json());<br \/>\nconst { url, alt } = page.data.hero;<\/code><\/p>\n<p>Appelez le fichier \u00e0 partir de <code>url<\/code>&nbsp;: il est servi depuis le CDN de Kontainer.<\/p>\n<h2>Support<\/h2>\n<p>Si vous avez besoin d&rsquo;aide pour installer ou configurer le plugin Strapi, notre \u00e9quipe de support se fera un plaisir de vous aider.<\/p>\n<p>Contactez&nbsp;: <a href=\"mailto:support@kontainer.com\">support@kontainer.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avec l&rsquo;int\u00e9gration de Kontainer \u00e0 Strapi, vous pouvez ins\u00e9rer facilement des images, des vid\u00e9os et des fichiers directement depuis votre DAM dans l&rsquo;interface d&rsquo;administration de Strapi, sans t\u00e9l\u00e9chargement ni t\u00e9l\u00e9versement manuels.<\/p>\n","protected":false},"author":16,"featured_media":0,"menu_order":0,"comment_status":"","ping_status":"closed","template":"","article-category":[191,194],"article-tag":[198,203,205],"class_list":["post-8313","article","type-article","status-publish","hentry","article-category-parametres-dadministration","article-category-integrations-et-plugins","article-tag-fonctionnalite-complementaire","article-tag-offres-premium","article-tag-dam"],"translations":{"da":{"id":8009,"title":"Integrationsguide til Strapi","url":"https:\/\/helpdesk.kontainer.com\/da\/article\/integrationsguide-til-strapi\/"},"de":{"id":7600,"title":"Strapi-Integrationsleitfaden","url":"https:\/\/helpdesk.kontainer.com\/de\/article\/strapi-integrationsleitfaden\/"},"en":{"id":7597,"title":"Strapi Integration Guide","url":"https:\/\/helpdesk.kontainer.com\/article\/strapi-integration-guide\/"},"es":{"id":8435,"title":"Gu\u00eda de integraci\u00f3n con Strapi","url":"https:\/\/helpdesk.kontainer.com\/es\/article\/guia-de-integracion-con-strapi\/"},"fr":{"id":8313,"title":"Guide d\u2019int\u00e9gration de Strapi","url":"https:\/\/helpdesk.kontainer.com\/fr\/article\/guide-dintegration-strapi\/"},"nl":{"id":8136,"title":"Integratiegids voor Strapi","url":"https:\/\/helpdesk.kontainer.com\/nl\/article\/integratiegids-voor-strapi\/"},"sv":{"id":7859,"title":"Integrationsguide f\u00f6r Strapi","url":"https:\/\/helpdesk.kontainer.com\/sv\/article\/integrationsguide-for-strapi\/"}},"_links":{"self":[{"href":"https:\/\/helpdesk.kontainer.com\/fr\/wp-json\/wp\/v2\/article\/8313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpdesk.kontainer.com\/fr\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/helpdesk.kontainer.com\/fr\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/helpdesk.kontainer.com\/fr\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/helpdesk.kontainer.com\/fr\/wp-json\/wp\/v2\/comments?post=8313"}],"version-history":[{"count":0,"href":"https:\/\/helpdesk.kontainer.com\/fr\/wp-json\/wp\/v2\/article\/8313\/revisions"}],"wp:attachment":[{"href":"https:\/\/helpdesk.kontainer.com\/fr\/wp-json\/wp\/v2\/media?parent=8313"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpdesk.kontainer.com\/fr\/wp-json\/wp\/v2\/article-category?post=8313"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpdesk.kontainer.com\/fr\/wp-json\/wp\/v2\/article-tag?post=8313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}