How to Add Voice AI to Your Website: Complete Implementation Guide

Adding voice AI to your website lets visitors speak instead of type. They click a button, ask their question, and get instant answers—no phone call required.

This guide shows you how to embed a voice AI widget on any website in under 5 minutes.

Why Voice on Your Website?

The problem with forms and chat:

• Forms are friction. Visitors abandon them.
• Chat requires typing. Mobile users hate it.
• Neither captures tone, urgency, or nuance.

Voice advantages:

• 3x faster than typing
• Works great on mobile
• Captures intent more accurately
• Feels more personal and helpful
• Accessible to users who struggle with typing

The Embed Code

Here's all you need—one line of code:

<script src="https://widget.edesy.in/v1/embed.js"
        data-agent-id="YOUR_AGENT_ID"
        async>
</script>

Add this before the </body> tag on any page. A voice button appears in the bottom-right corner.

Platform-Specific Instructions

WordPress

Option 1: Theme Editor

1. Go to Appearance → Theme Editor
2. Open footer.php
3. Add the script before </body>
4. Save

Option 2: Plugin (Recommended)

1. Install "Insert Headers and Footers" plugin
2. Go to Settings → Insert Headers and Footers
3. Paste the script in the "Footer" section
4. Save

Option 3: Specific Pages Only Use a plugin like "Header Footer Code Manager" to add the script only to specific pages (pricing, contact, support).

Shopify

1. Go to Online Store → Themes
2. Click Actions → Edit code
3. Open theme.liquid
4. Add the script before </body>
5. Save

To show only on certain pages:

{% if template contains 'product' or template contains 'contact' %}
<script src="https://widget.edesy.in/v1/embed.js"
        data-agent-id="YOUR_AGENT_ID"
        async>
</script>
{% endif %}

Webflow

1. Go to Project Settings → Custom Code
2. Paste the script in "Footer Code"
3. Publish

For specific pages:

1. Select the page in the Pages panel
2. Open Page Settings
3. Add to "Before tag"

Wix

1. Go to Settings → Custom Code
2. Click "Add Custom Code"
3. Paste the script
4. Set placement to "Body - end"
5. Apply to: All pages (or specific pages)

Squarespace

1. Go to Settings → Advanced → Code Injection
2. Paste in the "Footer" section
3. Save

React/Next.js

// components/VoiceWidget.tsx
'use client';

import { useEffect } from 'react';

export function VoiceWidget({ agentId }: { agentId: string }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://widget.edesy.in/v1/embed.js';
    script.setAttribute('data-agent-id', agentId);
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [agentId]);

  return null;
}

// Usage in layout or page
<VoiceWidget agentId="your-agent-id" />

Vue.js

<template>
  <div></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

const props = defineProps(['agentId']);
let script;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://widget.edesy.in/v1/embed.js';
  script.setAttribute('data-agent-id', props.agentId);
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) document.body.removeChild(script);
});
</script>

Customization Options

Colors

<script src="https://widget.edesy.in/v1/embed.js"
        data-agent-id="YOUR_AGENT_ID"
        data-primary-color="#0070f3"
        data-background-color="#ffffff"
        data-text-color="#000000"
        async>
</script>

Position

<!-- Bottom left instead of bottom right -->
<script src="https://widget.edesy.in/v1/embed.js"
        data-agent-id="YOUR_AGENT_ID"
        data-position="bottom-left"
        async>
</script>

Options: bottom-right (default), bottom-left, top-right, top-left

Custom Button Text

<script src="https://widget.edesy.in/v1/embed.js"
        data-agent-id="YOUR_AGENT_ID"
        data-button-text="Talk to us"
        async>
</script>

Language

<script src="https://widget.edesy.in/v1/embed.js"
        data-agent-id="YOUR_AGENT_ID"
        data-language="hi"
        async>
</script>

Supported: en, hi, ta, te, bn, mr, gu, kn, ml, pa, and more.

Auto-Open

<!-- Widget opens automatically after 5 seconds -->
<script src="https://widget.edesy.in/v1/embed.js"
        data-agent-id="YOUR_AGENT_ID"
        data-auto-open="5000"
        async>
</script>

Conditional Display

Show only on specific pages

<script>
  // Only load on contact and pricing pages
  if (window.location.pathname.includes('/contact') ||
      window.location.pathname.includes('/pricing')) {
    var script = document.createElement('script');
    script.src = 'https://widget.edesy.in/v1/embed.js';
    script.setAttribute('data-agent-id', 'YOUR_AGENT_ID');
    document.body.appendChild(script);
  }
</script>

Hide on checkout

<script>
  // Don't load on checkout
  if (!window.location.pathname.includes('/checkout')) {
    var script = document.createElement('script');
    script.src = 'https://widget.edesy.in/v1/embed.js';
    script.setAttribute('data-agent-id', 'YOUR_AGENT_ID');
    document.body.appendChild(script);
  }
</script>

Desktop only

<script>
  // Only on screens wider than 768px
  if (window.innerWidth > 768) {
    var script = document.createElement('script');
    script.src = 'https://widget.edesy.in/v1/embed.js';
    script.setAttribute('data-agent-id', 'YOUR_AGENT_ID');
    document.body.appendChild(script);
  }
</script>

Programmatic Control

The widget exposes a JavaScript API for advanced control:

// Open the widget
window.EdesyVoice.open();

// Close the widget
window.EdesyVoice.close();

// Check if widget is open
const isOpen = window.EdesyVoice.isOpen();

// Set user context
window.EdesyVoice.setContext({
  userId: '12345',
  plan: 'premium',
  name: 'John Doe'
});

// Listen for events
window.EdesyVoice.on('conversation:started', () => {
  console.log('User started talking');
  analytics.track('voice_conversation_started');
});

window.EdesyVoice.on('conversation:ended', (data) => {
  console.log('Conversation ended', data.duration, data.outcome);
});

Tracking & Analytics

Google Analytics 4

window.EdesyVoice.on('conversation:started', () => {
  gtag('event', 'voice_widget_opened', {
    'event_category': 'engagement'
  });
});

window.EdesyVoice.on('conversation:ended', (data) => {
  gtag('event', 'voice_conversation_completed', {
    'event_category': 'engagement',
    'event_label': data.outcome,
    'value': data.duration
  });
});

Segment

window.EdesyVoice.on('conversation:ended', (data) => {
  analytics.track('Voice Conversation', {
    duration: data.duration,
    outcome: data.outcome,
    transcript_available: data.hasTranscript
  });
});

Performance Impact

The widget is designed for minimal impact:

• Script size: ~45KB gzipped
• Load behavior: Async, non-blocking
• Core Web Vitals: No impact on LCP, FID, or CLS
• Audio: Loaded only when user clicks

The widget does NOT:

• Slow down page load
• Affect SEO rankings
• Block rendering
• Preload audio resources

Troubleshooting

Widget not appearing?

1. Check browser console for errors
2. Verify agent ID is correct
3. Confirm script is before </body>
4. Test in incognito (extensions can interfere)

Microphone not working?

1. User must grant permission when prompted
2. HTTPS required (microphone blocked on HTTP)
3. Check browser microphone settings

Widget appears but no audio?

1. Check agent is configured and active
2. Verify no ad blocker is interfering
3. Test with different browser

Style conflicts?

The widget uses Shadow DOM to isolate styles. If you still see conflicts:

/* Override widget z-index if needed */
#edesy-voice-widget {
  z-index: 99999 !important;
}

Security Considerations

HTTPS Required

Browsers require HTTPS for microphone access. The widget won't work on HTTP sites.

Domain Allowlisting

Optionally restrict which domains can use your agent:

1. Go to Agent Settings → Security
2. Add allowed domains: yoursite.com, www.yoursite.com
3. Requests from other domains will be rejected

User Data

• Audio is processed in real-time, not stored by default
• Enable recording only if needed for compliance
• Transcripts can be configured for retention or deletion

Real-World Results

E-commerce Site

• 30% of product questions now handled by voice
• Average session duration increased 45%
• Support tickets reduced 25%

Healthcare Portal

• Patients book appointments 60% faster
• Mobile booking completion up 3x
• No-show rate decreased (voice confirmations)

SaaS Website

• Demo requests increased 40%
• Visitors spend 2x longer on pricing page
• Lead quality improved (voice captures intent better)

Conclusion

Adding voice AI to your website:

1. Takes 5 minutes or less
2. Requires just one line of code
3. Works on any platform
4. Improves engagement and conversion

Start with your highest-traffic pages (homepage, pricing, contact) and measure the impact.

Ready to add voice AI to your website? Get your embed code from the Edesy dashboard.