Quick actions

The openQuickAction() API allows you to embed the quick actions component in your application.

openQuickAction()

This method launches an iframe in your application for your user to perform a quick action.

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

QuickActionParams

openQuickAction() takes an object QuickActionParams with 4 properties.

Note: inputParams.exportOptions determines which export buttons are exposed to the user once the action is complete, and must be defined with at least an empty array. If given an empty array, the "Download" button will be surfaced as an export option.

QuickActionId

This ID is associated with the quick action you want to surface to your user.

QuickActionInputParams

Allows you to specify an input asset and export options for the quick actions modal.

Example

Copy
ccEverywhere.openQuickAction(
    {
        id: 'image-resize',
        inputParams: {
            // passing a starting asset is not available for video quick actions
            asset: {
                data: <ENCODED_IMAGE>, 
                dataType: 'base64', 
                type: 'image'
            }, 
            exportOptions: []
        }
    }
)
Copied to your clipboard
ccEverywhere.openQuickAction(
    {
        id: 'image-resize',
        inputParams: {
            // passing a starting asset is not available for video quick actions
            asset: {
                data: <ENCODED_IMAGE>, 
                dataType: 'base64', 
                type: 'image'
            }, 
            exportOptions: []
        }
    }
)

ExportOption

Allows you to define export buttons for a quick action.

This is an array of ExportButton and/or ExportButtonGroup type objects. When specified with an empty array, a "Download" button will still be generated for the user once the action is completed.

ExportButton

There are two types of export buttons: NativeExportButton and CustomExportButton.

NativeExportButton

This is used to render a native button once the quick action has finished. You will not be notified when the button is clicked. If you want to be notified via a custom click handler, use CustomExportButton.

CustomExportButton

This is used to render a custom button once the Quick Action has finished. Use this if you want to have a custom button click handler.

target

The target determines the type of export.

• 'Editor': Opens asset in an full editor component
• 'Download': Downloads the asset to user's machine
• 'Host': Targets host app - id is passed in onPublish callback along with asset data

For NativeExportButton objects, label defaults to Customize when targeting the full editor and Download when the target is specified as 'Download;.

Example

Copy
const exportOptions = [
    {
        // Customize further in the full 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 callbacks = {
    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
const exportOptions = [
    {
        // Customize further in the full 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 callbacks = {
    onCancel: () => {},
    onPublish: (publishParams) => {
        if(publishParams.exportButtonId=="save-to-host-app"){
            //customize functionality here
        }
    },
    onError: (err) => {
        console.error('Error received is', err.toString())
    }
}

ExportButtonGroup

This is used to render a group of buttons which will be shown as a drop down under a parent button.

Last updated 11/30/2023

Was this helpful?

Yes

No