Higher Quality, Stronger Performance, Increased Stability, Better Developer Experience, discover everything we've shipped recently!

Back to integrations

Integrate Bynder with Strapi

Integrate Bynder with Strapi to make most of both of these systems. Follow our handy guide.

tweet selection

    These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

    Introduction to Bynder and Strapi

    Bynder and Strapi are two tools that, when combined, can enhance your content management workflow. Understanding the differences between a traditional vs headless CMS is essential when considering such integrations.

    What is Bynder?

    Bynder is a digital asset management (DAM) platform that allows you to store, manage, and distribute your digital assets in a centralized location. With features like a robust search tool and Dynamic Asset Transformation, Bynder helps organizations maintain consistent branding and streamline collaboration.

    Why Use Strapi with Bynder

    Integrating Strapi with Bynder combines the flexibility of a headless CMS with the efficiency of a digital asset management system, offering several benefits for content and development teams. This integration is especially effective for those utilizing JAMstack with Strapi, enabling faster, more secure, and scalable applications. 

    Centralized Asset Hub

    Connecting Strapi to Bynder centralizes digital assets while keeping the content structure manageable in Strapi, ensuring media files are organized and easily accessible.

    Efficient Asset Access

    Strapi users can integrate with Bynder to manage media assets efficiently, potentially streamlining workflows and enhancing productivity.

    Consistent Brand Experience

    Using a single source for digital assets helps maintain brand consistency. Bynder ensures only the latest and approved assets are used, preserving brand integrity.

    Enhanced Collaboration

    The integration fosters better collaboration between content creators, designers, and marketing teams, ensuring they use the correct assets and information.

    Optimized Content Delivery

    By using Bynder's Dynamic Asset Transformation, assets can be optimized for different devices, improving load times and user experience. For instance, images can be automatically resized and compressed for mobile devices, ensuring faster page loads and a better user experience. Combining Bynder with image optimization with Strapi techniques can further enhance performance. 

    Key Features of Bynder

    RESTful API and SDKs

    Bynder provides a RESTful API and SDKs, allowing for programmatic access and management of digital assets, facilitating integration with platforms like Strapi.

    Compact View

    The Compact View is designed for seamless integration, allowing users to browse and import assets directly within Strapi.

    Dynamic Asset Transformation

    Bynder's Dynamic Asset Transformation feature resizes and adapts assets automatically, optimizing images for web delivery and improving page load speeds.

    Asset Search and Retrieval

    Advanced asset search capabilities allow you to easily find needed assets, increasing efficiency in content creation and management. For example, you can quickly locate assets by searching for specific keywords or filtering by metadata directly within Strapi.

    Metadata Synchronization

    Syncing metadata between Bynder and other platforms ensures asset information is accurate and up-to-date, maintaining consistency across digital properties.

    Version Control and Rights Management

    Bynder includes version control and rights management features to manage asset iterations and usage, ensuring compliance with licensing agreements.

    Best Practices of Integrating Bynder With Strapi

    To ensure a smooth integration of Bynder with Strapi and streamline your content workflow, follow these best practices.

    Utilize Bynder's API

    Bynder's RESTful API is essential for integration:

    • Authentication: Securely manage API credentials from your Bynder account.
    • Asset Fetching: Use API calls to retrieve assets and metadata from Bynder into Strapi.
    • Asset Management: Implement API endpoints to upload assets from Strapi to Bynder if needed.

    Develop Custom Plugins in Strapi

    Create custom plugins for necessary functionality. Before starting, consider these Strapi plugin development tips to guide you through the process:

    • Custom Field: Create a custom field in Strapi's Content-Types Builder.
    • User Interface: Develop an interface in Strapi to browse and select assets from Bynder. To achieve this, you can customize the Strapi admin by creating custom plugins that add the necessary functionality.
    • Asset Storage: Store asset metadata in Strapi for retrieval and display on the frontend.

    Implement Caching and Performance Optimization

    Improve performance by:

    • Caching API Responses: Reduce API calls by caching responses for frequently accessed assets. Consider CDN integration for Strapi to further enhance performance.
    • Optimize Assets: Use Bynder's Dynamic Asset Transformation to serve optimized images.

    Focus on Security and Authentication

    Ensure secure communication between Strapi and Bynder:

    • Secure Credentials: Use environment variables in Strapi to store API keys and tokens.
    • Error Handling: Implement error handling for API requests to manage failures gracefully.

    Synchronize Assets and Metadata

    Maintain consistency between Bynder and Strapi:

    • Metadata Sync: Regularly synchronize asset metadata from Bynder to Strapi.
    • Webhooks: Use webhooks to update Strapi when assets change in Bynder.

    Enhance User Experience

    Design the integration with content editors in mind. Enhancing user experience goes beyond interface design; you can implement push notifications with Strapi by integrating services like Firebase Cloud Messaging to keep users engaged:

    • Intuitive Interface: Provide an easy-to-use asset picker within Strapi.
    • Asset Previews: Display thumbnails and previews of Bynder assets in the Strapi admin panel.

    Monitor and Maintain the Integration

    Regularly assess the integration's performance. Plan for scalability by implementing solutions such as scaling Strapi with Kubernetes:

    • Update APIs: Stay updated on changes in Bynder's and Strapi's APIs.
    • Logging and Monitoring: Implement logging to monitor API usage and identify issues.

    Getting Started With Bynder

    Here's how to integrate Bynder with Strapi to enhance your content workflow.

    Setting Up Bynder API Access

    1. Log into your Bynder account.
    2. Navigate to the API settings.
    3. Create a new API key with the necessary permissions.

    Connecting Bynder to Strapi

    Since there's no official Bynder plugin for Strapi, create a custom integration:

    • Use Strapi's Content-Types Builder to add a custom field for Bynder assets.
    • Configure this field to communicate with Bynder's API.

    Creating a Custom Asset Picker

    Develop a custom React component within Strapi's admin panel:

    • Use Bynder's API to fetch and display assets.
    • Allow users to search and select assets from Bynder.

    Storing and Displaying Assets

    When an asset is selected:

    • Store its metadata, such as asset ID and URL, in Strapi.
    • Retrieve and display the asset in your frontend application using this metadata.
    tweet selection