Language:
Configuring Callbacks
In this example, we will show you how to configure the CreativeEditor SDK.
Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.
Callbacks#
The CE.SDK offers several different callbacks that are triggered by user interaction. Follow this guide to see some examples with descriptions.
In this example, all corresponding navigational elements in the user interface are enabled so that the callbacks can be tested.
General#
log: (message: string, level: LogLevel) => void
will be triggered whenever CE.SDK wants to log any message. LogLevel is eitherInfo
,Warning
, orError
.
onUnsupportedBrowser: () => void
will be triggered when the browser version or type is unsupported. If this handle is not configured, CE.SDK shows a nativewindow.alert
explaining that the current browser is unsupported and showing the list of supported ones. Alternatively a [separate method can be imported and used to check browser support](../shared/_partials/integrate-with-vanilla-js.
Navigation#
onBack: () => void | Promise<void>
allows the registration of a function that is called when theback
action is triggered by the user. When aPromise<void>
is returned, a loading indicator will be shown on the 'Back'-button until the Promise resolves.
onClose: () => void | Promise<void>
allows the registration of a function that is called when theclose
action is triggered by the user. When aPromise<void>
is returned, a loading indicator will be shown on the 'Close'-button until the Promise resolves.
Scene Load & Save#
onSave: (scene: string) => Promise<void>
allows the registration of a function that is called when thesave
button is triggered by the user. It contains the information of the currentscene
as a string that can be stored and reloaded at a later time. The user flow is continued when the returnedPromise<void>
is resolved.
onLoad: () => Promise<string>
allows the registration of a function that is called when theload
button is triggered by the user. It returns aPromise<string>
with thescene
asstring
as payload.
Export & Upload#
onExport: (blobs: Blob[], options: ExportOptions) => void
allows the registration of a function that is called when theexport
button is triggered by the user. It'll receive an array ofBlob
objects, one for each page that was selected for export.ExportOptions
contains themimeType
,quality
settings andpages
that where selected for export. See Exporting Pages for details.
onUpload: (file: File, onProgress: (progress: number) => void) => Promise<AssetDefinition>
allows the registration of a function that is called when theupload
button is triggered by the user. Thefile
parameter contains the data being uploaded via the upload dialog. TheonProgress
callback can be used to indicate progress to the UI, where a number of1.0
equals 100 percent completion. The callback must return a Promise that must contain a uniqueid: string
, theuri: string
of the uploaded data, and thethumbUri: string
. See Uploading Images for details.
File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.11.1/cesdk.umd.js';let config = {baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.11.1/assets',callbacks: {log: (message, logLevel) => {switch (logLevel) {case 'Info':console.info(message);break;case 'Warning':console.warn(message);break;case 'Error':console.error(message);break;default:console.log(message);}},onUnsupportedBrowser: () => {/* This is the default window alert which will be shown in case an unsupported* browser tries to run CE.SDK */window.alert('Your current browser is not supported.\nPlease use one of the following:\n\n- Mozilla Firefox 86 or newer\n- Apple Safari 14.1 or newer\n- Microsoft Edge 88 or newer\n- Google Chrome 88 or newer');},onBack: () => {window.alert('Back callback!');},onClose: () => {window.alert('Close callback!');},onSave: (scene) => {window.alert('Save callback!');console.info(scene);},onLoad: () => {window.alert('Load callback!');let scene = '...'; // Fill with senereturn Promise.resolve(scene);},onExport: (blobs, options) => {window.alert('Export callback!');console.info(options.mimeType);console.info(options.jpegQuality);console.info(options.pages);return Promise.resolve();},onUpload: (file, onProgress) => {window.alert('Upload callback!');const newImage = {id: 'exampleImageIdentifier',meta: {uri: 'https://YOURSERVER/images/file.jpg',thumbUri: 'https://YOURSERVER/images/thumb.jpg'}};return Promise.resolve(newImage);}},ui: {elements: {navigation: {action: {close: true,back: true,save: true,load: true,export: true}}}}};CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {/** do something with the instance of CreativeEditor SDK **/});