Skip to main content

Installation

Integrate Voilà player on your website with Voilà library.

To load the Voilà Library on your website you just need to add this script (after having replaced YOUR_ORGANIZATION_ID with your Orgzanization Id)

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

img Organization ID

<script
  id="voila-library"
  type="text/javascript"
  defer
  src="https://developer.voila.live/lib/v1/voila.js?ORG_ID=YOUR_ORGANIZATION_ID"
></script>

The script will use the combination of the ORGANIZATION_ID and the url of the page to determine what it has to inject and where. The "where" is configured through the Backstage Web Builder and consists of a css selector. See Configuration

Single Page Application​

If your website is a Single Application (SPA) like Nuxt.js or others, you need to use our special library voila-spa.js in the script tag. This library allows re-rendering when your route path changes for example.

<script
  id="voila-library"
  type="text/javascript"
  defer
  src="https://developer.voila.live/lib/v1/voila-spa.js?ORG_ID=YOUR_ORGANIZATION_ID"
></script>

Advanced​

If you want to render Voilà element more precisely, you can also de-activate the auto-rendering by removing the query arg ORG_ID.

<script
  id="voila-library"
  type="text/javascript"
  defer
  src="https://developer.voila.live/lib/v1/voila.js"
></script>

In this case, you have to call render programmatically like this:

...
<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>

After that, it is easier to other methods or subscribe to Events