Quick Start

Get production TTS running on your site in under 5 minutes. No server code, no audio pipeline, no CDN setup.

1. Create an account

Sign up for a free account. The free tier includes 100 generations per month with no credit card required.

2. Create a project

Go to Projects in the dashboard and create a new project. Give it a name that matches your website or app.

3. Generate an API key

Navigate to API Keysand create a key for your project. Copy the key immediately — it won't be shown again.

You can configure allowed domains, rate limits, and voice restrictions on each key.

4. Install the SDK

Choose the package for your framework:

# React
npm install @tts2go/react

# Vue
npm install @tts2go/vue

# Svelte
npm install @tts2go/svelte

# Vanilla JS
npm install @tts2go/vanilla

5. Add TTS to your app

Option A: Drop-in TTSButton

The fastest way to add TTS — a pre-built button with built-in icons and state management:

import { TTS2GoProvider, TTSButton } from "@tts2go/react";

function App() {
  return (
    <TTS2GoProvider config={{
      apiKey: "tts_your_api_key_here",
      projectId: "your-project-id"
    }}>
      <article>
        <h1>My Article</h1>
        <p>This is the article content that will be read aloud.</p>
        <TTSButton
          content="This is the article content that will be read aloud."
          voiceId="default"
        />
      </article>
    </TTS2GoProvider>
  );
}

Option B: Custom UI with useTTS

For full control over the button's look and behavior, use the useTTS hook directly:

import { useTTS } from "@tts2go/react";

function PlayButton({ text }: { text: string }) {
  const { status, play, stop } = useTTS(text, "voice_abc123");

  return (
    <button
      onClick={status === "playing" ? stop : play}
      disabled={status === "loading"}
    >
      {status === "idle" && "Play"}
      {status === "loading" && "Loading..."}
      {status === "playing" && "Stop"}
      {status === "fallback" && "Playing (browser)"}
      {status === "error" && "Retry"}
    </button>
  );
}

When the user clicks play, the SDK:

1. Immediately plays browser-native TTS for instant, zero-latency feedback
2. Checks the CDN for cached ElevenLabs audio
3. If cached audio exists, plays the high-quality version
4. If not cached, sends a generation request to TTS2Go — the request appears in your project dashboard where you can approve it (or configure AI auto-approval). Once approved, TTS2Go generates audio via ElevenLabs and caches it on the CDN for all future requests.

6. Choose a voice

Browse available voices in the Voices section of your dashboard. Each voice has a unique ID that you pass to the SDK.

7. Review requests in the dashboard

Open your project dashboard to see pending TTS requests. Each request shows the text content, the voice, and an AI confidence score. You can approve individually, bulk-approve, or enable auto-approval for requests that match your content profile. Approved requests are sent to ElevenLabs for generation and permanently cached on the CDN.

Next steps

• Read the React, Vue, Svelte, or Vanilla JS SDK guide
• Set up content profiles for content verification
• Configure domain restrictions on your API keys
• Review pricing plans when you need more generations