Skip to main content
Unlayer Docs
Version: Latest

Events & Callbacks

Editor Ready​

This event is called when the editor is ready for use. It waits for custom js, css and fonts to be fully loaded.

unlayer.addEventListener('editor:ready', function () {
  console.log('editor:ready');
});

Design Loaded​

This event is called when your design is loaded in the editor.

unlayer.addEventListener('design:loaded', function (data) {
  // Design is loaded
  var json = data.design; // design json
});

Design Updated​

This event is called when the design changes in the editor. This can be used to set up auto saving.

unlayer.addEventListener('design:updated', function (data) {
  // Design is updated by the user
  var type = data.type; // body, row, content
  var item = data.item;
  var changes = data.changes;
  console.log('design:updated', type, item, changes);
});

This event is also triggered while text is being edited in the text editor. You can customize the text editor's settings to optimize performance. Learn More

Image Uploaded​

This event is called when an image is uploaded by the user.

unlayer.addEventListener('image:uploaded', function (data) {
  var image = data.image;
  var url = image.url;
  var width = image.width;
  var height = image.height;
});

Inbox Preview Viewed​

This event fires after a completed Inbox Preview screenshot becomes visible to the user. It includes whether the editor selected the screenshot automatically or the user opened it from the gallery or navigation controls.

unlayer.addEventListener('inboxPreview:viewed', function (data) {
  var runId = data.runId;
  var endUserId = data.endUserId;
  var clientId = data.clientId;
  var viewSource = data.viewSource;
  var autoSelected = data.autoSelected;
});

Use the runId and clientId pair to count unique viewed screenshots. See Inbox Previews for the complete payload and reporting guidance.