Embedding LiveVoice channels into your website via iFrame

iFrame embed: Place audio channels directly into your website via iFrame.

Use cases: What this can be useful for

Interpretation of video livestreams or online conferences.

You can place the video livestream and the audio channels for translation directly on the same page, so users can choose the language with just one click on play.

Web radio and similar applications

You might want to broadcast the audio stream from your event on your website. Like the FC Zürich does on its website.

How it works

In order to get the embed code, just click on the "Share with your audience" button and choose "Embed into your website". There you can copy the iFrame code, which you need to insert into your website.

iFrame example:

You can try this with your own LiveVoice event, or with this example that already has audio playing permanently:

Style iFrame according to your needs

You can customize the iFrame with several parameters (color etc.).

Simple preferences

Each embed code including the unique listener code and some parameters to define additional preferences. Here's a list of all currently available parameters:

"code": your 6 digit LiveVoice listener code
"messages": define whether you want to show the listener the dynamic event messages
"spacing_top": iframe padding top in pixels
"spacing_bottom": iframe padding bottom in pixels
"background_color": iframe background color in hex
"text_color": iframe text and border color in hex
"button_color": button color of active listen button

The only required parameter is "code", all other parameters are optional.

<iframe src="https://livevoice.io/en/streams/embedded?code=123456&messages=false&spacing_top=50&spacing_bottom=50&background_color=423eb3&text_color=ffffff" style="border:none;" width="100%" height="400"></iframe>

HTML example file

To test all parameters simply download this example html file, adjust all parameters to your need and open it in your browser.

Advanced event handling via Javascript

This example html file also includes a javascript solution to catch the 'Started listening to LiveVoice' and the 'Started listening to LiveVoice' events. This can become handy for example if you have a video player embedded into your website and want to mute it automatically when listening to a translation.

<script>
  // You can listen to events, emitted by the LiveVoice iframe.
  // This can become handy for example if you have a video player
  // embedded into your website and want to mute it automatically
  // when listening to a translation.
  window.addEventListener("message", function(event) {
    if (event.origin != "https://livevoice.io")
      return

    // "started_listening" is sent whenever someone clicked on
    // a play button inside the LiveVoice iframe.
    if (event.data.message == "started_listening") {
      console.log("Started listening to LiveVoice")

    // "stopped_listening" is sent whenever someone clicked on
    // a stop button inside the LiveVoice iframe.
    } else if (event.data.message == "stopped_listening") {
      console.log("Stopped listening to LiveVoice")
    }
  });
</script>

Feel free to contact our support team in case you need assistance.