Skip to main content

Events

Voilà Library emits different events across its lifecycle. You can find lots of information in order to push data into your analytics, CRM, etc.

To connect these event, you have to use voila.on and voila.off methods.

All events​

This event is emitted as soon as an event is triggered. It's the simple way to connect all event and manage that you need with a switch/case for example.

voila.on('all', (emit) => {
  console.log(emit.name, emit.data)
})

Lifecycle events​

onDataComputed​

Triggered when the Voilà Library has finished to fetch data.

voila.on('onDataComputed', (data) => {
  console.log('onDataComputed', data.page, data.event, data.theme)
})

3 objects are returned:

  • page: all data relative to the page (section templates, )
  • event all data relative to the event
  • theme: all data relative to the theme (dark, light, colors)

onPageError​

Triggered when an error occurred during fetch page data. For example, if you have forgot to configure the URL inside the web builder, the API will return a 404 status.

voila.on('onPageError', (status) => {
  console.log('onPageError', status) // 404 for example
})

onRenderFinished​

Triggered when the Voilà DOM is ready and has been injected in the DOM Page.

voila.on('onRenderFinished', () => {
  console.log('onRenderFinished')
})

Note: Normally, this event is called one time but in case where you change deeply the page configuration (add a section, remove a section, add a session to a category...), Voilà library can decide to re-render all for performance issue.

onUpdateFinished​

Triggered when the Voilà DOM is updated when:

  • Every 30 seconds to refresh the state of Voila live content when the browser tab is active
  • when you return in the browser tab and tab becomes active
  • others cases, change language, etc...
voila.on('onUpdateFinished', () => {
  console.log('onUpdateFinished')
})

onDestroyed​

Triggered when the Voilà DOM is removed. Useful for SPA page when a JS controller is destroyed for example.

voila.on('onDestroyed', () => {
  console.log('onDestroyed')
})

onLanguageChanged​

Triggered when when the language changes (for example a call of voila.setLang)

voila.on('onLanguageChanged', (lang) => {
  console.log('onLanguageChanged', lang)
})

Player session events​

onSessionCardClick​

Triggered when Voilà Session card is clicked by user. It is useful when you want override the default behavior: open the Voilà Player.


voila.on('onSessionCardClick', (data) => {
  console.log('onSessionCardClick', data.session, data.highlight)
  // Continue the default action: open player. Used to just trigger data for analytics
})

voila.on('onSessionCardClick', (data) => {
  console.log('onSessionCardClick', data.session, data.highlight)
  window.open('https://example.com', '_blank')
  // Stop the propagation. Do not open the Voilà player
  return true
})
  • session: the session data
  • highlight: know if session is displayed on Highlight Session card or a standard Session Card.

If you want to stop the propagation (do not open the Voilà Player), you have to return true inside the voila.on

onPlayerOpened​

Triggered when when the Voilà Player is opened

voila.on('onPlayerOpened', (data) => {
  console.log('onPlayerOpened', data.id, data.session)
})
  • id: the DOM id associated of the Session Card
  • session: the session data

onPlayerClosed​

Triggered when when the Voilà Player is closed

voila.on('onPlayerClosed', (data) => {
  console.log('onPlayerClosed', data.id, data.session)
})
  • id: the DOM id associated of the Session Card
  • session: the session data

onPipModeOn​

Triggered when when the pip mode is enabled

voila.on('onPipModeOn', (data) => {
  console.log('onPipModeOn', data.id, data.session)
})
  • id: the DOM id associated of the Session Card
  • session: the session data

onPipModeOff​

Triggered when when the pip mode is disabled

voila.on('onPipModeOff', (data) => {
  console.log('onPipModeOff', data.id, data.session)
})
  • id: the DOM id associated of the Session Card
  • session: the session data

onPipVolumeOn​

Triggered when when the volume is muted in pip mode

voila.on('onPipVolumeOn', (data) => {
  console.log('onPipVolumeOn', data.id, data.session)
})
  • id: the DOM id associated of the Session Card
  • session: the session data

onPipVolumeOff​

Triggered when when the volume is un-muted in pip mode

voila.on('onPipVolumeOff', (data) => {
  console.log('onPipVolumeOff', data.id, data.session)
})
  • id: the DOM id associated of the Session Card
  • session: the session data

Speaker events​

You have to add a speaker section in your web builder

onSpeakerCardClick​

Triggered when Voilà Speaker card is clicked by user. It is useful when you want override the default behavior: open the speaker dialog. For example, you can open a new link to display the public Linkedin profile.


voila.on('onSpeakerCardClick', (data) => {
  console.log('onSpeakerCardClick', data.id, data.speaker)
  // Continue the default action: open speaker dialog. Used to just trigger data for analytics
})

voila.on('onSpeakerCardClick', (data) => {
  console.log('onSpeakerCardClick', data.id, data.speaker)
  window.open('https://example.com', '_blank')
  // Stop the propagation. Do not open the Voilà Speaker dialog
  return true
})
  • id: the DOM id associated of the Speaker Card
  • speaker: the speaker data

If you want to stop the propagation (do not open the Voilà speaker dialog), you have to return true inside the voila.on

onSpeakerDialogOpened​

Triggered when when the Voilà Speaker dialog is opened

voila.on('onSpeakerDialogOpened', (data) => {
  console.log('onSpeakerDialogOpened', data.id, data.speaker)
})
  • id: the DOM id associated of the Speaker Card
  • speaker: the speaker data

onSpeakerDialogClosed​

Triggered when when the Voilà Speaker dialog is closed

voila.on('onSpeakerDialogClosed', (data) => {
  console.log('onSpeakerDialogClosed', data.id, data.speaker)
})
  • id: the DOM id associated of the Speaker Card
  • speaker: the speaker data

You have to add a banner section in your web builder

onBannerDialogOpened​

Triggered when when the Voilà banner dialog is opened. Can be appear when your event description is long and the banner displays a more button

voila.on('onBannerDialogOpened', (data) => {
  console.log('onBannerDialogOpened', data.event)
})
  • event: the event data

onBannerDialogClosed​

Triggered when when the Voilà banner dialog is closed. Can be appear when your event description is long and the banner displays a more button

voila.on('onBannerDialogClosed', (data) => {
  console.log('onBannerDialogClosed', data.event)
})
  • event: the event data

Registration events​

When you configure the program with a registration access.

onSignupCardClick​

Triggered when Voilà register button is clicked by user.


voila.on('onSignupCardClick', (data) => {
  console.log('onSignupCardClick', data.page, data.event)
  // Continue the default action: open the Voilà registration form dialog. Used to just trigger data for analytics
})

voila.on('onSpeakerCardClick', (data) => {
  console.log('onSpeakerCardClick', data.page, data.event)
  window.open('https://my-form.com', '_blank')
  // Stop the propagation. Do not open the Voilà registration form dialog
  return true
})
  • page: the page data
  • event: the event data

If you want to stop the propagation (do not open the Voilà registration form dialog), you have to return true inside the voila.on

onSignupDialogOpened​

Triggered when when the Voilà registration form dialog is opened.

voila.on('onSignupDialogOpened', (data) => {
  console.log('onSignupDialogOpened', data)
})

onSignupDialogClosed​

Triggered when when the Voilà registration form dialog is closed.

voila.on('onSignupDialogClosed', (data) => {
  console.log('onSignupDialogClosed', data)
})

CollectData card events​

You have to add a collect data section in your web builder

onDataCollected​

Triggered when user submit data

voila.on('onDataCollected', (data) => {
  console.log('onDataCollected', data)
})

Note the personal data are not passed in the event. You can download it in the program statistic part on backstage.

Product events​

productAction​

Triggered when the custom action of a product is configured in the Product Activity.

Thanks to Voilà Studio in backstage, you can display product during the live and connect a custom action button.

The best example here is to configure a Add to basket button. You can catch the click and call your api to automatically add the product presented during the live inside your website basket.

voila.on('productAction', async (product) => {
  console.log('productAction', product)
  // For example call your API to add it in your basket
  await addToBasketApi(product.id, 1)
})