Integrate Cincopa with Strapi

After you choose the options, Strapi will finish the setup, install the required dependencies, and initialize the project. Once Strapi is set up, navigate to your project directory by running the following command in your terminal:

cd my-project

Replace my-project with the name of your project.

Install Cincopa Uploader Plugin

Now, install the Cincopa Uploader plugin by running the following command:

npm install strapi-plugin-cincopa-uploader@latest

Set up Configuration in Strapi

After installing the Cincopa Uploader Plugin in Strapi, configure it based on whether you selected TypeScript or JavaScript during Strapi installation. Edit the plugins.js (for JavaScript) or plugins.ts (for TypeScript) files, along with the .env file, to add your Cincopa API token and configure the plugin settings.

Step 1: Configure the Plugin

Once the Cincopa Uploader Plugin is installed, open the appropriate configuration file based on your setup:

Step 2: Add the Configuration

In the selected configuration file, add the following code to configure the Cincopa Uploader plugin:

For TypeScript:

export default ({ env }) => ({

'cincopa-uploader': {

enabled: true,

config: {

apiToken: env('CINCOPA_API_TOKEN'),

fullCincopaSync: false,

},

},

});

For JavaScript:

module.exports = ({ env }) => ({

'cincopa-uploader': {

enabled: true,

config: {

apiToken: env('CINCOPA_API_TOKEN'),

fullCincopaSync: false,

},

},

});

Step 3: Add your Cincopa API token to the .env file located in the root directory of your project and save it.

CINCOPA_API_TOKEN=your_actual_api_token_here

Replace your_actual_api_token_here with the real token you get from your Cincopa account.

note

For more information on how to generate an API Token, refer to the section “Create an API Token”.

Step 4: Save all your files, then restart the Strapi development server to apply the changes.

npm run develop

Once the server starts, access the admin panel by the provided link in your terminal to create your first administrator account and begin using Strapi. For example: “http://localhost:1337/admin”

Step 5: Fill out the form to create your admin account and access the Strapi Admin Panel for managing content and settings.

After creating your account, you'll be redirected to the homepage, confirming that your setup was successful.

Here, you'll be able to start managing your content, configure settings, and work with the media assets you’ve uploaded.

Full Sync Mode

The Cincopa Uploader plugin provides a Full Sync Mode, which ensures that all assets from Cincopa are synced to Strapi. This mode is useful when you want to synchronize your Cincopa assets across multiple environments, ensuring everything is up-to-date.

To enable Full Sync Mode, modify the configuration in plugins.js or plugins.ts:

fullCincopaSync: true

This will synchronize all assets during upload, ensuring all metadata and related information are updated in Strapi.

Configure Webhook

To enable communication between Cincopa and Strapi, a Webhook needs to be configured to send events about the upload and processing completion. Follow these steps to set up the Webhook:

note

Webhook signature verification is currently disabled due to limitations in Koa (used by Strapi), which prevents access to the raw request body. This may be added in a future update.

Step 1: Log in to your Cincopa account and navigate to the webhook section.

Step 2: Click on the “Create Webhook” button.

Step 3: When prompted, you'll be asked for the URL to notify. This URL should point to the endpoint where Cincopa will send updates about the upload and processing status. The format for the URL should be:

https://your-strapi-domain.com/api/cincopa-uploader/webhook

Replace your-strapi-domain.com with your actual, publicly accessible Strapi base URL.

After saving the configuration, copy the "Signing Secret," which will be used later for verification.

Step 1: Navigate to the Content Type Builder in your Strapi Admin Panel.

Step 2. Click on Create new collection type.

Step 3. Give it a display name like "IKEA Stores.

Step 4: When you create a new collection type in Strapi, the API ID (Singular) and API ID (Plural) fields are automatically populated based on the Display Name you enter for the collection.

Step 5: After giving the display name, click on the “Continue” button.

Strapi offers various field types for adding different kinds of data to your collection.

For this, we'll add the following fields:

To add more fields to your collection, click on the “Add another field” button.

After adding these fields, click on Save to create your IKEA Stores collection type.

After creating the collection, you can add individual store entries by following these steps:

Step 1. Navigate to the “Content Manager” in your Strapi Admin Panel.

Step 2: Navigate to the IKEA Stores collection in the Strapi Admin Panel.

Step 3. Click on Create new entry.

Step 4. Fill in the store details:

Step 5: Once you've entered all the required details for the store, click on Publish to save and activate the store entry. This will make the store visible in your IKEA Stores collection.

Now that the store entry is published, you can retrieve and display the store details, including the associated Cincopa Asset (video or media), using Strapi's API. This allows you to showcase the store details and media content on your front-end application, website, or platform.

Upload Asset to Cincopa via Strapi

You can upload and manage media files, such as videos and images, to Cincopa directly from the Strapi Admin Panel. These files can be linked to custom collection types to store and manage related metadata.

Step 1. In the Strapi Admin Panel, go to the Cincopa Asset Uploader section. Here, you can choose to upload media either by providing a remote URL or by selecting a local video/image file.

Step 2. Click the “Upload new asset” button.

Step 3. Select your file or enter the media URL to begin the upload process.

Step 4. Once the upload is successful, you can model relationships between the uploaded Cincopa asset and your custom collection types. This allows you to link media files directly to your content and associate any relevant metadata.

To make your content accessible via the Strapi API, you need to ensure that the public role is granted permission to access the relevant API endpoints.

Step 1: In the Strapi Admin Panel, go to Settings.

Step 2: Click on the Roles under the User & Permissions Plugin and select the Public role.

Step 3: In the Permissions section, locate your IKEA Stores collection and enable the find and findOne permissions.

Step 4: Ensure that the Cincopa Asset field is also accessible for the public role so that media files associated with your content are included in the response.

Step 5: Click the Save button to apply the changes to the public role.

Once the permissions are set and the content type is properly configured, you can fetch the content from the IKEA Stores collection via Strapi’s REST API. To do this, you need to send a GET request to the appropriate endpoint.

To access the IKEA Stores content via the Strapi API, use the following URL:

http://localhost:1337/api/ikea-stores

You can test the GET request by entering the URL directly into your browser or by using a tool like Postman or cURL. If you are using cURL, you can test the request by running this command:

curl http://localhost:1337/api/ikea-stores

If the permissions are correctly set, Strapi will return a list of all store entries from the IKEA Stores collection. The response will include metadata about each store entry, including any related Cincopa media assets, such as URLs for videos, images, or audio.

Accessing IKEA Stores Data with Images

To access the IKEA Stores collection and also populate the related images, you need to send a GET request to the appropriate endpoint with the populate parameter specifying images.

URL for fetching stores with images:

http://localhost:1337/api/ikea-stores?populate=cincopa\_uploader\_cincopa\_assets

An example of the API response could look like this:

Create an API Token

To use the Cincopa Uploader Plugin effectively, you need to create an API Token in the Cincopa Dashboard:

Step 1. Log in to your Cincopa account. Then, click on your profile menu and select “Account Settings” from the dropdown.

Step 2. Select “API Tokens” from the left-hand sidebar menu.

Step 3: Click the "Create New Key" button to generate a new key.

Step 4: Name the token and grant it all necessary permissions (full access).

Step 5. After granting the necessary permissions, click the "Create Key" button.

Step 6. Copy these credentials for use in the Strapi configuration.

Next Steps

Now that you've integrated Cincopa with Strapi, you can deploy your Strapi project to a public server to ensure everything functions smoothly. For deployment and further configuration, follow these resources: