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.

🔐 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.

<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.

🚨 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="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

<button id="nv-123e4567-e89b-12d3-a456-426614174000">Talk to AI</button>

/* 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>

<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>

⚡ Quick Integration Summary

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

📋 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

✅ WordPress Success Indicators

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

📋 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

6. Scroll down to find the </body> tag (usually near the bottom)
7. Add the Neural Voice script just before </body>
8. 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

📋 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"

<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>

📋 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

📋 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

7. Drag an "Embed" element onto your page
8. Double-click to edit the embed code
9. Paste your Neural Voice button HTML
10. Style the container div as needed
11. Publish your site

📋 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

6. Create or edit a post/page
7. Click + (Plus) to add content
8. Select "HTML" card
9. Paste your button code
10. Publish your content

✅ 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

🚀 Ready to Transform Your Website?

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

💡 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.