The KUDO Widget lets attendees access translated audio and captions alongside your livestream. Your video player provides the program video and original audio, while the Widget provides language selection and translation controls.
This guide is for web developers, content management system (CMS) administrators, and event producers.
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
| Issue / Task | Possible Cause | Recommended Action |
|---|---|---|
| Original and translated voices overlap | Both the livestream player and Widget are playing audio | Check each audio source separately, then verify the intended muting behavior and Auto-Floor integration, if used. |
| Captions or controls are clipped | The iframe dimensions or surrounding layout provide insufficient space | Adjust the layout and retest at the affected screen size. |
| Desktop layout works but mobile is difficult to use | The page layout has not been adapted to smaller screens | Reposition or resize the Widget and verify access to captions and language controls. |