Embed Widget

The Nouncify Embed Widget lets your users record their name pronunciation directly inside your app — no Nouncify account required.

Live Demo Sandbox

Try the live embed perfectly recreated below! It uses the highly optimized Vanilla Web SDK embed.js.

Live Event Logs

Awaiting interaction...

---

How it works

1. Your server generates an embed token via the API
2. You present the recorder using the JS SDK or an iframe
3. The user records their name (takes ~5 seconds)
4. You receive a play link via webhook or via the onSuccess callback event natively in the UI.

Integration methods

Inline mode (recommended)

Mount directly into a container element on your page. This uses the zero-dependency Web Component, ensuring perfect animations without conflicting with React, Vue, or Angular.

<div id="nouncify-recorder"></div>

<!-- Drop the zero-dependency SDK before the closing body tag -->
<script src="https://embed.nouncify.com/embed.js"></script>

<script>
  Nouncify.mountRecorder('#nouncify-recorder', {
    token: 'emb_tk_...',
    size: 72, // optional pixel size (default 64)
    onSuccess: (result) => {
      console.log('Recorded successfully! Play link:', result.play_link);

      // Save play_link to your database!
      fetch('/api/users/update-audio', {
          method: 'POST',
          body: JSON.stringify({ audio_url: result.play_link })
      });
    },
  });
</script>

Direct iframe

If your platform enforces strict Content Security Policies (CSP) preventing execution of external JS files, you can simply load the recorder natively using a basic HTML iframe.

<iframe
  src="https://embed.nouncify.com/record?token=emb_tk_..."
  width="100%"
  height="150"
  frameborder="0"
  allow="microphone"
></iframe>

User experience

The recorder provides a polished, mobile-responsive interface:

1. Idle — Clean microphone pulse prompt.
2. Recording — Live purple liquid-fill SVG wave visualization mapping to the 10s maximum sequence.
3. Preview — Allows the user to playback their recording locally via Native Web APIs.
4. Success — Submits the webm Blob and provides an animated checkmark sequence.