Kentico Kontent

Filerobot Media Asset Widget Custom Element in Kontent CMS

1) Have a Kontent CMS setup.

2) Add custom element

Content model (left hand side) > Create new > Custom element (right hand side). You will then have the below view.

Hosted code URL is where the Custom Element's code (as a Web App) is hosted. Scaleflex's Kontent-FMAW Custom Element Web App is hosted at https://cdn.scaleflex.it/plugins/filerobot-kontent/filerobot-custom-element.html?func=proxy

Put the above URL into Hosted code URL

Parameters are the information that Kontent-FMAW needs to connect to your Filerobot Library. See below:

{

"token": "your_token",

"sec_tmp": "your_security_template",

"dir": "your_base_directory"

}

note: "dir" element is optional, by default will go to the root folder of your library. Do not add "/" at the start & end of the directory string.

3) Create new content with this Kontent-FMAW Custom Element

Content & asset (left hand side) > Create new > Chose type: FMAW. Chose and add some images, publish. You will then have the below view.

The images below are the images added in from FMAW into a Kontent content-item.
They are added by Filerobot-URL.

Previewing

Tutorial: https://kontent.ai/learn/tutorials/develop-apps/build-strong-foundation/set-up-preview/

Go to Settings > API Keys. For this, you will definitely need your Project ID. You may also need your API Key (depends on what you want to do, but for simple things Project ID is enough).

Write a client app that utilizes the Delivery API

Recall that Kontent have 3 set of APIs that you can interact with

Delivery APIs in plain HTTPS form can be downloaded from https://kontent.ai/learn/tutorials/develop-apps/get-started/postman-collection/ and imported into POSTMAN

For the 3 content items that comes out of the box, Kontent already have an example client app, which we can imitate.

• This example app was made by using React JS https://github.com/Kentico/kontent-sample-app-react

• Hosted on Github Pages: [https://kentico.github.io/kontent-sample-app-preview-react/{rest of the URL}](https://kentico.github.io/kontent-sample-app-preview-react/{rest of the URL})

After writing and hosting your client app, go to Settings > Preview URLs and define your Preview URL formats.

See how Kontent defined their preview URLS for their example app

Codename, URLSlug & ItemId are obtained as follows:

Once you done all the above, you can preview by clicking Preview

For more support: https://kontent.ai/learn/tutorials/develop-apps/build-strong-foundation/set-up-preview/ , button right chat bubble.