VoiceDeveloper

Posted on Oct 21

How to Deploy a Voice AI Web App: ElevenLabs + WordPress on Bluehost

#ai #beginners #webdev #tutorial

Why Voice AI Is a Game‑Changer for Modern Web Apps

Voice interfaces are no longer a novelty—they’re becoming the primary way people interact with content, especially on mobile and smart‑home devices. From conversational chatbots to personalized audio newsletters, a text‑to‑speech (TTS) layer can turn static pages into engaging, accessible experiences.

If you’re a WordPress developer looking to add voice AI to a site, you can do it quickly, cost‑effectively, and with minimal infrastructure pain. The secret sauce? Pair the industry‑leading ElevenLabs TTS API with a reliable, budget‑friendly host like Bluehost. The combination delivers high‑quality, customizable voice output while keeping hosting simple and affordable.

1. Set Up an ElevenLabs Account

ElevenLabs offers a powerful, developer‑friendly API that turns any string of text into natural‑sounding speech. Their voice cloning feature lets you create a unique voice model in minutes—perfect for brand consistency or personal projects.

Sign Up

Head to the affiliate link: https://try.elevenlabs.io/kr07zfuqn1bp and create an account. The free tier gives you 3,000 characters per month—great for prototyping.
Generate an API Key

Once logged in, navigate to API → Create Key. Copy the key; you’ll need it for every request.
Explore Voices

ElevenLabs offers dozens of high‑quality voices. Pick one that matches your brand tone. For voice cloning, upload a short audio clip (≈30 seconds) of your own voice or a brand voice actor, and let the model learn.

2. Create a Simple WordPress Plugin

Instead of editing theme files, bundle the voice logic in a lightweight plugin. This keeps upgrades painless and lets you reuse the code across sites.

<?php
/*
Plugin Name: WP Voice AI
Description: Simple integration of ElevenLabs TTS into WordPress.
Version: 1.0
Author: Your Name
*/

defined('ABSPATH') or die();

add_action('wp_footer', 'wp_voice_ai_footer');

function wp_voice_ai_footer() {
    ?>
    <script>
      async function playVoice(text) {
        const response = await fetch('https://api.elevenlabs.io/v1/text-to-speech/VOICE_ID', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'xi-api-key': 'YOUR_ELEVENLABS_API_KEY'
          },
          body: JSON.stringify({
            text: text,
            voice_settings: { stability: 0.75, similarity_boost: 0.75 }
          })
        });

        const data = await response.json();
        const audio = new Audio(data.audio_url);
        audio.play();
      }
    </script>
    <?php
}

add_shortcode('voice_button', function($atts, $content = null) {
    $text = esc_html($content ?: 'Hello, world!');
    return "<button onclick=\"playVoice('$text')\">🔊 Speak</button>";
});

Replace VOICE_ID with the ID from ElevenLabs (e.g., en-US-Standard-B).
Replace YOUR_ELEVENLABS_API_KEY with the key you copied earlier.
Activate the plugin in the WordPress admin.

Now, anywhere on your site, add [voice_button]Your text here[/voice_button] and you’ll get a button that speaks the content.

3. Deploy on Bluehost

Bluehost is an excellent choice for deploying WordPress sites that need quick setup, reliable uptime, and cost efficiency. Their shared hosting plans start at just a few dollars a month, and they include:

24/7 cPanel access
Automatic WordPress installs
Free SSL certificates
One‑click staging environments

Steps to Deploy

Sign Up

Use the affiliate link: https://bluehost.sjv.io/5k0d52 to get a special discount.
Domain & Hosting

Choose a domain during checkout. Bluehost will provision the hosting environment in seconds.
Install WordPress

In the cPanel dashboard, click WordPress → Install. Follow the wizard, set admin credentials, and you’re ready.
Upload Your Plugin

In the WordPress admin, go to Plugins → Add New → Upload Plugin. Zip the PHP file from step 2 and upload it.
Activate & Test

Activate the plugin, add the [voice_button] shortcode to a page, and verify that the button plays the TTS output.

Because Bluehost handles server maintenance, SSL, and backups, you can focus entirely on building the voice experience.

4. Advanced Customization Ideas

a. Dynamic Voice Generation

Instead of a static button, generate speech on the fly based on user input:

async function speakUserInput() {
  const userText = prompt('Enter text to speak:');
  if (!userText) return;

  // Reuse the same fetch logic as before
  const response = await fetch('https://api.elevenlabs.io/v1/text-to-speech/VOICE_ID', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'xi-api-key': 'YOUR_ELEVENLABS_API_KEY'
    },
    body: JSON.stringify({ text: userText })
  });

  const data = await response.json();
  new Audio(data.audio_url).play();
}

Add a button that calls speakUserInput() to let visitors dictate what they hear.

b. Voice Cloning for Brand Consistency

If you need a custom brand voice, upload a 30‑second clip during the ElevenLabs setup. The API will return a model_id; replace VOICE_ID in the plugin with this ID. Every request now uses your unique voice, giving a seamless brand experience.

c. Caching Audio Files

For performance, cache generated audio on the server or CDN:

function wp_voice_ai_cache($text) {
  $cache_key = md5($text);
  $cached_file = WP_CONTENT_DIR . "/voice_cache/{$cache_key}.mp3";

  if (file_exists($cached_file)) {
    return plugins_url("voice_cache/{$cache_key}.mp3", __FILE__);
  }

  // Call ElevenLabs API and save the file
  // (omitted for brevity)
}

Serve the cached file via <audio src="<?php echo wp_voice_ai_cache('Hello'); ?>">.

5. Monitoring & Scaling

API Usage: ElevenLabs offers a dashboard to monitor characters per month. Switch to a paid tier if you exceed the free quota.
Site Performance: Bluehost’s shared plans are fine for low‑to‑medium traffic. For high traffic, consider a VPS or managed WordPress plan.
Security: Keep your API key out of public code. Store it in wp-config.php:

define('ELEVENLABS_API_KEY', 'YOUR_KEY_HERE');

Then reference ELEVENLABS_API_KEY in your plugin.

6. Wrap‑Up & Next Steps

You now have a minimal, production‑ready WordPress site that delivers high‑quality, customizable voice output using ElevenLabs, all hosted on a reliable, budget‑friendly platform like Bluehost.

Try ElevenLabs: Build your first voice model and experiment with different voices.
Try Bluehost: Deploy your WordPress site in minutes, with a great discount through the affiliate link.

Happy coding—and happy speaking! 🚀

Start your ElevenLabs journey and launch your WordPress voice app on Bluehost.

DEV Community