Before you start

Have the KUDO Widget session URL for your event and access to edit the webpage or CMS module where the livestream will appear. Coordinate the implementation with the team responsible for your video player.

1. Add the Widget to your page

The Widget is embedded using an iframe. The following example uses a placeholder session ID:

<iframe
  name="KUDO Widget"
  title="KUDO translation and captions"
  src="https://audio-widget.kudoway.com/SESSION_ID"
  width="375"
  height="500"
  style="border: 0;"
  allowfullscreen>
</iframe>

Replace SESSION_ID with the session reference supplied for your event. If you have been given a complete Widget URL, use that URL as the src value.

The iframe contains the KUDO attendee interface. Your website or CMS controls its placement and the surrounding page design.

2. Check placement and sizing

On desktop, place the Widget beside the livestream player so attendees can watch the video while viewing captions and accessing language controls.

The example dimensions—375 pixels wide by 500 pixels high—are a starting point. Validate the final size within your page layout.

For smaller screens, consider placing the Widget below the player. Check that captions and controls remain readable and accessible without being clipped or overlapping other content.

3. Plan how attendees will hear audio

The livestream player and KUDO Widget are independent audio sources. If both play audio at the same time, attendees may hear the original speech and translated speech overlapping.

Define and test the listening experience:

• For translated audio: Coordinate playback so the original player audio does not compete with the selected translation.
• For original audio with translated captions: Check that attendees can retain the original player audio while using captions without additional translated audio playing.

KUDO’s Auto-Floor API can be used to coordinate muting between the player and the Widget. Adding the iframe alone does not establish that integration. Have your web team review the Auto-Floor API implementation guidance and test its behavior with your specific player.

4. Test the attendee experience

Before the live event, open the completed page and verify:

• The Widget loads the correct event session.
• The livestream and Widget fit the desktop and mobile layouts.
• Attendees can select the available languages.
• Captions display correctly and their controls remain accessible.
• Translated audio plays through the intended output.
• Original and translated audio behave as intended when changing languages.
• Auto-Floor muting works as expected, if implemented.

Run the test with live source speech and the actual livestream player. A visual layout check alone does not verify audio behavior.

What to expect

Attendees should be able to watch your livestream and access KUDO translation within the same webpage. The surrounding layout remains controlled by your website or CMS.

Troubleshooting