Cloudinary Blog

Making UGC Shoppable With Cloudinary

Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

However, without the right tools, it can be frustrating to add user-generated videos to an e-commerce site. On top of that, someone must review each and every video to ensure that the content is safe and brand-friendly—a nontrivial task. Cloudinary automates the process of accepting and even moderating content from your users, saving you time and money.

Cloudinary unleashes the power of UGC through interactive shoppable videos. To begin with, it's a breeze to upload content to Cloudinary, after which you can moderate it automatically. Plus, you can create shoppable videos and enable visitors to make purchases right from Cloudinary’s video player embedded on your site, ultimately making it easier—and more likely—for them to buy from you.

This article shows you how to easily set up moderated and shoppable user-generated videos on your e-commerce site with Cloudinary. In terms of programming technology, all you need is HTML, JavaScript, and Ruby.

Getting Started

Before you can start accepting UGC, you need a site with which users can interact. For this example, let’s start with a stripped-down version of a W3Schools template. Without images, it looks like this:

e-commerce page

Accepting UGC

Accepting UGC can be as easy as pasting in the code for the Cloudinary upload widget. We’ve done all the heavy lifting for you to ensure a smooth sail for your user uploads. You can add that handy user interface to almost any site by providing only minimal information with JavaScript.

Let’s say you want users to be able to directly upload to your e-commerce site videos that show the unboxing process of your products. The most obvious thing to do first is to add a button to trigger the upload widget. The code below places the button—however unpolished it might look right now—in the navbar at the top of the page:

<button id="upload_widget" class="cloudinary-button">Upload files</button>

Right now, the button merely acts as a placeholder. To connect it with Cloudinary, add the script of the Cloudinary upload widget and bind the button click to a function that triggers the widget to your HTML, as follows:

Copy to clipboard
<script src="" type="text/javascript"></script>  

<script type="text/javascript">  
var myWidget = cloudinary.createUploadWidget({
  cloudName: 'my_cloud_name', 
  uploadPreset: 'my_preset'}, (error, result) => { 
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ',; 

document.getElementById("upload_widget").addEventListener("click", function(){;
  }, false);

With the script styles defined, your button now looks like this:

Upload button

Clicking the button causes the modal to appear, but the widget would fail to load. To fix that, connect the widget to your Cloudinary account.

If you haven’t created a Cloudinary account yet, do that now—it’s free! Enjoy a generous use limit with no expiration date.

Log in to your account, click the Settings icon at the top, and then click the Upload tab. Scroll down to Upload presets.

First, create a new upload preset by clicking Add upload preset.

Add upload preset

This will take you to a new page, where you can edit the details of the preset. You can change the name if you like, but be sure to set Signing Mode to Unsigned, as shown in the screenshot above.

You also have the option to enable automated content moderation. If you click Upload Control on the side panel, you can select your moderation add-on of choice. We’ll go more into detail later in this article, but for now, you can just select Amazon Rekognition and leave the default values.

Upload control

Click Save, and you’ll be taken back to the page that indexes all your upload presets. Next, copy the name of the unsigned upload preset that you just created. This wraps up our work in the Cloudinary console, so let’s head back to our codebase.

In the script you added earlier, create an upload widget with this code:

Copy to clipboard
var myWidget = cloudinary.createUploadWidget({
  cloudName: 'my_cloud_name', 
  uploadPreset: 'my_preset'}, (error, result) => { 
    if (!error && result && result.event === "success") { 
      console.log('Done! Here is the image info: ',; 

Be sure to replace the variables my_cloud_name and my_preset with your account’s cloud and preset values, which are displayed on the dashboard. Afterward, simplify the error logging. The code would then read like this:

Copy to clipboard
var myWidget = cloudinary.createUploadWidget({
  cloudName: 'my_cloud_name', uploadPreset: 'my_preset'}, 
  (error, result) => { console.log(error, result) })

Note that configuring your upload widget to accept unsigned uploads as described above is not ideal for production applications. Bad actors can inspect your page and programmatically upload content to your Cloudinary account with your cloudName and uploadPreset variables, bypassing the settings you might have in the upload widget for content types or simply overloading your storage.

To mitigate that risk, set up signed uploads instead to allow only authorized ones. Rather than revealing the uploadPreset variable, signed uploads use a combination of a public API key and a unique identifier as an upload signature. For details on the configuration procedure, see the Cloudinary documentation.

Moderating UGC

The internet can be a scary place, and chances are that you don’t want to host potentially offensive or harmful content. However, manually checking UGC, especially video, could be a cumbersome, astronomical task. Fortunately, Cloudinary can automatically moderate UGC for you, filtering inappropriate content and malicious files, such as computer viruses.

Toward that end, Cloudinary leverages Amazon Web Services (AWS) Rekognition as an add-on, which, by means of deep learning and with only minimal configuration on your part, analyzes videos within your application or website. Follow these steps to set up the AWS Rekognition add-on:

  1. Click the Add-ons tab in the Cloudinary console:


  2. Register for the add-on tier you desire. The free tier offers 50 free moderations per month.


Earlier, we managed moderation in the Cloudinary console when we created the upload widget. This is often sufficient, but Cloudinary also offers the ability to do this sensitive and potentially custom logic on the server side. Thanks to Cloudinary’s SDKs for all major frameworks, this a cinch to do.

Once you’ve installed the appropriate SDK, uploading to Cloudinary from your server-side code takes only a few codelines, such as the following in Ruby:

Copy to clipboard
  :resource_type => "video", 
  :moderation => "aws_rek_video")

This code uploads a file called my_file.mp4 to Cloudinary and specifies AWS Rekognition as the moderation provider. You can also identify content types and confidence levels to customize your moderation setup, as explained in the documentation.

Because processing video is resource intensive, moderation takes place asynchronously. Upon completion, the Rekognition add-on sends a JSON response, which your business logic can then parse and decide what to do in case of potentially offensive UGC.

Making UGC Shoppable

Gratifyingly, shoppable videos are included in Cloudinary’s standard video-player package, meaning that you can share videos and tag sections with links to products for sale. As an example, see the shopping cart icon in the top-right corner of the video below of a woman wearing sunglasses.

Shoppable video

Visitors interested in something they see on the screen can click the shopping cart icon. Let’s say instead of the sunglasses, the handbag catches someone’s eye. With a click on the icon, the visitor would see the product listings along with the related images:

Shoppable video

A single click on a product would send visitors to the configured product link, where they can make purchases.

After embedding the Cloudinary video player, you can configure it for shoppable video with the following code:

Copy to clipboard
shoppable: {
    startState: "openOnPlay",
    autoClose: 2,
    showPostPlayOverlay: true,
    width: "15%",
    bannerMsg: "Start shopping for your outfit",
    transformation: {
    quality: "auto:eco",
    fetch_format: "auto",
    crop: "pad",
    aspect_ratio: "1"
    products: [ /*products array*/ ]

The products array tells the video player what products to link to and where to highlight them in the video. For details on the procedure, see the documentation.

Enhancing Content With Cloudinary

The year 2020, which saw a meteoric surge in online purchases due to the pandemic-induced restrictions, proved that e-commerce is here to stay. As explosive growth bolsters this market, UGC helps your products stand out.

From unboxing to lifestyle, your customers’ videos are a valuable marketing multiplier for you. Besides enabling you to accept them with a user- and developer-friendly upload tool, Cloudinary also saves you time and ensures your content’s legitimacy with automatic moderation through an add-on. Above all, with Cloudinary, you can display UGC in a shoppable format, maximizing the UGC’s effectiveness in generating sales.

Doubtless, your site stands to benefit from one or all of Cloudinary’s handy tools, which help you enhance user experience as your audience browses and uploads video, enjoys brand-friendly content, shops right from your videos, and engages with your site. Do sign up to try Cloudinary’s tools—for free.

Recent Blog Posts

The Pros and Cons of AVIF for Websites

AVIF is a 2019 spinoff from the AV1 video format developed by the Alliance for Open Media (AOM), whose members include Amazon, Apple, ARM, Facebook, Google, Huawei, Mozilla, Microsoft, Netflix, and Intel. As an open-source and royalty-free video codec, AVIF delivers much higher compression rates than the older image codecs like JPEG and WebP, and is on par with the brand-new JPEG-XL format, which does not work on any browser yet.

Read more
Get Your Media Moving Faster with Cloudinary’s Media Optimizer

So, your boss comes to you in a panic: he's just heard about Google's Core Web Vitals initiative and needs you to optimize the company website right now! "No problem," you say, hiding your fear that it's not something that can be done overnight. Just taking the first metric, Largest Contentful Paint (LCP), how can you possibly identify all the large elements - most likely images or video posters - of the many hundreds of pages that make up your site? There are already thousands of high-resolution (read massive) media files stored away, which marketing could use any time. How are you going to make sure they're all compressed to a size small enough to be delivered within the threshold? Not to mention all the new images and videos that will be created over time...

Read more
How to Tap Into the Value of User-Generated Content (UGC)

User-generated content (UGC) took off with, first of all, the advent of the internet and, subsequently, social networks. Everyday consumers were given keys to the kingdom, so to speak, so that they, too, could compose and post content, simultaneously engaging with others online. Twitter, Facebook, Instagram, Snapchat, TikTok—the networks through which we can create and publish content have grown exponentially, and brands are becoming aware of the benefits of tapping into the gold mines offered by those networks.

Read more
Identifying Countries by IP Address in Columnar Databases Through SQL

Cloudinary reaps a myriad of open web traffic, from ad networks to e-commerce sites. Our Data Science team is dedicated to analyzing the data for use internally and externally.

A glance at any General Data Protection Regulation (GDPR) article would reveal that—unlike Android device IDs (AID), through which users can reset their web address—keeping user identifiers, such as Internal Protocol (IP) and Media Access Control (MAC) addresses, as well as International Mobile Equipment Identity (IMEI), violates privacy. As a solution, you can discard all privacy identifications or make them visible to users for reset.

Read more
Digital-First Asset Management Explained

As the world changes, so does technology. I don’t need to name more than a handful of antiquated technologies before you nod in agreement: floppy disks, Walkmans, phone booths, VHS tapes, each of which have been phased out or rendered useless by new solutions that meet the same need but much more effectively.

Read more