Adding high-quality AI voices to your Bubble.io application is easier than ever with ElevenLabs. This tutorial covers the integration process for real-time text-to-speech.

The Power of ElevenLabs in No-Code

ElevenLabs provides the most realistic synthetic voices available today. Integrating this into Bubble allows you to build accessible apps, voice assistants, and personalized audio experiences.

Integration Steps

  1. ElevenLabs API Key: Retrieve your key from the ElevenLabs profile settings.
  2. Bubble API Connector: Install and open the API Connector plugin.
  3. Add API: Name it “ElevenLabs” and add a POST call for https://api.elevenlabs.io/v1/text-to-speech/{voice_id}.
  4. Headers:
    • xi-api-key: Your API Key
    • Content-Type: application/json

Pro Tip: Streaming vs. File

For long texts, consider using the streaming endpoint. For short alerts, generating an MP3 file and playing it via a Bubble audio player is more efficient.

Common Use Cases

  • Educational Apps: Read lessons aloud to students.
  • Accessibility: Provide voice navigation for visually impaired users.
  • Gaming: Create dynamic NPC dialogue without pre-recorded audio.