Storyblok

DAM Storyblok App

Installation

Prerequisites

1. Register for a demo if you don't already have a DAM account.

2. Sign up to Storyblok.

Step 1. Installation

You can find the Scaleflex DAM in the Storyblok Marketplace, clicking the Visit Website button will link to this page containing all instructions.

Note that requesting an installation delegation can be done via our contact form or our support email [e-mail], and finally using our regular support page.

Make sure you complete, in any case, each of the following steps fully:

1. Send us the installation delegation request, including

   • Your Storyblok "Space ID" (find it in the settings, in General / Space)

   • Your preference of installation type ( Field Plugin, or App level -default- )

2. Add (invite) our Plugins Installation team to your Space

   • Use [e-mail] (you can remove this user once the installation is completed)

   • with "Admin" role (otherwise the installation is not possible)

Our support team will contact you back to confirm the installation date and make sure you have everything configured properly to start using the Scaleflex DAM plugin.

Once this is done, you will be able to find the new block in your "Block Library" under the name "DAM" and be ready to go!

Depending on your level of support and onboarding plan, a CSM can assist you for the next steps: setup and configuration.

Step 2. Setup & configuration

You have 3 required configuration items to take from the Asset hub: Token (the unique project or library identifier), Security Template (this will be used as the secret for authentication), Directory (where you want Storyblok's assets to be stored and retrieved from, usually a dedicated sub-directory; note that this field must be comprised under the directory limit of the Security Template you have selected) And there are optional fields: limit, attributes

You can add as many blocks containing the DAM field type as needed. There is no limit on the number of blocks you can include.

1. Go to Block Library -> New Block

2. Enter any Technical Name you want, Select Nestable Block -> click "Add Block"

3. In the side modal "Edit [Technical Name]" that appeared, enter any name as Field (eg. DAM_Asset), then select the type of field as plugin -> click "Add"

4. Click on the field just added (in the "General" section below), then scroll down to the Plugin Options, then choose "filerobot-storyblok" in the Custom Type drop-down. Add the 3 configuration keys you gathered from the DAM and set up like below:

   • token = Token from DAM (aka project identification code)

   • secTemplate = Security template from DAM

   • rootDir = Base directory (also in the security template configuration)

   • limit (optional) = number of files you can show when choose on DAM Asset

   • attributes (optional) = add more data on API Response Structure (ex: meta, tags, owner)

     • if "meta" is used, then all custom metadata will be sent along the asset's URL in the json,

     • if "meta[key1, key2, ...]" is used, only the metadata(s) specified in the list will be sent.

   • limitType (optional) = File Type Filtering ( ex: image, video, audio, application, application/zip, application/x-zip-compressed, application/vnd.rar, application/x-rar-compressed )

   • forceFilters (optional) = Advanced search metadata filters (feel free to contact us to confirm your use case so our support can provide the exact setting, adapted to your requirement) Eg.. if you want to show only assets that have expired_date metadata field greater or equal today: you can use [{"key": "expired_date", "value": ["$CURRENT_DATE..", "EMPTY"]}]

Example Config

Note: Show complete Metadata work if the token has the relevant permission. The list project configuration default shows the title and description.

Below are the 3 configuration steps illustrated:

New BlockNew Field TypeField Required SettingsField Optional Settings

Add New Block

User guide

1. In any Content, type Edit Page

2. Click Add Block, Choose the Block contain the DAM Field you want to add to the Page:

Add Block

Insert Block Type"DAM"

Result

It is now possible to interact with your DAM library assets directly from Storyblok:

#	Action	How to
1	Add Assets	1/ Click Add Assets 2/ Asset picker modal: Choose any asset(s) you want to insert 3/ On top of the modal: Click Insert 4/ Result
2	Reorder	Drag and drop to sort assets
3	Remove Asset	On each added Asset -> Click the Bin icon to remove one Item
4	Remove all Assets	To remove (delete) all Assets, click the red "Remove all assets" in the top right corner.

API Response Structure

[
  {
    "uuid": "2a9de85c-406a-5101-9ab5-7b6259250001",
    "name": "$R202RV2-AiiacoEg.jpg",
    "cdn": "https://try.filerobot.com/Widget_demo_folder/%24R202RV2-AiiacoEg.jpg",
    "extension": "jpg",
    "source": "filerobot",
    "type": "image/jpeg"
  },
  {
    "uuid": "c83ca796-00e5-5c08-b87c-cd6ecee50000",
    "name": "012871.tif",
    "cdn": "https://try.filerobot.com/Widget_demo_folder/012871.tif",
    "extension": "tif",
    "source": "filerobot",
    "type": "image/tiff"
  }
]

API Response Structure Have Add Attributes Option

[
  {
    "uuid": "2a9de85c-406a-5101-9ab5-7b6259250002_0",
    "name": "$R202RV2-AiiacoEg.jpg",
    "cdn": "https://try.filerobot.com/Widget_demo_folder/%24R202RV2-AiiacoEg.jpg",
    "extension": "jpg",
    "source": "filerobot",
    "type": "image/jpeg",
    "attributes": {
      "meta": {
        "boolean": null,
        "date": "",
        "description": {
          "en": "neweded"
        },
        "malt_id": "",
        "multi_select": null,
        "number": "",
        "price": {
          "default": "12"
        },
        "product_id": {},
        "sales_tags": {},
        "select_one": null,
        "shouldbedeleted": "",
        "sku": "",
        "sport": "",
        "test": "",
        "test-multi-select": null,
        "test-price": {},
        "title": {
          "en": "testssssss"
        }
      },
      "tags": {}
    }
  },
  {
    "uuid": "c83ca796-00e5-5c08-b87c-cd6ecee50000_1",
    "name": "012871.tif",
    "cdn": "https://try.filerobot.com/Widget_demo_folder/012871.tif",
    "extension": "tif",
    "source": "filerobot",
    "type": "image/tiff",
    "attributes": {
      "meta": {
        "boolean": null,
        "date": null,
        "description": {
          "en": "s"
        },
        "malt_id": null,
        "multi_select": null,
        "number": null,
        "price": {
          "default": "2000"
        },
        "product_id": {
          "default": "HJUUIISS"
        },
        "sales_tags": {
          "default": [
            "best",
            "hot"
          ]
        },
        "select_one": null,
        "shouldbedeleted": null,
        "sku": "ddss-2",
        "sport": null,
        "test": null,
        "test-multi-select": null,
        "test-price": {},
        "title": {
          "en": "đ"
        }
      },
      "tags": {
        "en": [
          {
            "label": "test",
            "sid": "#tgb84ea"
          },
          {
            "label": "tags",
            "sid": "#tgc4915"
          }
        ],
        "fr": [
          {
            "label": "~ test",
            "sid": "#tgb84ea"
          },
          {
            "label": "~ tags",
            "sid": "#tgc4915"
          }
        ],
        "ru": [
          {
            "label": "~ test",
            "sid": "#tgb84ea"
          },
          {
            "label": "~ tags",
            "sid": "#tgc4915"
          }
        ]
      }
    }
  }
]