Why Add a Voice Agent to Your Website?
Most website visitors leave without making contact. They land on your page, have a question, can't find the answer quickly enough, and move on. A voice AI agent changes that equation entirely — it greets visitors, answers questions in real time, handles objections, and books appointments, all without any human involvement.
Unlike a chat widget that expects visitors to type, a voice agent lets them simply speak. The barrier to engagement drops dramatically. Visitors who would never fill out a contact form will happily say "how much does it cost?" to a voice widget that responds instantly and naturally.
What You Will Need
Before you start, confirm you have the following:
- ✓ A website — any platform works: WordPress, Shopify, Wix, Squarespace, Webflow, or plain HTML. If you can paste a snippet of HTML somewhere on your site, you can add the widget.
- ✓ A Talking Widget account — free trial available at talkingwidget.ai/onboarding. No credit card required to get started.
- ✓ 5 minutes — seriously. The setup is that fast. Configuration takes the most time; the actual code install is under 60 seconds.
Step-by-Step Setup
Follow these five steps in order. By the end, your AI voice agent will be live on your website and talking to visitors.
Head to talkingwidget.ai/onboarding and create your account. Enter your business name, email, and a password. You will land in your dashboard immediately — no email verification hold-up, no credit card form.
Your account comes with a pre-configured AI agent ready to customise. You are not starting from scratch.
In your dashboard, open the Agent Settings panel. This is where you teach your AI agent about your business. Work through these fields:
- Industry — select your category (trades, dental, real estate, hospitality, retail, or general)
- Business name — how the agent introduces itself
- Greeting — the first thing your agent says when a visitor clicks the widget
- Services and pricing — paste in your key offerings so the agent can answer "what do you charge?" accurately
- Opening hours — the agent handles after-hours calls differently when it knows your schedule
- FAQs — any questions you get repeatedly, answered exactly how you want them answered
The agent uses this information to answer visitor questions accurately and in your voice. The more context you provide, the better it performs. You can update this information at any time from your dashboard — changes go live instantly.
In your dashboard, navigate to Install Widget. You will see your personalised embed code — two lines of HTML that include your unique agent ID:
<!-- Talking Widget: paste before </body> --> <script type="module" src="https://unpkg.com/@telnyx/ai-agent-widget@0.31.1/dist/bundle.js"></script> <telnyx-ai-agent-widget agent-id="YOUR_AGENT_ID"></telnyx-ai-agent-widget>
Click Copy Code. The snippet is now on your clipboard, with your real agent ID already filled in. Do not edit it manually — use the copy button to avoid introducing errors.
The code needs to go just before the closing </body> tag on every page where you want the widget to appear. Here is exactly where to find that location on the most common platforms:
Open footer.php (or your active theme's equivalent). Paste the snippet immediately before </body>. Save. Alternatively, install the "Insert Headers and Footers" plugin and paste into the Footer section — no theme file editing required.
Open theme.liquid. Find the </body> closing tag — it is near the bottom of the file. Paste the snippet immediately before it. Save. The widget appears on all storefront pages automatically.
In your Wix dashboard, go to Settings → Custom Code → Add Custom Code. Paste the snippet, set placement to Body - end, and choose to apply it to All Pages. Publish your site to activate.
Navigate to Settings → Advanced → Code Injection. Paste the snippet into the Footer field. Save. This injects the code into every page on your Squarespace site. Available on Business plan and above.
Open each HTML file in a text editor. Locate the </body> closing tag — typically at the very bottom of the file. Paste the snippet immediately before it. Save and upload the updated files to your server.
Webflow, Weebly, GoDaddy Website Builder, and similar platforms all have a "Custom Code" or "Footer Code" section. Paste the snippet there and it will appear site-wide. Check your platform's help docs for the exact menu path.
After saving your changes, open your website in a new browser tab. You should see the Talking Widget button — typically a microphone icon — in the bottom-right corner of your page.
Click it, grant microphone permission when prompted, and say hello to your agent. Ask it a question you included in your configuration — "what are your opening hours?" or "how much do you charge?" Confirm the agent responds correctly and sounds natural.
If everything looks good, you are live. Your AI voice agent is now on your website, available 24 hours a day, 7 days a week, to every visitor who arrives.
Platform-Specific Tips
WordPress
If you manage multiple WordPress sites, the "Insert Headers and Footers" plugin (by WPBeginner) is the cleanest approach — it avoids editing theme files directly, which means your widget survives theme updates without being overwritten. If you are running a page builder like Elementor or Divi, you can also add the snippet via the global footer settings in those builders.
Shopify
The widget loads on all storefront pages — product pages, cart, checkout (where supported), and your homepage. If you only want the widget on specific pages, use Shopify's template system to add the code to individual template files rather than the global theme.liquid.
Wix
Wix's Custom Code feature requires your site to be connected to a Wix Premium plan. If you are on the free Wix tier, upgrade first. Once the widget is added via Custom Code, it persists across all site republishes automatically — you do not need to re-add it after updating your site content.
Tip: Before going live with real visitors, test your agent on mobile. Open your site on your phone, tap the widget, and speak to it in a real-world environment. Confirm the microphone prompt appears, the voice sounds clear, and the agent's responses are accurate. Mobile testing catches issues that desktop testing often misses.
Common Issues and Fixes
-
Widget not appearing on my site
The most common cause is the code being placed in the wrong location. Confirm the snippet is inside the
<body>section of your HTML — specifically just before the</body>closing tag, not in the<head>. Also check that your browser is not blocking the unpkg.com CDN via an extension or corporate firewall. Try in an incognito window with extensions disabled. -
The widget appears but I cannot hear anything / no audio
Your browser needs microphone permission to enable the voice agent. When you click the widget for the first time, your browser should show a permission prompt. If you accidentally denied this, go to your browser's site settings (click the padlock icon in the address bar) and reset the microphone permission to "Allow". Refresh the page and try again.
-
The widget is hidden behind other elements on my page
This is a CSS z-index issue. Your page may have another element (a sticky header, a chat plugin, or a cookie banner) with a higher z-index than the widget. You can override this by adding a style rule:
telnyx-ai-agent-widget { z-index: 99999 !important; }in your site's CSS. Alternatively, adjust the conflicting element's z-index downward. -
The agent is giving incorrect information about my business
Return to your Talking Widget dashboard and review your agent configuration. The agent only knows what you have told it — if a key piece of information is missing or outdated, update it in Agent Settings. Changes take effect immediately on your live site with no re-publishing required. For best results, write your FAQ answers in full sentences the way you would actually say them aloud.
-
Can I customise the widget's appearance?
Yes. The widget supports colour, position, and greeting text customisation from your dashboard. Advanced styling (custom button shape, custom icon) is available on the Professional plan. The widget is built as a web component, so it inherits your site's base font stack automatically.
Ready to add your voice agent?
It takes 5 minutes and your first 14 days are free. No credit card required. Sign up, configure your agent, paste the code — and your website starts talking today.