Quick Actions Reference

openQuickAction()

This method launches an iframe to perform a Quick Action.

openQuickAction(QuickActionParams) 
Copied to your clipboard
openQuickAction(QuickActionParams)

QuickActionParams

openQuickAction() takes an object QuickActionParams with 4 properties.

Property	Type	Description
id	QuickActionId	ID for associated Quick Action
inputParams	QuickActionInputParams	Asset to load (image only), and export button options
modalParams	ModalParams	Specify Adobe Express editor modal dimensions
outputParams	CCXOutputParams	Specify output type and file type of created project
callbacks	Callbacks	onCancel, onPublish, onError, onLoad, onLoadStart, onPublishStart

Besides id and inputParams.exportOptions, the rest are optional fields.

QuickActionId

Allows you to select a Image or Video Quick Action.

Quick Action	QuickActionId	Type
Crop Image	'image-crop'	Image
Convert to JPG	'convert-to-jpg'	Image
Convert to PNG	'convert-to-png'	Image
Resize Image	'image-resize'	Image
Remove Background	'remove-background'	Image
Change Speed	'change-speed'	Video
Convert to GIF	'convert-to-gif'	Video
Convert to MP4	'convert-to-mp4'	Video
Crop Video	'crop-video'	Video
Merge Video	'merge-video'	Video
Resize Video	'resize-video'	Video
Reverse Video	'reverse-video'	Video
Trim Video	'trim-video'	Video

QuickActionInputParams

Allows you to specify the asset and export buttons you want to perform a Quick Action with.

Property	Type	Description
asset	Asset	Image you want to load into QA modal
exportOptions	ExportOption	Customize export buttons

exportOptions is required to be defined with at least an empty array.

Example

ccEverywhere.openQuickAction(
    {
        id: 'image-resize',
        inputParams:{
            exportOptions: []
        }
    }
)
Copied to your clipboard
1ccEverywhere.openQuickAction(
2    {
3        id: 'image-resize',
4        inputParams:{
5            exportOptions: []
6        }
7    }
8)

ExportOption

Allows you to define export buttons for a Quick Action. Must be specified with at least an empty array. When specified with an empty array, a "Download" button will still be generated for the user once the Quick Action is completed.

Property	Value	Description
target	'Editor'/'Download'/'Host'	Determines what type of export
id	string	See `imageCallbacks` in example below
label	string	Overwrite default label name
variant	'cta'/'primary'/'secondary'	Defines the style of a button
optionType	'button'	Determines type of export option
buttonType	'native'/'custom'	Type of export button

target

target = 'Editor' - exports asset to a Adobe Express editor component for further customization
target = 'Download' - downloads asset to user's machine
target = 'Host' - customizable action in onPublish callback

label

target = 'Editor' => label defaults to "Customize"
target = 'Download' => label displays "Download"

Example

const exportOptions = [
    {
        // Customize in Adobe Express editor
        target: 'Editor',
        variant: 'cta',
        optionType: 'button',
        buttonType: 'native'
    },
    {
        target: 'Download',
        variant: 'primary',
        optionType: 'button',
        buttonType: 'native'
    },
    {
        target: 'Host',
        id: 'save-to-host-app',
        label: 'Embed in app',
        variant: 'cta',
        optionType: 'button',
        buttonType: 'custom'
    }
];
const imageCallbacks = {
      onCancel: () => {},
      onPublish: (publishParams) => {
          if(publishParams.exportButtonId=="save-to-host-app"){
              //customize functionality here
          }
      },
      onError: (err) => {
          console.error('Error received is', err.toString())
      }
}
Copied to your clipboard
1const exportOptions = [
2    {
3        // Customize in Adobe Express editor
4        target: 'Editor',
5        variant: 'cta',
6        optionType: 'button',
7        buttonType: 'native'
8    },
9    {
10        target: 'Download',
11        variant: 'primary',
12        optionType: 'button',
13        buttonType: 'native'
14    },
15    {
16        target: 'Host',
17        id: 'save-to-host-app',
18        label: 'Embed in app',
19        variant: 'cta',
20        optionType: 'button',
21        buttonType: 'custom'
22    }
23];
24const imageCallbacks = {
25      onCancel: () => {},
26      onPublish: (publishParams) => {
27          if(publishParams.exportButtonId=="save-to-host-app"){
28              //customize functionality here
29          }
30      },
31      onError: (err) => {
32          console.error('Error received is', err.toString())
33      }
34}