Skip to main content

Widget Code Generator

Configure your widget options and get ready-to-use code for HTML, React, or npm package integration.

Configuration

Select voices to show in the voice selector dropdown. At least one required.
The voice that will be selected by default

Live Preview

Loading preview...

Generated Code

<!-- Add to your <head> -->
<link rel="stylesheet" href="https://unpkg.com/supernal-tts-widget/widget.css">
<script src="https://unpkg.com/supernal-tts-widget/widget.js"></script>

<!-- Add to your content -->
<div class="supernal-tts-widget"
     data-voices="fable,nova,onyx"
     data-enable-speed="true"
     data-enable-progress="true">
  <p>Your content here</p>
</div>

<script>
  SupernalTTS.init({
    apiUrl: 'https://tts.supernal.ai'
  });
</script>

How to Use​

  1. Choose Widget Mode: Select between Basic (simple play button), Compact (with controls), or Advanced (full player)
  2. Configure Options: Set provider, voice, speed, and other preferences
  3. Preview: See how your widget will look and behave in real-time
  4. Copy Code: Choose your preferred integration method (HTML, React, or npm) and copy the generated code

Widget Modes Explained​

Basic Mode​

  • Use case: Minimal integration, blog posts, simple content
  • Features: Just a play button
  • Code: No data-controls attribute needed

Compact Mode​

  • Use case: Interactive content, articles, tutorials
  • Features: Play button + voice selector + speed control
  • Code: data-controls="compact"

Advanced Mode (Coming Soon)​

  • Use case: Long-form content, audiobooks, podcasts
  • Features: Full audio player with progress bar, time display, seeking
  • Code: data-controls="advanced"

Provider Options​

  • OpenAI: High-quality neural voices (requires API key or paid plan)
  • eSpeak: Free, open-source voices (good for development and testing)
  • Azure: Microsoft's neural voices (requires Azure account)
  • Cartesia: Ultra-low latency streaming voices (requires Cartesia account)

Next Steps​

After integrating the widget:

  1. Test it on your site to ensure it works correctly
  2. Customize the CSS using CSS variables for theming
  3. Monitor usage in your Dashboard
  4. Upgrade to a paid plan for production use and premium voices

Need Help?​