Read aloud widget for your site
One script tag adds a listen button to any page. Students and visitors hear your content without installing anything, creating an account, or leaving the page.
The whole installation
Paste this into your page template or LMS theme with your own key. Selection mode is on by default.
<script src="https://naturaltts.org/ntts-widget.js"
data-ntts-key="ntts_your_key"
data-ntts-voice="alloy"
data-ntts-lang="en-US"
data-ntts-engine="standard">
</script>Or attach it to your own button
When you want a deliberate control rather than the selection popup, point a button at the element you want read:
<button data-ntts-listen data-ntts-target="#article-body">
Listen to this page
</button>Two ways it works
Selection mode
A visitor highlights any text and a Listen button appears. Nothing to mark up, and it works on content you did not write — comments, quoted material, a page you cannot edit the template of.
Element mode
A visible Listen button reads a region you choose. Better for course pages, where you want the affordance to be obvious rather than discovered.
What this is not
An embedded read-aloud widget is sometimes marketed as an accessibility fix. It is not one, and we would rather be clear about that than sell it as such.
This widget reads a passage of text aloud for anyone who prefers to listen — students with reading differences, people working in a second language, anyone away from their desk. That is genuinely useful, and it removes a real chunk of the alternative-format request queue. But it does not navigate your interface, describe your images, fix your heading structure, or make your forms operable by keyboard. A site with broken semantics and a listen button is still a broken site, and an overlay that claims otherwise makes conformance harder to assess, not easier.
Use it as a convenience for your readers, alongside the accessibility work, not instead of it.
Frequently asked questions
How do I add the widget to my site?
Paste one script tag into your page template with your API key. That is the whole installation. Selection mode is on by default, so visitors can highlight any text and press Listen without you marking anything up.
Does it work inside Canvas, Moodle, or Blackboard?
Yes, anywhere you can add a script tag or an HTML block to a page. In practice that means most LMS page editors and theme templates. If your institution locks down script injection, ask your LMS administrator to add it at the theme level once rather than per course.
Can I put the listen button on a specific element?
Yes. Add data-ntts-listen to any button and point data-ntts-target at a CSS selector — for example a button targeting your article body. Use this when you want a deliberate, visible listen control rather than the selection popup.
Does it replace a screen reader?
No, and it should not be presented as one. A screen reader navigates an entire interface — landmarks, forms, controls — for someone who cannot see the screen. This widget reads a passage of content aloud for anyone who prefers listening. They serve different people and different needs, and installing this does not make a site accessible.
How is usage counted?
Characters converted through the widget draw on your workspace allowance, the same as conversions made in the app. Each request is capped at 4,500 characters, so a visitor cannot exhaust an allowance in a single click.
Can I remove the branding?
Yes, on plans that include white-labelling — set data-ntts-whitelabel to true. On other plans a small attribution appears on the player.
Add a listen button to your course pages
The widget is included on team and enterprise plans. Start with an EDU Pilot to try it on real course material.