api14
Get API key

We use cookies. Cookies and browser storage keep you signed in and remember your preferences. With your permission we also measure how the site is used. You can any time. See our cookie policy.

Speech widget

Speech widget code: picking voices and models for natural audio

The speech widget code stays the same while you change the model and voice behind it. Here is a practical way to choose both for natural sounding audio.

Published:

The voice is the personality of a speech widget. Visitors judge it within the first sentence, so it is worth a few minutes of testing. The good news: the voice and model are settings stored with the widget, not part of the code on your site.

<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>

Change them in the dashboard and the next request uses the new combination.

Start from the model

Speech models differ in naturalness, language support, speed and price. The model picker in Widgets shows the price of each one. Some points to check:

  • Languages: if your audience reads in several languages, test each one. Pronunciation quality varies between models.
  • Output format: the widget handles the format for you. Some models return MP3 and others raw audio that the server wraps into a playable WAV file, so every model plays in the browser.
  • Price: speech is billed by the model's own unit. Longer text costs more.

Then pick the voice

After you choose a model, the Voice field lists the voices it offers. A few guidelines:

  • Match the content: a calm, neutral voice for documentation, a warmer one for a product tour.
  • Test real text: paste a paragraph from your own site, including names, numbers and brand words.
  • Keep it consistent: if you run several speech widgets, use the same voice so your brand sounds the same everywhere.

Leaving the field empty uses the model's first voice.

Keep the widget yours

The widget is white label. Set the title, placeholder, button label and error message, choose the accent color and theme, and adjust the corner radius to match your design. Texts you leave empty fall back to defaults in your account language.

Run it under the right API key

Each widget runs under one of your API keys, chosen in the editor. The list ends with Create new API key if you want a dedicated key. Restricting that key to your chosen speech model means the widget cannot call anything else. When you switch models later, add the new one to the key's allowed list first.

Checklist before publishing

  1. Preview three or four texts in the editor.
  2. Set a daily spend limit on the widget.
  3. Add your domains under Settings, Widget sites.
  4. Play the result on a phone with the sound on.

Browse speech models in the catalog and build your widget on the widgets page.

Related guides