studio-widget.js

// Replace these with your own cloud name and API key.
// You can find them on the API Keys page of the Cloudinary Console:
//   https://console.cloudinary.com/app/settings/api-keys
// Anyone using the widget needs access to this product environment.
// They're asked to sign in to Cloudinary only if they don't already have a Cloudinary session.
const cloudName = '<CLOUD_NAME>';
const apiKey = '<API_KEY>';

if (cloudName.startsWith('<') || apiKey.startsWith('<')) {
  document.getElementById('config-warning').hidden = false;
}

const widget = cloudinary.studioWidget({
  cloudName,
  apiKey,
  appendTo: '#widget-container',
  // Remove the comments below to try other feature configuration options.
  // For the full list, see:
  //   https://cloudinary.com/documentation/studio_widget_api_reference#feature_configuration
  featureConfig: {
    // startWithManualCrop: true, // open in manual crop mode
    // f_auto: true, // add f_auto to the delivery URL
    // q_auto: true, // add q_auto to the delivery URL
    // hideCloseButton: true, // hide the widget's own close button
  },
});

const container = document.getElementById('widget-container');

// Open the widget for the image entered in the form.
document.getElementById('open-form').addEventListener('submit', (event) => {
  event.preventDefault();
  const publicId = document.getElementById('public-id').value.trim();

  widget.update({ publicIds: [publicId] });
  // Discard the previous editing session, so earlier edits aren't applied to this image.
  widget.show({ resetState: true });
  container.classList.add('open');
});

// Receive the delivery URL when the user clicks Insert.
widget.on('insert', (deliveryUrl) => {
  document.getElementById('result-image').src = deliveryUrl;
  document.getElementById('result-url').textContent = deliveryUrl;
  document.getElementById('result').hidden = false;
  widget.hide();
  container.classList.remove('open');
});

widget.on('close', () => {
  container.classList.remove('open');
});