Methods

Voilà library expose some methods directly available in voila window global js scope. Thanks that, you can integrate easily.

Note: If you want to render programmatically, disable the auto rendering mode by removing ORG_ID. (see installation#advanced)

render

You may want to manually render the Voilà DOM. The render method allows rendering the page associated to the registered URL and the current window.location.href.

export interface RenderOptions {
  querySelector?: string
}

render: (organizationId: string, options?: RenderOptions) => void

• organizationId: string

  To find YOUR_ORGANIZATION_ID, go to Backstage, open Organization menu and copy id.

  

• options: RenderOptions

  • querySelector: string

    A query selector where you want to inject Voilà DOM. The DOM will be added at the end of query Selector.

Example

...
<div class="my-live-session"></div>
...
<script id="voila-library" type="text/javascript" defer src="https://developer.voila.live/lib/v1/voila.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    voila.render('YOUR_ORGANIZATION_ID', { querySelector: '.my-live-session' })
  })
</script>

on

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

on: (topic: string, callback: (data: any) => void) => void

• topic: string

  Name of topic. You can use the all to catch all events directly in one callback or use one specifically. See Events part for more information)

• callback: (data: any) => void)

  This callback method will be called when the event will be fired

Note do not forget to unsubscribe your callbacks thanks the off method.

Example

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

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

off

When you destroy the Voilà DOM by changing page for example, do not forget to unsubscribe events to avoid memory leak.

off: (topic: string, callback: (data: any) => void) => void

• topic: string

  Name of topic. You can use the all to catch all events directly in one callback or use one specifically. See Events part for more information)

• callback: (data: any) => void)

  It works as addEventListener and removeEventListener. You need to pass the pointer of callback function to unsubscribe.

  Example

function log(emit) {
  console.log(emit.name, emit.data)
}

voila.on('all', log)

// When you want destroy: 
voila.off('all', log)

openDialog

Open a Voilà dialog. Can be the Voilà Player (of a session), the registration Form (of a program)

openDialog: (id: string) => void

• id: string

  a Voilà identifier :

  • open a Voilà Player with a session-id

  • open a Registration Form for program configured on registration access

  Note This mechanism is used to open player a registration form directly by hash in your url with #v-<sessionId|programId>.

  For example : https://naturea.tv#v-<sessionId>

setLang

By default, the Voilà library takes by priority

1. the lang DOM attribute on html tag
2. the default browser languages.

If you need to change the default language programmatically, you can call setLang() method

  setLang: (locale: string) => void

• locale: 'en', 'fr', 'de', 'es', 'it', 'pl', 'pt', 'ro', 'sk', 'zh'

  (english, french, german, spanish, italian, portuguese, polish, romanian, slovak, chinese)

  Note you have to configure in the backstage website all locales we needed. By default, if the selected locale is not found in the program, we will use the default configure locale.

Example

...
<div class="my-live-session"></div>
...
<script>
  // Force language to french
  voila.setLang('fr')
  voila.render('YOUR_ORGANIZATION_ID', { querySelector: '.my-live-session' })
</script>