All Collections
Content Management
Storyblok integration for Frontify
Storyblok integration for Frontify

Step by Step guide to use the Frontify Integration

Updated over a week ago

Before using the integration, you need to install it by following this guide.

Once installed, you can navigate to your Storyblok Space > Block Library and either create a new Universal Block > Field Plugin or add it when working directly into your Content pages.

Under Block Library > add to an existing block or create a new block

Under Content > Pages > Fields

Add a new field, set the Field Type to Plugin, and set the Custom Type to frontify and configure the options:

  • Domain: The domain of your Frontify portal to which the users must authenticate. For instance, If omitted, the user is free to specify any portal themselves.

  • allowMultiSelect (optional Field Plugin Options). This option allows the user to select multiple Assets at once. If set to true, users can choose multiple assets. If set to any other value (or omitted), the user can only select a single asset.

  • Asset extension types (optional Field Plugin Options). You can pass a filter to the Frontify App to tell it what asset extensions are allowed separated by a comma, for instance, jpg,png,gif
    List of available asset extension types:
    - Images: ai, bmp, dng, eps, git, heif, ico, jpeg, jpg, png, psd, svg, tif, tiff, webp
    - Videos: avi, flv, m4v, mkv, mov, mp4, mpg, mts, webm, wmv
    - Audio: aac, ac3, aif, aifc, aiff, flac, m4a, m4r, ogg, wav
    - Documents: doc, docx, dotx, pdf, potx, ppt, pptx, xls, xlsx, xltx

Once the plugin is created or added to a Block, it will be available within Storyblok Content. The first time, the user must authenticate for the Frontify Finder (Asset Picker) to pop up.

Frontify Asset Picker added; press the arrows for the widget to pop and authenticate

Navigate through the brands, Libraries, or Projects to find the assets to add

In order for the assets to render, leverage as a starting point. You’ll typically need your Space, your Space access token, and create a Frontify.js component. The Storyblok team can support you if you have questions.

Did this answer your question?