Install the plugin

Add the package.

npm install @gladtek/strapi-plugin-bynder@latest

pnpm add @gladtek/strapi-plugin-bynder@latest

yarn add @gladtek/strapi-plugin-bynder@latest

Enable it and set your portal in config/plugins.ts.

export default {
  'bynder-media-library': {
    enabled: true,
    config: {
      portalUrl: 'your-company.getbynder.com',
      language: 'en_US',
    },
  },
};

Allow Bynder in the Strapi security middleware, in config/middlewares.ts. Without this the browser blocks the picker.

export default [
  'strapi::logger',
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'https://market-assets.strapi.io', 'https://*.bynder.com'],
          'script-src': ["'self'", 'https://d8ejoa1fys2rk.cloudfront.net', 'https://*.bynder.com'],
          'media-src': ["'self'", 'data:', 'blob:', 'https://*.bynder.com'],
          'frame-src': ["'self'", 'https://*.bynder.com'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

If your file already has a strapi::security entry, add the Bynder hosts to its existing directives instead of replacing it.

Rebuild and start Strapi.

npm run build
npm run develop