Quick actions

Quick actions gives your users access to powerful, one-click image and video editing tools. Try them for yourself in our demo app.

Adobe-powered quick actions take the most complex tasks from our flagship apps -- like remove background -- and turns them into one-click tasks. The quick actions component is embedded onto your application as an iframe.

The quickAction class contains all the methods for launching quick action editors.

// Initialize the SDK first
const { quickAction } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

quickAction.convertToJPEG(docConfig, appConfig, exportConfig, containerConfig);

Each quick action has its own method, that always accepts docConfig, appConfig, exportConfig, containerConfig as optional parameters, and return void. Here are the Image quick actions:

• convertToJPEG()
• convertToPNG()
• convertToSVG()
• cropImage()
• resizeImage()
• removeBackground()
• generateQRCode()

Here are the methods for video quick actions:

• convertToGIF()
• convertToMP4()
• cropVideo()
• mergeVideos()
• resizeVideo()
• trimVideo()
• animateFromAudio()
• captionVideo()

Parameters

All the properties are optional.

Example: Default export options

When no asset is passed as an input when a quick action is invoked, the user will be asked to browse/upload an image once the modal is open. Default export options will be surfaced to the user.

const { quickAction } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});
quickAction.cropImage();

Example: Input asset, custom export options

The quickAction APIs can take an image asset and custom export options as input.

const { quickAction } = await window.CCEverywhere.initialize({
  clientId: <CLIENT_ID>,
  appName: <APP_NAME>,
});

const docConfig = {
  asset: {
    data: base64Asset,
    dataType: "base64",
    type: "image",
  },
};

const exportOptions = [
  {
    id: "edit-in-express",
    label: "Edit in Adobe Express",
    action: {
      target: "express",
    },
    style: {
      uiType: "button",
    },
  },
  {
    id: "download",
    label: "Download",
    action: {
      target: "download",
    },
    style: {
      uiType: "button",
    },
  },
  {
    id: "save-modified-asset",
    label: "Save image",
    action: {
      target: "publish",
    },
    style: {
      uiType: "button",
    },
  },
];

quickAction.removeBackground(docConfig, exportOptions);