Skip to main content



  1. Create a program on backstage
  2. Add a session

Configure the web builder

Select the default created page and edit the page to add your website url.

img Configuration

img Configuration

  1. Add your website URL

  2. Configure where you want to display Voilà live content.

    Once the Voilà script integrated to your website, we are able to inject live content anywhere on your page. For this example, we want to inject above the OUR PRODUCTS section in

img Configuration

Thanks to DOM insertAdjacentHTML method we are able to inject anywhere arround a HTML tag

<!-- beforebegin -->
<!-- afterbegin -->
<!-- beforeend -->
<!-- afterend -->

In our case we want to inject as follow:

  • querySelector: #products
  • position: beforeend

And now you just have to configure your sections and global settings, such as Theme, etc.

In our example, we use:

  • a custom light green theme
  • just a Highlight section

img Configuration


Private page

When you work on a Voilà integration, you may not want every customer to see it yet. In order to make the modifications only visible to some, you can add in your url a specif query args starting with voila-<id>

For example, you can add:

Only participants who know the full link will see the Voilà live content. => no render => render

This feature is very powerful and can allow to create draft page before to push in production. When you are happy with the rendering, you can edit the page and remove the voila-<id> query args for example.