How to Add a Voice Assistant to WordPress (2026, No Code)

WordPress powers roughly 40% of the web, but most WordPress sites still handle visitor questions the same way they did a decade ago: a contact form, a lonely phone number in the footer, and maybe a text chat widget nobody answers after 6 PM. Meanwhile visitors increasingly expect to talk to a site the way they talk to their phone.

Adding a voice assistant to WordPress used to mean hiring a developer, wiring up telephony, and hoping it did not tank your page speed. In 2026 it is a copy-paste job. If you can add a script to your site header or footer, you can add a full voice AI that answers questions out loud, in 24+ languages, without a single line of code.

This post breaks down exactly how to add a voice assistant to WordPress: the two install methods (plugin vs theme file), how to verify it works, how to restrict it to certain pages, how to customize it, and how to fix the two things that go wrong most often.

Want the fastest path? The AI Voice Agent Widget is a single async script tag you paste before </body>. It loads a floating button that opens a voice panel — no plugin dependency, no theme lock-in. You can grab a starter snippet from the free Voice Widget Generator.

Quick verdict (TL;DR)

• Fastest, safest method: use a headers-and-footers plugin (WPCode or "Insert Headers and Footers") and paste the widget script into the Footer box. Works on every theme, survives theme updates.
• No-plugin method: paste the script before </body> in your child theme's footer.php. Cleaner, but you must use a child theme or a theme update will wipe it.
• The script is one line, async, and under ~50KB — it will not hurt your Core Web Vitals.
• Page targeting (show on pricing, hide on checkout) is done with the plugin's conditional logic or a small PHP conditional.
• Compatible with Elementor, Divi, Gutenberg, and WooCommerce because the widget renders inside a Shadow DOM and does not touch your theme's CSS.

Why add voice to a WordPress site

Text chat has a ceiling. Visitors have to type, wait, read, and type again — and most bounce before they finish. Voice collapses that loop: the visitor clicks, allows the microphone, and simply asks. For a lot of WordPress sites that is the difference between a captured lead and a closed tab.

Concretely, a voice assistant on WordPress is a good fit when you have:

• A service or local business site where visitors ask the same handful of questions (hours, pricing, "do you cover my area").
• A landing page or campaign page where you want a low-friction way to answer objections at the moment of highest intent.
• A WooCommerce store where shoppers ask about shipping, returns, or product fit before buying.
• A multilingual audience — the widget speaks 24+ languages and can greet visitors in their own language.

The other quiet benefit: it is the same agent across channels. The voice agent that answers on your website can also take phone calls and handle WhatsApp, so you build the knowledge base once and reuse it everywhere. Under the hood it uses WebRTC (LiveKit) for real-time, low-latency audio directly in the browser — no phone call, no app install. If you want the technical detail on that, see WebRTC browser calls.

What you are actually adding

Before the steps, here is the thing you will be pasting. It is a single asynchronous script tag:

<script
  src="https://app.edesy.ai/widget/voice-widget.js"
  data-api-key="wk_live_xxx"
  async
></script>

Replace wk_live_xxx with your own widget key from your Edesy dashboard. That is the whole payload. Because it is async, it never blocks your page from rendering, and because the bundle is under ~50KB it does not move your Core Web Vitals. When it loads, it injects a floating launcher button (bottom-right by default). A visitor clicks it, the browser asks for microphone permission, they allow it, and they start talking to your agent.

Crucially, the widget renders inside a Shadow DOM. That means its styles are fully isolated from your theme — your WordPress CSS cannot leak in and break the widget, and the widget cannot leak out and break your layout. This is why it works identically on a stock theme, Elementor, or a heavily customized Divi build.

Method A: Headers-and-footers plugin (recommended)

This is the method to use unless you have a specific reason not to. It works on every theme and survives theme and plugin updates because the snippet lives in the database, not in a theme file.

Step 1 — Install a snippet plugin. In your WordPress admin, go to Plugins → Add New and install one of:

• WPCode (formerly "Insert Headers and Footers by WPCode") — the most popular, with built-in conditional logic.
• Insert Headers and Footers by WPBeginner — simpler, fewer options, perfectly fine.

Activate it.

Step 2 — Open the footer box. In WPCode, go to Code Snippets → Header & Footer. In Insert Headers and Footers, go to Settings → Insert Headers and Footers. You will see three boxes: Header, Body, and Footer.

Step 3 — Paste into the Footer box. Paste the widget script (with your real data-api-key) into the Footer box, not the header. The footer box outputs right before </body>, which is exactly where the widget wants to load. Putting it in the footer keeps it out of the critical rendering path.

Step 4 — Save. Click Save. Open your site in a new tab (or an incognito window to dodge caching) and you should see the floating button appear within a second or two.

That is it. No FTP, no code editor, nothing to break on the next theme update.

Method B: Theme footer.php (no plugin)

If you would rather not add a plugin, you can place the script directly in your theme. Use a child theme. If you edit the parent theme's footer.php directly, the next theme update will overwrite it and your widget will silently vanish.

Step 1 — Set up (or confirm) a child theme. If you do not already have one, create a child theme so your edits persist. Many themes ship a child theme, or you can generate one with a free child-theme plugin.

Step 2 — Edit footer.php. Go to Appearance → Theme File Editor, select your child theme, and open footer.php. If your child theme does not have its own footer.php, copy the parent theme's footer.php into the child theme first.

Step 3 — Paste before </body>. Find the closing </body> tag near the bottom of the file and paste the widget script immediately above it:

    <!-- ... existing footer markup ... -->
 
    <script
      src="https://app.edesy.ai/widget/voice-widget.js"
      data-api-key="wk_live_xxx"
      async
    ></script>
  </body>
</html>

Step 4 — Update the file and reload your site. The floating button should appear.

For a WordPress-specific walkthrough with screenshots and the exact placement rules, see the dedicated WordPress voice widget guide.

Verifying it works

Do not trust "I saved it" — confirm it on the live site:

1. Open your homepage in an incognito/private window. This bypasses your browser cache and any page-cache plugin serving you a stale copy.
2. Look for the floating button, bottom-right by default. It should appear within a second of the page settling.
3. Click it. The voice panel opens and your browser prompts for microphone access.
4. Allow the mic and say something like "what are your hours?" The agent should respond out loud.
5. Check the source if the button is missing: view page source (Ctrl/Cmd+U) and search for voice-widget.js. If it is not there, your snippet did not save or a cache is serving an old page — clear your caching plugin and CDN.

Restricting the widget to certain pages

You rarely want the widget on every page. A common pattern: show it on high-intent pages (pricing, contact, service pages) and hide it where it would distract (checkout, thank-you pages).

With WPCode (easiest): WPCode snippets have built-in Smart Conditional Logic. Edit the snippet, open the conditional logic panel, and set rules like "Show only if Page URL is /pricing" or "Hide if Page URL contains /checkout." No code.

With a PHP conditional (theme method): wrap the script in WordPress conditional tags in footer.php:

<?php if ( is_page( array( 'pricing', 'contact' ) ) || is_front_page() ) : ?>
<script
  src="https://app.edesy.ai/widget/voice-widget.js"
  data-api-key="wk_live_xxx"
  async
></script>
<?php endif; ?>

To hide it on WooCommerce checkout specifically, use if ( ! is_checkout() ).

There is also a server-side safety net: the widget key is bound to a domain whitelist with rate limiting, so even if the script ends up somewhere unexpected it will not load on domains you did not authorize.

Customization and branding

The widget is meant to look like part of your site, not a bolt-on. From your Edesy dashboard you can set:

• Color — match the launcher and panel to your brand.
• Position — bottom-right or bottom-left (see the floating vs inline discussion in our companion post below).
• Launcher style — a compact icon button or a wider label pill ("Talk to us").
• Greeting — the first line the agent says when the panel opens.
• Logo — your logo in the panel header.

Most of this is dashboard configuration, so you do not touch the snippet again after install. If you want to preview options before committing, the Voice Widget Generator lets you play with color, position, and launcher style and spits out the exact snippet.

Compatibility: Elementor, Divi, Gutenberg, WooCommerce

The Shadow DOM isolation is what makes this section short and boring in the best way:

• Elementor / Divi: Both are page builders that inject a lot of their own CSS. Because the widget's styles live inside a Shadow DOM, there is no collision. Install via Method A (plugin) so the script loads globally regardless of which builder rendered the page.
• Gutenberg (block editor): No special handling needed. The footer snippet loads on block-built pages just like any other.
• WooCommerce: Works out of the box. The one thing to decide is whether to show it on cart/checkout. Many stores hide it on /checkout to keep the payment flow distraction-free (see the page-targeting section above), and keep it on product and category pages where pre-purchase questions happen.

Troubleshooting

Widget not showing

Work through these in order:

1. Caching. This is the number-one cause. Clear your WordPress page cache (WP Rocket, W3 Total Cache, LiteSpeed, etc.) and your CDN cache (Cloudflare "Purge Everything"). Then reload in an incognito window.
2. Wrong box. In the plugin method, confirm the snippet is in the Footer box, not the Header, and that the snippet is toggled Active.
3. Theme update wiped it. If you used Method B on the parent theme instead of a child theme, an update will have removed it. Reinstall via a child theme or switch to Method A.
4. Domain not whitelisted. If the site loads on a staging or preview domain, the key's domain whitelist may block it. Add the domain in your dashboard.
5. Console errors. Open the browser console (F12) and look for errors mentioning voice-widget.js. A blocked request usually points to a whitelist or key issue.

Microphone permission problems

• HTTPS is required. Browsers only grant microphone access on secure origins. Make sure your WordPress site is served over HTTPS (it should be in 2026).
• Permission previously denied. If a visitor clicked "Block," the browser remembers it. They need to re-enable the mic for your site via the padlock icon in the address bar. There is nothing to fix on your end.
• iOS Safari. Voice requires a user gesture — the mic prompt appears after the click, which is exactly how the launcher flow works, so this is handled by design.

Frequently asked questions

How do I add a voice assistant to WordPress without a plugin?

Paste the one-line widget script before the </body> tag in your child theme's footer.php (Method B above). It is a single async <script> tag with your data-api-key. Use a child theme so a future theme update does not overwrite it. If you would rather not touch theme files at all, the plugin method (WPCode) is faster and safer. Either way you can start from a ready-made snippet in the Voice Widget Generator.

Will a WordPress voice widget slow down my site?

No meaningfully. The script is loaded async, so it never blocks your page from rendering, and the bundle is under ~50KB. Because it does not sit in the critical rendering path, it does not move your Core Web Vitals (LCP, CLS, INP). Placing it in the footer, as this guide recommends, keeps it even further out of the way.

Does the voice widget conflict with Elementor or Divi CSS?

No. The widget renders inside a Shadow DOM, which fully isolates its styles from your theme and page builder. Elementor's and Divi's CSS cannot leak into the widget, and the widget's CSS cannot leak into your layout. That is why it behaves identically across stock themes and heavily customized builder sites.

Can I show the voice bot only on specific pages?

Yes. With WPCode, use its Smart Conditional Logic to show or hide the snippet by URL. With the theme-file method, wrap the script in WordPress conditionals like is_page(), is_front_page(), or ! is_checkout(). A common setup is to show it on pricing and contact pages and hide it on WooCommerce checkout.

Is it the same assistant as my phone line?

It can be. Edesy uses one agent across channels, so the voice assistant on your WordPress site can share its knowledge base and behavior with your phone and WhatsApp agents. You configure the agent once and embed it wherever you need it, including the browser via WebRTC browser calls.

Conclusion

Adding a voice assistant to WordPress in 2026 is a paste-and-save task, not a development project. Use a headers-and-footers plugin and drop the one-line script into the Footer box (Method A), or place it before </body> in a child theme (Method B). Verify it in an incognito window, restrict it to the pages that matter, brand it to match your site, and you have a voice AI answering visitors in 24+ languages — without a developer and without a Core Web Vitals penalty.

Ready to put it on your site? Grab your snippet from the AI Voice Agent Widget page, or start free and have it live before your next coffee.

Related resources

• AI Voice Agent Widget — the embeddable widget and how it works
• WordPress voice widget — WordPress-specific install guide
• WebRTC browser calls — the real-time audio tech behind the widget
• AI Voice Agent — the full voice platform across phone, WhatsApp, and web
• Voice Widget Generator — free tool to configure and copy your snippet
• Floating vs Inline Voice Widget: Which Placement Wins? — pick the right placement for your pages