Skip to main content

Events

You can attach and subscribe to events in order to run logic in your app when something happens in StorifyMe Snaps Editor. This way, you can:

  • show loading animation while editor loads
  • react on any error,
  • intercept snap saved and handle logic locally,
  • and many other use cases

Example code​

The best way to attach listeners is by overriding native StorifyMe events:

<script type="text/javascript" 
  src="https://cdn.storifyme.com/static/snaps-web-sdk/snaps-web-sdk-v1.min.js">
</script>

<!-- Somewhere in the code where you want the editor to appear -->
<storifyme-snaps-sdk 
  account="<ACCOUNT_ID>" 
  apiKey="<API_KEY>" 
  env="<ENV>">
</storifyme-snaps-sdk>
caution

Make sure to replace <ACCOUNT_ID>, <API_KEY> and <ENV> with the values from your account.

// Get the widget element
const snapsSdk = document.querySelector('storifyme-snaps-sdk');

// Add events
snapsSdk.addEventListener('onEditorLoaded', (event) => {
    console.log(event); // Editor successfully loaded
});
snapsSdk.addEventListener('onEditorLoadFailed', (error) => {
    console.log(error);         // Error that happened
});
snapsSdk.addEventListener('onEditorClosed', (event) => {
    console.log(event);    // Editor closed
});
snapsSdk.addEventListener('onSnapSaved', (event) => {
    console.log(event);      // Snap saved and editor closed
});
snapsSdk.addEventListener('onSnapSaveFailed', (event) => {
    console.log(event);      // Snap save failed
});

onEditorLoaded()​

onEditorLoaded method is invoked when the Snaps editor loads successfully.

snapsSdk.addEventListener('onEditorLoaded', (event) => {
  console.log('StorifyMe Snap Editor opened');
});

onEditorLoadFailed()​

onEditorLoadFailed method is invoked when the Snaps editor fails to load successfully.

snapsSdk.addEventListener('onEditorLoadFailed', (error) => {
  console.log('Error happened in StorifyMe Snap Editor.');
});

onEditorClosed()​

onEditorClosed method is invoked when the Snaps editor is closed.

snapsSdk.addEventListener('onEditorClosed', (event) => {
  console.log('StorifyMe Snap Editor closed.');
});

onSnapSaved()​

onSnapSaved method is invoked when the Snaps is saved and the editor is closing.

snapsSdk.addEventListener('onSnapSaved', (event) => {
  console.log(`New StorifyMe Snap created with ID: ${event.data.id} and handle: ${event.data.handle}`);
});

onSnapSaveFailed()​

onSnapSaveFailed method is invoked when the Snaps fails to save/update (network error or similar).

snapsSdk.addEventListener('onSnapSaveFailed', (event) => {
  console.log(`StorifyMe Snap failed to save/update.`);
});