Composable Tech Stack with Digizuite DAM and Contentful

How to compose your marketing stack with digital assets in Digizuite and web content in Contentful to provide great web experiences? This will show you how with a real example.

In my previous posts, I’ve talked about the importance of compelling and consistent content across all touchpoints. And how to enable it with a composable architecture consisting of the right building blocks.

It sounds fine and dandy, but how does it work in practice? In the remainder of this post, I will show a technical example where I create an app in Contentful CMS (Content Management System) with digital assets coming from Digizuite DAM (Digital Asset Management).

Why DAM and CMS?

Any website need compelling images and videos to capture the interest of our visitors. This is where DAM and CMS play perfectly together.

Digizuite DAM provides a single source of truth for all digital assets. All assets are created from here and then distributed to all channels on approval (not just CMS). On top, it provides great integration capabilities such as UI widgets that integrate into any platform for great user experience. But also the media processing power to get images and videos in the right renditions to perform on desktop, tablet and mobile.

Contentful CMS is headless and composable at the heart. It provides a platform for all of your content. No matter what requirements you would have for your website or commerce platform. The content can then be published and utilized from any digital channel from their amazing APIs.

The content from Contentful can then be combined with digital assets coming from Digizuite. For instance, Contentful provides the structure for your blogpost which has a title, description, body text but also the digital assets to make that blogpost come to life.

Integration Approach

We’ll be creating a new app for Contentful which allows users to find an asset in Digizuite (using filters, search or just navigating folders) and then select the asset in the right rendition.

Contentful has a great App Toolkit for helping us with this task. They even have @contentful/dam-app-base which enables easy but a great integration.

Digizuite has a Standard Embedded UI which can be iframed into any web platform and is a great fit for the framework provided by Contentful.

High-level architecture on Digizuite Embedded UI in Contentful.

Creating the App

First, we need to create a new app and install some dependencies. We simply follow the guide from Contentful.

// first create a contentful app
npx create-contentful-app --typescript

// then install the dam-app-base
npm install @contentful/dam-app-base

The app base provides an easy setup where you need to provide the implementation and then add it to the setup class as shown here.

setup({
  cta: CTA,
  name: 'Digizuite',
  logo: 'https://url-to-logo.com/logo.png',
  color: '#40D1F5',
  description:
    'Digizuite is a leading Digital Asset Management Platform.',
  parameterDefinitions: [
    {
      id: 'digizuiteMmUrl',
      type: 'Symbol',
      name: 'Digizuite MM URL',
      description:
        'Provide your media manager URL',
      default: "https://your-mm-url.com",
      required: true,
    },
  ],
  validateParameters: () => null,
  makeThumbnail, // Defines what thumbnail to show when asset is selected
  renderDialog, // Renders the Digizuite Embedded UI
  openDialog, // Opens the Digizuite Embedded UI with settings
  isDisabled: () => false,
});

We have the full example on GitHub in the Digizuite public example repo. See the whole implementation there.

When implementation is done, then you simply build the app with the following command.

npm run build

The above will output into the build folder. The output will be needed for the next part of the post.

Adding it to Contentful

Now the app must be added to Contentful which can be done by going to your account, clicking on apps and then ‘Create app’.

You will then see the below screen where you need to fill in all the correct information. Tick ‘Hosted by Contentful’ and then simply drag in the app output folder (where it says ‘drag and drop your app output here’) from your project (after having run the build command).

Now you are good to go and can check the results of your hard work.

1. Create a new content type:

2. Select JSON object as the field type

3. Select your new Digizuite DAM plugin under Apperance.

4. Then go under ‘Content’ and create it based on your new content type.

When clicking the ‘Select asset from Digizuite’ it will render the below Digizuite DAM UI from where you select.

Important is to notice that no physical files are stored in Contentful for this example. All assets are using a direct CDN accelerated URL digizuite which should give the performance and speed as you would expect.

Full Example

The below gif will show how the selection work (a simple example).

There is a lot more to the Digizuite Embedded UI such as changing metadata and (multi) focus point cropping but since it is not the topic of this post, then I will only share this little example below here for inspiration.

Focus point cropping with Digizuite Embedded UI

Concluding Remark

An integration between Contentful and Digizuite has been enabled in the above. Smooth process with the Contentful App Toolkit which makes creating the app a simple task.

The app toolkit together with the Digizuite Embedded UI creates a great integration where Contentful editors can now benefit from their Digizuite DAM.

In this example, everything is enabled using CDN URLs from Digizuite. So in case any asset is updated and approved within Digizuite, then these changes are automatically made available through these URLs. This provides fully centralized asset control and governance which is exactly what is expected from a DAM.
One addition would be to add metadata from Digizuite to the content in Contentful for SEO purposes. But this is a simple addition to the above.

Creation of assets can now happen centralized in the DAM. Receiving assets from photographers, studios and creatives which will eventually get approved and made accessible directly in Contentful without any further integration which should lead to more efficiency, consistency and control.

Resources

• Digizuite Samples: https://github.com/Digizuite/embedded-ui-examples
• Contentful App Framework: https://www.contentful.com/developers/docs/extensibility/app-framework/libraries/