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

Deploying a Voice‑AI Web App with ElevenLabs and WordPress on Bluehost

When you’re ready to add lifelike voice to your website, you’ll need a powerful text‑to‑speech (TTS) engine and a hosting provider that makes the deployment painless. ElevenLabs offers state‑of‑the‑art TTS and voice cloning, while Bluehost gives you a reliable, budget‑friendly WordPress environment. This guide walks through building a minimal voice‑AI web app, integrating ElevenLabs, and launching it on Bluehost in under an hour.

1. Why ElevenLabs?

ElevenLabs’ API delivers natural, expressive speech with a handful of parameters:

• Voice selection – choose from dozens of high‑quality voices or upload your own voice sample for cloning.
• Speech control – adjust pitch, speaking rate, and emphasis.
• Streaming – get audio as a stream for instant playback.

All of this comes from a single REST endpoint, so you can plug it into any language or framework. The best part? No heavy server‑side processing—just send a POST request and receive an MP3 or WAV file in return.

2. Setting Up a WordPress Site on Bluehost

1. Sign up Head to the Bluehost affiliate link: https://bluehost.sjv.io/5k0d52. Pick the Basic plan – it’s enough for a WordPress blog and gives you a free domain for the first year.
2. Install WordPress Bluehost’s one‑click installer will set everything up. Once you log into your dashboard, you’ll see a “WordPress” button—click it, choose a theme, and you’re ready to code.
3. Create a Custom Plugin To keep your code tidy, we’ll build a tiny plugin that exposes a shortcode for voice playback.

# SSH into your Bluehost server
mkdir wp-content/plugins/voice-ai
cd wp-content/plugins/voice-ai
touch voice-ai.php

Add the following to voice-ai.php:

<?php
/**
 * Plugin Name: Voice AI Player
 * Description: Shortcode to play ElevenLabs TTS.
 * Version: 1.0
 * Author: Your Name
 */

function voice_ai_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'text'   => '',
        'voice'  => 'Rachel', // default voice
    ), $atts, 'voice_ai' );

    // Call ElevenLabs API
    $api_key = 'YOUR_ELEVENLABS_API_KEY';
    $endpoint = 'https://api.elevenlabs.io/v1/text-to-speech/' . urlencode( $atts['voice'] );

    $response = wp_remote_post( $endpoint, array(
        'headers' => array(
            'xi-api-key' => $api_key,
            'Content-Type' => 'application/json',
        ),
        'body'    => json_encode( array(
            'text' => $atts['text'],
        ) ),
    ) );

    if ( is_wp_error( $response ) ) {
        return 'Error generating audio.';
    }

    $audio_url = wp_upload_bits( 'voice-' . time() . '.mp3', null, wp_remote_retrieve_body( $response ) );

    // Return an audio player
    return '<audio controls preload="none"><source src="' . esc_url( $audio_url['url'] ) . '" type="audio/mpeg">Your browser does not support the audio element.</audio>';
}
add_shortcode( 'voice_ai', 'voice_ai_shortcode' );

Tip: Store your API key in wp-config.php as define( 'ELEVENLABS_API_KEY', 'your_key_here' ); and reference it in the plugin.

1. Activate the Plugin
   
   In the WordPress admin, go to Plugins → Installed Plugins, find “Voice AI Player,” and click Activate.

2. Use the Shortcode
   
   On any page or post, add:
   

[voice_ai text="Hello, world! This is a test of ElevenLabs voice." voice="Rachel"]

That’s it—your page will now render an audio player that plays the ElevenLabs‑generated voice on demand.

3. Optional: JavaScript Front‑End Integration

If you prefer a more dynamic UI, you can call the ElevenLabs API directly from the browser (CORS‑enabled) and stream the audio. Below is a lightweight example:

<button id="speakBtn">Speak</button>
<audio id="player" controls></audio>

<script>
const apiKey = 'YOUR_ELEVENLABS_API_KEY';
const voiceId = 'Rachel';
const text = 'Hi there! I am playing directly from the browser.';

document.getElementById('speakBtn').addEventListener('click', async () => {
  const res = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
    method: 'POST',
    headers: {
      'xi-api-key': apiKey,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ text })
  });

  const arrayBuffer = await res.arrayBuffer();
  const blob = new Blob([arrayBuffer], { type: 'audio/mpeg' });
  const url = URL.createObjectURL(blob);
  document.getElementById('player').src = url;
});
</script>

Add this snippet to a custom page template or embed it via a “Custom HTML” block. The user clicks “Speak,” the browser streams the voice, and you’re done.

4. Deploying the Site on Bluehost

Once your content and plugin are ready, it’s just a matter of pushing your WordPress files to the Bluehost server. If you used the Bluehost installer, your site is already live. If you’re developing locally, use an FTP client (FileZilla, Cyberduck) or git push if you have a repo set up:

git clone [email protected]:yourname/voice-ai-site.git
cd voice-ai-site
git remote add bluehost [email protected]:public_html.git
git push bluehost master

After the upload, visit https://yourdomain.com. The shortcode should render an audio player powered by ElevenLabs. If you’re using the JavaScript demo, the button will trigger the API call and play the audio directly.

5. Scaling and Production Tips

6. Wrap‑Up

You’ve now seen how to:

1. Sign up for Bluehost and spin up a WordPress site in minutes.
2. Create a lightweight plugin that pulls in ElevenLabs TTS.
3. Optionally hook up a front‑end JavaScript player for instant voice playback.
4. Deploy the finished site with zero downtime.

Ready to bring your site to life with voice?

Try ElevenLabs for realistic, expressive speech: https://try.elevenlabs.io/kr07zfuqn1bp.

Launch your WordPress project on a reliable, affordable host: https://bluehost.sjv.io/5k0d52.

Happy coding—and speaking!