Enabling Digizuite Content for Miro using the Web SDK 2.0
Digizuite has recently introduced a new standard UI component to the market (referred to as Unified DAM Connector or UDC). The whole idea behind this post is “eating our own dog food” by getting some perspective on how customers and partners would work with our integration toolbox, and how easy it would be to introduce into any host application.
At Digizuite, we do use our components to build our own pre-built connectors, but it is equally important for us to provide the same toolbox to customers and partners. We won’t be able to have all connections, so having a strong toolbox for those are key.
What is this post?
I’ve enjoyed using Miro in the past and have seen it used for content and social media planning, to workflows and mood boards. It’s a great tool and one that would benefit from having direct access to DAM. The remainder of this post will hopefully show how easy this can be achieved.
The post will first introduce the overall benefits from an integration and illustrate it all with an Azure Static Web App, Angular, and Miro.
The whole purpose is to enable content across the omnichannel with little development effort by embedding DAM capabilities where needed the most.
The Unified DAM Connector allows users to locate any kind of content (approved, work in progress or shared within their user role) or simply receive it from a workflow when ready. The connector is embedded into your application of choice (has to allow iframes), and then content can seamlessly be brought in without ever leaving the application.
No more asking or waiting for content you need. No more downloading or uploading content from one system to another which leads to duplicated and outdated content across the organization.
If intrigued, then you can read more about it here. The remainder of the post will focus on an example of how to embed the Unified DAM Connector into Miro.
Integration Approach
We’ll be adding a new web-plugin in Miro which allows you to extend miro with a new tool. Basically it is an isolated iframe which use the Miro SDK to communicate between our application and Miro with PostMessages.
The Digizuite UDC uses a similar approach. When it is embedded, then it triggers post messages which we listen to and send to Miro via the SDK.
Creating the Angular Web App
First, create your new web app with the Angular:
ng new digizuite-for-miroIt will create the following structure:
For our little sample here, the following files will be changed:
src/index.html
src/app/app.component.html
src/app/app.component.tsFirst let us add the following to index.html:
<head>
......
<script src=”https://miro.com/app/static/sdk.1.1.js"></script>
</head>Let us then add the iframe (where we’ll embed the Digizuite UDC) to the app.component.html:
<!-- Container for the Digizuite for Miro Sample -->
<div class="container"> <!-- Actual iframe -->
<iframe
*ngIf="myUrl"
class="digizuite-iframe"
frameBorder="0"
[src]="myUrl">
</iframe></div>
**remember to add a bit of styling to the css class. I’ve just made the height 100vh.
The magic happens within the app.component.ts with the following logic. First, add this to your constructor to sanitize the URL (as a Digizuite customer you would of course have the right URL).
constructor(
private sanitizer: DomSanitizer
) {
this.myUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
‘https://my-embedded dam-url.com');
}You would need to initialize the Miro Web-plugin using the Miro SDK 2.0:
async ngOnInit() { const miro = window['miro'];
await miro.board.ui.on('icon:click', async () => {
await miro.board.ui.openPanel({ url: '', height: 720 });
});}
Now, we need to listen to things happening within the Digizuite UDC iframe. The iframe can send different messages but in this example we would only need to listen for Asset Messages (when a user clicks on an image, video or other asset they which to bring into Miro).
@HostListener(‘window:message’, [‘$event’])
onMessageReceived(event: any) { // If not from our expected origin then ignore
if(event.origin !== ‘https://my-embedded-dam-url.com') {
return;
} if (event?.data?.messageType) {
const message: any = event.data; if(message.messageType === ‘AssetMessage’) {
const asset = message.asset;
var asset = event.data.asset; if(message.assets && message.assets.length > 0) {
asset = event.data.assets[0];
} this.createMiroImage(asset);
}
}
}private async createMiroImage(asset: any) {
const miro = window[‘miro’]; if (!miro) {
return;
}if (
asset.extension.toLowerCase() === ‘jpg’ ||
asset.extension.toLowerCase() === ‘jpeg’ ||
asset.extension.toLowerCase() === ‘png’ ||
asset.extension.toLowerCase() === ‘psd’ ||
asset.extension.toLowerCase() === ‘indd’
) {
await miro.board.createImage(
{
title: asset.title,
url: asset.downloadUrl
}
);
} else {
console.log(‘Not supported’);
}
}
}
Deploy to Azure Static Web App
Not going into too much detail here, but make sure to have your new angular app on Github. Afterwards, simply create a static web app in Azure and connect it to your new repository. Keep in mind it will use Github Actions to deploy on new commits to the branch of your choosing.
Afterwards, it will simply deploy when new commits are pushed to main.
Adding it to Miro
First, go to account settings in Miro and find the following view. Here you can create a new app.
When created, all you need to do (since this is no API integration) is to add the URL to your Azure Static Web App.
Now when clicking the Digizuite for Miro app in the top bar, you would see the following:
That’s it! Now have an app in Miro which allows you benefit from all assets within your single source of truth.
Concluding Remarks
A total of 3 hours was spent on enabling the Digizuite Unified DAM Connector within Miro. This was greatly helped by an amazing SDK from Miro, which was well documented.
The Unified DAM Connector works well in this context where one needs assets on-demand. One learning here would be for us to add an option for the user, where they choose if they want to keep a direct URL link to the Digizuite DAM (so that on any updates, your asset would automatically be reflected in the board), or if they simply wish to upload that one asset into Miro and never see it change again.
But overall, it confirms how it easily it allows content to be enabled in third-party web applications without much effort, and even allows customization if needed.
Resources
- Digizuite Samples: https://github.com/Digizuite/embedded-ui-examples
- Miro Web-Plugin: https://developers.miro.com/docs/sdk
