Back to all articles

How to Integrate Neural Voice Agent Into Your Website: Complete Guide

Learn how to easily add Neural Voice AI agents to your website in minutes. Step-by-step guide with code examples for all major platforms.

30 June 2025

How to Integrate Neural Voice Agent Into Your Website: Complete Guide

🚀 Transform Your Website with AI Voice Technology

Add a powerful AI voice assistant to your website in under 10 minutes. No technical expertise required.

What is Neural Voice Website Integration?

Integrating Neural Voice into your website means adding an AI-powered voice assistant that can interact with your visitors through natural conversation. Whether you're looking to provide instant customer support, capture leads, or enhance user experience, Neural Voice transforms any website into an intelligent, interactive platform.

Unlike traditional chatbots that require typing, Neural Voice enables visitors to simply click a button and speak naturally with your AI assistant. This creates a more engaging, accessible experience that can dramatically improve conversion rates and customer satisfaction.

Why Add Voice AI to Your Website?

Voice AI integration offers compelling advantages for modern websites:

⚡ Instant Engagement

Visitors get immediate responses without waiting for emails or callbacks

🌟 Improved Accessibility

Voice interaction is more natural and accessible than typing

📈 Higher Conversion Rates

Interactive voice experiences keep visitors engaged longer

🔄 24/7 Availability

Your AI assistant never sleeps, capturing leads round the clock

Prerequisites: What You Need Before Starting

Before integrating Neural Voice into your website, ensure you have:

  • Neural Voice Account: Sign up for free if you haven't already
  • Domain Verification: Add your website URL to your Neural Voice settings
  • Assistant ID: Your unique character ID from the Neural Voice dashboard
  • Website Access: Ability to edit your website's HTML or use a CMS

🔐 Important: Domain Verification Required

Before your Neural Voice agent will work, you must add your website URL to your settings at https://app.neural-voice.ai/settings. This security measure ensures your AI assistant only works on authorised domains.

Step-by-Step Integration Guide

Step 1: Add the Neural Voice Script

The first step is adding the Neural Voice script to your website. This enables the AI functionality across your entire site.

Add this script before the closing </body> tag:

📄 neural-voice-script.html
<script src="https://nv-app.neural-voice.ai/nv-app/nv-app.js"></script>

💡 Why in the Footer?

Placing the script before the closing </body> tag ensures your website loads quickly while still enabling the AI functionality. This prevents any impact on page speed performance.

Step 2: Create Your Voice AI Button

Once the script is installed, you need a button that visitors can click to activate your Neural Voice assistant. The magic happens through a special button ID format.

🚨 Important: Must Be an Actual HTML Button

Neural Voice only works with real HTML <button> elements. It will NOT work with:

  • ❌ Page builder "Button" widgets (Elementor, Divi, etc.)
  • ❌ Styled <a> links that look like buttons
  • ❌ <div> elements with button styling
  • ❌ Any element that isn't a genuine <button> tag

Always use HTML/Code widgets in page builders, never the built-in button widgets!

Button ID Format: nv-[YOUR-CHARACTER-UUID]

🎯 voice-button-example.html
<button id="nv-123e4567-e89b-12d3-a456-426614174000">
  🎤 Talk to Our AI Assistant
</button>

🔍 Finding Your Character ID

Your unique character ID is displayed at the bottom of your character editor page in the Neural Voice dashboard. Simply copy this UUID and paste it after "nv-" in your button ID.

✅ Correct vs ❌ Incorrect Button Examples

✅ CORRECT - Will Work:
<button id="nv-123e4567-e89b-12d3-a456-426614174000">Talk to AI</button>
❌ INCORRECT - Won't Work:
/* Page builder buttons create elements like this: */
<a id="nv-123e4567-e89b-12d3-a456-426614174000">Talk to AI</a>
<div id="nv-123e4567-e89b-12d3-a456-426614174000">Talk to AI</div>

Step 3: Style Your Button (Optional)

Make your voice AI button stand out with custom styling:

🎨 styled-voice-button.html
<button 
  id="nv-123e4567-e89b-12d3-a456-426614174000"
  style="background: linear-gradient(90deg, #1AADF0 0%, #00C853 100%); 
         color: white; 
         padding: 16px 32px; 
         border: none; 
         border-radius: 50px; 
         font-size: 1.1rem; 
         font-weight: bold; 
         cursor: pointer; 
         box-shadow: 0 4px 15px rgba(26,173,240,0.3);">
  🎤 Speak with Our AI Assistant
</button>

Platform-Specific Integration Instructions

Choose your platform below for detailed, step-by-step instructions tailored to your website builder:

📝 WordPress

🛒 Shopify

🎨 Wix

⬜ Squarespace

💎 Webflow

👻 Ghost

⚡ Quick Integration Summary

All platforms follow the same 2-step process: 1) Add the script to footer2) Create button with your unique ID

🔷 WordPress Integration

WordPress is the most popular website platform. Here's exactly how to add Neural Voice to any WordPress site:

📋 Step 1: Add the Neural Voice Script

Method A: Theme Editor (Recommended)

  1. Log into your WordPress admin dashboard
  2. Navigate to Appearance → Theme Editor
  3. Select Theme Footer (footer.php) from the file list
  4. Scroll down to find the </body> tag (usually near the bottom)
  5. Paste the Neural Voice script just before the </body> tag
  6. Click Update File
... other footer content ...
<script src="https://nv-app.neural-voice.ai/nv-app/nv-app.js"></script>
</body>
</html>

Method B: Plugin (Alternative)

If you prefer using a plugin, install "Insert Headers and Footers" or "Code Snippets" and add the script to the footer section.

🎯 Step 2: Add Your Voice AI Button

Using Block Editor (Gutenberg)

  1. Edit the page or post where you want the button
  2. Click the + (Plus) button to add a new block
  3. Search for and select "Custom HTML" block
  4. Paste your button code with your unique Neural Voice ID
  5. Click Update or Publish

Using Page Builders

⚠️ Critical: Must Use HTML Button Element

Do NOT use page builder "Button" widgets! These create styled divs or links that won't work with Neural Voice. You MUST use actual HTML <button> elements.

Elementor: Add "HTML" widget
Divi: Add "Code" module
Beaver Builder: Add "HTML" module

✅ Page Builder Step-by-Step

Elementor Example:
  1. Search for "HTML" widget (not "Button")
  2. Drag HTML widget to your page
  3. Paste your complete button code including <button> tags
  4. Update the page
What NOT to do:
  • ❌ Don't use Elementor "Button" widget and just change the ID
  • ❌ Don't use "Text" widget with link styling
  • ❌ Don't use any widget that creates <a> or <div> elements

✅ WordPress Success Indicators

  • Button appears on your website
  • No console errors in browser developer tools
  • Clicking button triggers voice interface

🛒 Shopify Integration

Perfect for e-commerce stores wanting to add voice assistance for product inquiries and customer support:

📋 Step 1: Access Theme Files

  1. Log into your Shopify admin panel
  2. Go to Online Store → Themes
  3. Find your current theme and click Actions → Edit code
  4. In the file explorer, locate theme.liquid under "Layout"
  5. Click to open the file

🔧 Step 2: Add Neural Voice Script

  1. Scroll down to find the </body> tag (usually near the bottom)
  2. Add the Neural Voice script just before </body>
  3. Click Save
{{ 'theme.js' | asset_url | script_tag }}
<script src="https://nv-app.neural-voice.ai/nv-app/nv-app.js"></script>
</body>

🎯 Step 3: Add Voice Button

Option A: Product Pages

  1. Navigate to Online Store → Themes → Customize
  2. Go to a product page
  3. Add a Custom Liquid section
  4. Paste your Neural Voice button code
  5. Position it near the "Add to Cart" button
  6. Save changes

Option B: Any Page Content

  1. Edit any page content in Online Store → Pages
  2. Switch to Show HTML view
  3. Insert your button code where desired
  4. Save the page

💡 Shopify Pro Tips

  • Place voice buttons on product pages for instant product questions
  • Add to checkout pages for order assistance
  • Include on homepage for general store help

🎨 Wix Integration

Wix makes it easy to add Neural Voice with their drag-and-drop interface:

📋 Step 1: Add Script via Tracking Tools

  1. Open your Wix editor
  2. Click Settings in the top menu
  3. Select Tracking & Analytics
  4. Click + New Tool
  5. Choose Custom from the dropdown
  6. Paste the Neural Voice script in the code box
  7. Set it to load on "All Pages"
  8. Choose "Body - end" for placement
  9. Click "Apply"

🎯 Step 2: Add HTML Element for Button

  1. In the Wix editor, click + Add on the left sidebar
  2. Go to Embed Code
  3. Select "HTML iframe"
  4. Drag the HTML element onto your page
  5. Click "Enter Code"
  6. Paste your Neural Voice button HTML
  7. Adjust the iframe size to fit your button
  8. Position and style as needed
  9. Click "Update" and then "Publish"
Wix HTML Element Code:
<div style="text-align: center; padding: 20px;">
  <button id="nv-123e4567-e89b-12d3-a456-426614174000"
          style="background: #FF6B6B; color: white; padding: 15px 30px; 
                 border: none; border-radius: 25px; font-size: 16px; 
                 cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2);">
    🎤 Talk to Our AI
  </button>
</div>

⬜ Squarespace Integration

Squarespace's clean interface makes Neural Voice integration straightforward:

📋 Step 1: Code Injection Method

  1. Log into your Squarespace admin
  2. Go to Settings → Advanced → Code Injection
  3. Scroll down to the "Footer" section
  4. Paste the Neural Voice script
  5. Click "Save"
/* Paste this in Footer Code Injection */
<script src="https://nv-app.neural-voice.ai/nv-app/nv-app.js"></script>

🎯 Step 2: Add Code Block for Button

  1. Edit the page where you want the voice button
  2. Click + (Plus) to add a new block
  3. Search for and select "Code" block
  4. Switch to "HTML" mode
  5. Paste your complete button HTML
  6. Click anywhere outside to preview
  7. Save and publish your page

💎 Webflow Integration

Webflow's professional design tools work perfectly with Neural Voice:

📋 Project Settings Method

  1. Open your Webflow project
  2. Click the Project Settings gear icon
  3. Go to Custom Code tab
  4. Scroll to "Footer Code" section
  5. Paste the Neural Voice script
  6. Save and publish

🎯 Adding the Button

  1. Drag an "Embed" element onto your page
  2. Double-click to edit the embed code
  3. Paste your Neural Voice button HTML
  4. Style the container div as needed
  5. Publish your site

👻 Ghost Integration

Perfect for blogs and content sites using Ghost CMS:

📋 Ghost Admin Integration

  1. Log into your Ghost admin panel
  2. Go to Settings → Code Injection
  3. Scroll to "Site Footer"
  4. Add the Neural Voice script
  5. Save settings

🎯 Adding Button to Posts/Pages

  1. Create or edit a post/page
  2. Click + (Plus) to add content
  3. Select "HTML" card
  4. Paste your button code
  5. Publish your content

🌐 Other Popular Platforms

🏪 BigCommerce

Script: Storefront → Script Manager → Create Script

Button: Use HTML widget in page builder

🌟 Weebly

Script: Settings → SEO → Footer Code

Button: Add "Embed Code" element

🔧 Drupal

Script: Appearance → Settings → Add custom JavaScript

Button: Content → Add HTML block

📱 GoDaddy Builder

Script: Settings → SEO → Advanced → Footer

Button: Add "HTML" section

Testing Your Integration

After completing the integration, test your Neural Voice assistant:

✅ Testing Checklist

  • ✓ Button appears on your website
  • ✓ Clicking the button activates the voice interface
  • ✓ Microphone permissions are requested properly
  • ✓ Your AI assistant responds to voice input
  • ✓ The conversation flow works as expected

Troubleshooting Common Issues

❌ Button Not Working (Most Common Issue)

  • Check if you used a real <button> element - Page builder "Button" widgets won't work!
  • Verify your domain is added in Neural Voice settings
  • Ensure the button ID matches your character UUID exactly (including "nv-" prefix)
  • Confirm the Neural Voice script is loading properly
  • Right-click your button → "Inspect Element" → verify it's a <button> tag, not <a> or <div>

⚠️ Script Not Loading

  • Check browser console for error messages
  • Ensure the script URL is correct and accessible
  • Try clearing browser cache and cookies

🔊 Microphone Issues

  • Ensure your website is served over HTTPS
  • Check browser microphone permissions
  • Test with different browsers and devices

Advanced Implementation Tips

Multiple Buttons for Different Use Cases

You can add multiple Neural Voice buttons for different purposes by creating separate assistants:

  • Sales Assistant: For product inquiries and lead generation
  • Support Assistant: For customer service and troubleshooting
  • Booking Assistant: For appointments and reservations

Each assistant gets its own unique ID, allowing you to create specialized voice experiences for different website sections.

Dynamic Button Placement

Consider strategic button placement for maximum engagement:

  • Homepage Hero Section: "Speak with our AI to learn more"
  • Product Pages: "Ask our AI about this product"
  • Contact Page: "Get instant answers via voice"
  • Pricing Page: "Talk to our AI about plans"

🚀 Ready to Transform Your Website?

Join thousands of businesses using Neural Voice to create engaging, interactive websites that convert more visitors into customers.

Next Steps: Maximising Your Voice AI Investment

Once your Neural Voice assistant is live, consider these optimization strategies:

  1. Monitor Performance: Track engagement metrics and conversation quality
  2. Refine Responses: Continuously improve your assistant's knowledge base
  3. A/B Test Placement: Experiment with button positions and messaging
  4. Gather Feedback: Ask users about their voice interaction experience
  5. Expand Use Cases: Add voice AI to more pages and workflows

💡 Pro Tip: Start Small, Scale Smart

Begin with one voice assistant on your most important page, then expand to other areas as you see success. This approach lets you optimize the experience before rolling out site-wide.

Support and Resources

Need help with your Neural Voice integration? Our team is here to support you:

  • Live Chat Support: Available through the Neural Voice dashboard
  • Documentation: Comprehensive guides at docs.neural-voice.ai
  • Community Forum: Connect with other Neural Voice users
  • Video Tutorials: Step-by-step visual guides

About Neural Voice

Neural Voice is the leading provider of AI voice solutions for websites and business communications. Our advanced voice AI technology enables natural, engaging conversations that help businesses improve customer experience, increase conversions, and automate support processes. With Neural Voice, any website can become an intelligent, interactive platform that truly understands and responds to visitor needs.

Ready to experience the power of voice AI on your website? Book a demo to see Neural Voice in action, or start your free trial today to begin transforming your digital presence with cutting-edge voice technology.

Ready to transform your customer communications?

Experience the power of Neural Voice AI assistants for your business.

Book a Demo