Skip to content

UI Events

In this example, we will show you how to configure the CreativeEditor SDK.

Callbacks

The CE.SDK offers several different callbacks that are triggered by user interaction. Follow this guide to see some examples with descriptions.

callbacks: {
  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 115 or newer\n- Apple Safari 15.6 or newer\n- Microsoft Edge 114 or newer\n- Google Chrome 114 or newer'
    );
  },
  onBack: () => {
    window.alert('Back callback!');
  },
  onClose: () => {
    window.alert('Close callback!');
  },
  onSave: (scene) => {
    window.alert('Save callback!');
    console.info(scene);
  },
  onDownload: (scene) => {
    window.alert('Download callback!');
    console.info(scene);
  },
  onLoad: () => {
    window.alert('Load callback!');
    const scene = '...'; // Fill with sene
    return 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);
  }
},

In this example, all corresponding navigational elements in the user interface are enabled so that the callbacks can be tested.

navigation: {
  action: {
    close: true,
    back: true,
    save: true,
    download: true,
    load: true,
    export: true
  }
}

General

  • onUnsupportedBrowser: () => void will be triggered when the browser version or type is unsupported. If this handle is not configured, CE.SDK shows a native window.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.
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 115 or newer\n- Apple Safari 15.6 or newer\n- Microsoft Edge 114 or newer\n- Google Chrome 114 or newer'
  );
},
  • onBack: () => void | Promise<void> allows the registration of a function that is called when the back action is triggered by the user. When a Promise<void> is returned, a loading indicator will be shown on the ‘Back’-button until the Promise resolves.
onBack: () => {
  window.alert('Back callback!');
},
  • onClose: () => void | Promise<void> allows the registration of a function that is called when the close action is triggered by the user. When a Promise<void> is returned, a loading indicator will be shown on the ‘Close’-button until the Promise resolves.
onClose: () => {
  window.alert('Close callback!');
},

Scene Load & Save

  • onSave: (scene: string) => Promise<void> allows the registration of a function that is called when the save button is triggered by the user. It contains the information of the current scene as a string that can be stored and reloaded at a later time. The user flow is continued when the returned Promise<void> is resolved.
onSave: (scene) => {
  window.alert('Save callback!');
  console.info(scene);
},
onDownload: (scene) => {
  window.alert('Download callback!');
  console.info(scene);
},
  • onDownload: 'download' | (scene: string) => Promise<void> allows the registration of a function that is called when the download button is triggered by the user. It contains the information of the current scene as a string and thus is similar to the onSave callback. The purpose here is to download the scene to the client and is most useful in developer settings. If the callback is set to the string download instead of a function, the current scene is automatically downloaded.
onDownload: (scene) => {
  window.alert('Download callback!');
  console.info(scene);
},
  • onLoad: () => Promise<string> allows the registration of a function that is called when the load button is triggered by the user. It returns a Promise<string> with the scene as string as payload.
onLoad: () => {
  window.alert('Load callback!');
  const scene = '...'; // Fill with sene
  return Promise.resolve(scene);
},

Export & Upload

  • onExport: (blobs: Blob[], options: ExportOptions) => void allows the registration of a function that is called when the export button is triggered by the user. It’ll receive an array of Blob objects, one for each page that was selected for export. ExportOptions contains the mimeType, quality settings and pages that where selected for export. See Exporting Pages for details.
onExport: (blobs, options) => {
  window.alert('Export callback!');
  console.info(options.mimeType);
  console.info(options.jpegQuality);
  console.info(options.pages);
  return Promise.resolve();
},
  • onUpload: (file: File, onProgress: (progress: number) => void, context: UploadCallbackContext) => Promise<AssetDefinition> allows the registration of a function that is called when the upload button is triggered by the user. The file parameter contains the data being uploaded via the upload dialog. The onProgress callback can be used to indicate progress to the UI, where a number of 1.0 equals 100 percent completion. The callback must return a Promise that must contain a unique id: string, the uri: string of the uploaded data, and the thumbUri: string. See Uploading Images for details.
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);
}

Full Code

Here’s the full code:

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets',
  callbacks: {
    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 115 or newer\n- Apple Safari 15.6 or newer\n- Microsoft Edge 114 or newer\n- Google Chrome 114 or newer',
      );
    },
    onBack: () => {
      window.alert('Back callback!');
    },
    onClose: () => {
      window.alert('Close callback!');
    },
    onSave: scene => {
      window.alert('Save callback!');
      console.info(scene);
    },
    onDownload: scene => {
      window.alert('Download callback!');
      console.info(scene);
    },
    onLoad: () => {
      window.alert('Load callback!');
      const scene = '...'; // Fill with sene
      return 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,
          download: true,
          load: true,
          export: true,
        },
      },
    },
  },
};


CreativeEditorSDK.create('#cesdk_container', config).then(async instance => {
  // Do something with the instance of CreativeEditor SDK, for example:
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});