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.`);
});