# Contentful
## Description:
The features of the Contentful DAM App include:
* **Asset Manager Widget:** Manage and insert assets directly within the Contentful content editor, streamlining the asset handling process.
* **Multiple File Type Support:** Supports a variety of file types, including images, videos, and documents.
* **Metadata configuration:**
* Asset metadata from Scaleflex DAM will show on your Rest/GraphQL response
* You can choose which attributes will be saved in Contentful content field
* Configuration for limited file types and maximum file count
## Installation
### Prerequisites
1. [Register for a demo](https://www.scaleflex.com/request-a-demo) if you don't already have a DAM account.
2. Sign up to Contentful.
Contentful is 100% Cloud Native, so you have to sign up for a hosted CMS at [https://be.contentful.com](https://be.contentful.com/) and you will get a link to your space:
```
https://app.contentful.com/spaces/{Your Space ID}/home
```
### Step 1. Install from Contentful Marketplace
**There are 2 ways:**
* To install the Contentful DAM App, visit the [Contentful Marketplace](https://www.contentful.com/marketplace/app/scaleflex-filerobot/) and click 'Install'. Follow the prompts to complete the installation.
[](https://app.contentful.com/deeplink?link=apps\&id=7jJoGTAjjjTZqedusaIU7M)
### Step 2. Configure the app
**Configuration keys(\* = required):**
* **Token\*:** This is the Scaleflex DAM token found in the Asset Hub interface, which allows the app to connect to your DAM account
* **Security Template\*:** Found in the *Project > Access > Security Templates* tab, this key is required for secure access
* **Asset directory:** Defines the top-level folder for storing assets. The default is the root directory (/).
{% hint style="info" %}
*You can quickly validate your token and security template by clicking **"Validate Scaleflex DAM Setting"***
{% endhint %}
* **Limit:** The max number of files that can be added to a single field
* **Attributes:** A string containing information (JSON attributes) that you want to store in a Contentful field, separated by commas. For example: meta, info.
* **Limit Type(s):** String type, acceptable values: any or all of the following: 'image', 'video', 'audio', 'application', 'application/zip', 'application/x-zip-compressed', 'application/vnd.rar', 'application/x-rar-compressed', separated by commas.
{% hint style="info" %}
Please refresh your browser (Ctrl + F5) each time you change the settings so they take effect.
{% endhint %}
## Usage
### Field Setting
* In any content model, create a new **JSON Object** Field
* In Appearance section, choose Scaleflex DAM
### Content Editor
* In any Scaleflex DAM Field, to insert assets from DAM to content, click on Asset Manager
* An Asset Dialog will appear:
* Select one or more assets you want to add to the field.
* Click "Insert" on the top right corner of the opened Dialog
* You have 2 options:
* Insert as original
* Insert as transformed (change the image format or size before inserting)
* After inserted, assets will appear like below:
**You can:**
* Reorder assets position by drag and drop
* You can delete unwanted asset(one by one - click on the 3 dots icon `...` then select "**Delete"**) or click "**Clear all***"* to remove all selected assets
* If any changes are done from the Hub, please use **"Refresh Assets"** button so to update Contentful
## JSON format
The following is an example of how metadata for inserted assets is stored in JSON format within Contentful.
```
[
{
"url": "https://try.filerobot.com/Widget_demo_folder/%24R202RV2-AiiacoEg.jpg",
"id": "2a9de85c-406a-5101-9ab5-7b6259250005",
"name": "$R202RV2-AiiacoEg.jpg",
"extension": "jpg",
"type": "image/jpeg",
"attributes": {
"meta": {
"boolean": true,
"creator": "Hiep",
"date": "2024-09-11",
"dc_description": "dc description test",
"description": {
"en": "neweded"
},
"multi_select": [
"Blue",
"Green",
"Yellow"
],
"price": {
"default": "12"
},
"product_id": {
"default": "IIHHYTTD22"
},
"sport": "Sport test",
"test": "None",
"test-multi-select": [
"Test 2",
"Test 1"
],
"test-price": {
"eur": "20"
},
"testsd": "2024-09-10",
"title": {
"en": "testssssss"
}
}
}
}
]
```
