A screenshot showing an example of embedding the audience view on the T4 Education website

Live translation & captions on your website

Apr 25, 2022 | Blog, How-to

Embed spf.io’s audience view on your website to provide live translation & captions for your event.

With so many virtual platforms available it can be hard to pick one. Maybe you want to mix and match features, or maybe you need to host a hybrid event that integrates in-person and virtual experiences. Each tool has different nuances and features making it hard to create an accessible experience.

Well never fear, spf.io is here!

You can make your event accessible in many languages by using one of our many platform integrations (including for in-person events). And now with this latest feature, you can even embed live captions and subtitles on your website!

The nice thing about livestreaming to your own website is that you have complete control over how it looks and feels. Plus your audience doesn’t need to download special software to view it–they can access it through their browser on desktop or mobile. You also gain flexibility in choosing your software stack whether it be OBS, Wirecast, Streamyard, etc.

So, here is how you can integrate spf.io’s live captions and translations on your website side-by-side with your video:

1. Create a spf.io session

First create a spf.io session for your event. In the session editor, you will see everything related to distributing captions/translations to your audience in the upper right hand corner. The QR code can be shared if you want to create a “second-screen experience” where people access the captions and subtitles on their smartphones. For this example, click on the “embed icon”.

A screenshot of the interface showing where you can click to copy the embed code

2. Configure how your audience view looks

You will see options to configure how your audience view looks. There are two modes: “Full audience view” and “Subtitle only”.

The full mode gives your audience access to all audience view features and looks good when embedded next to your video player. You can see a preview in the bottom of the modal window.

A screenshot of the "Embed Audience View" configuration modal settings for the Full audience view.

The “subtitle only” mode looks good when embedded below your video player. It simply shows subtitle text and users cannot change the language they see from this view. If you want to use this mode with translation, we recommend creating a page for each language that includes your video stream and the embed code for that language. You generate the code for each language by changing the “Channel” setting.

A screenshot of the "embed audience view" configuration modal

3. Copy and paste the embed code on your event webpage

Click on the “Copy embed code” button to copy the needed HTML code to your clipboard. Then give it to your webmaster or edit your event web page and paste it in the proper place. Here is an example screenshot of both modes from our customer T4 Education’s Teacher Tech Summit. On the right is the “full audience view” mode and on the left is the “subtitle only view”.

A screenshot showing an example of embedding the audience view on the T4 Education website

That’s it!

Now that your website includes your video livestream and a way to show live translation/captions, it’s time to promote your event to your multilingual audience!

We know customers want the flexibility to try out the latest and greatest platforms for virtual and hybrid events. Spf.io’s audience view helps you bring multilingual accessibility with you where ever you go!

Pin It on Pinterest