Interactive TTS Widget Examples

Live examples of Supernal TTS widgets in action. See text-to-speech integration from basic buttons to advanced controls. Try OpenAI voices, speed controls, and custom styling.

🎙️ Interactive Widget Demos

For interactive widget demos, please visit our Widget Demo Page.

Our dedicated demos page features:

• Basic Widgets - Simple play button for blogs and content
• Voice Variations - All 7 OpenAI voices (Alloy, Echo, Fable, Onyx, Nova, Shimmer, Coral)
• Widget Styles - Default, minimal, and outline styles
• Blog Example - See how TTS works in real content
• Integration Code - Copy-paste ready examples

→ Visit the Widget Demo Page

Quick Integration

To integrate a TTS widget into your website:

<!-- Add the widget script -->
<script src="https://unpkg.com/@supernal-tts/widget@latest/dist/widget.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@supernal-tts/widget@latest/dist/widget.css">

<!-- Initialize the widget -->
<script>
  SupernalTTS.init({
    apiUrl: 'https://www.tts.supernal.ai',
    provider: 'openai',
    voice: 'fable'
  });
</script>

For detailed integration instructions, see our Widget Integration Guide.