TTS Widget Code Generator

Interactive widget generator for Supernal TTS. Configure options, preview your widget, and get ready-to-use code for HTML, React, or npm integration. Try different voices, speeds, and modes.

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

How to Use

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

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:

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

Need Help?