Blank Canvas provides a fairly flexible way to display the information ingested in Visual UGC and allows us to create unique widgets. Sometimes the desired outcome is not to display the actual user generated content, but to use the ingested items count to unlock discounts (or any sort of information) when those numbers hit some sort of thresholds. This was the case of one of our clients: they wanted to create a progress bar and unlock five offers in a particular event.
The Common Approach
Usually this is achieved by creating a custom application that uses the API to retrieve a summary from within a certain term or filter. This has a set of cons:
To host a custom app implies more work and higher costs.
It may imply using a database.
The developer uses only the API and doesn’t leverage the widgets editor.
Blank Canvas approach
Advantages:
Faster development
No hosting needed
Steps
The first step may look like a workaround but it is valid still and reflects the flexibility of the platform. By default, Nosto's UGC provides the UGC data as the pieces of information to render. This is not what we need for this particular case, so we can ignore/remove this callback all together: Stackla.loadTilesByFilter(function (tiles) {…});
Instead, we will use our own API call:
That particular endpoint refers to Nosto's UGC API: https://api.Stackla.com/api/filters/123456/summaries?aggregated_by=default&stack={your_stack}&access_token={your_access_token}
It was proxied with AWS' API Gateway and cached with AWS' Cloud Front. This was done in order to prevent Nosto's UGC API to be hit more than 450 times during the 15 minutes time window. That method of proxing is reliable, easy to set up and cheap.
The returned summary needs to be parsed/manipulated and then we can invoke the following method:
Stackla.render({...});
Where the parameter is a valid JSON element.
The “layout” provided by the blank canvas framework will be rendered with the provided information. Please refer to https://mustache.github.io/ to understand about the templating language.
The CSS can now be edited to style the widget and make it responsive and nice-looking.
If there are some resources, we can use the media library provided by Stackla. By doing so, we avoid using a third party system to host the images, fonts or any file we may need.
Conclusion
The development process was quick and straightforward, even though this was the first time we used the Blank Canvas Widget in this way.
