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.

Copy
Copied to your clipboard
// 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.

Copy
Copied to your clipboard
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.

Copy
Copied to your clipboard
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);

Was this helpful?

Yes

No