A voiceflow wordpress chatbot gives your site an AI assistant that you design as a conversation flow. Voiceflow is a builder for AI agents where you map out what the agent says, what it asks, and when it hands over to a human. Once the agent is ready, you publish it and add a small widget to your WordPress site. Visitors then chat with it through a familiar chat window.
This guide shows a voiceflow wordpress chatbot install from building the agent to embedding its widget on your site.
This guide covers the full voiceflow wordpress embed process. You will prepare the agent in Voiceflow, publish a version, add the website widget to WordPress with or without a plugin, customize the basics, and run end-to-end conversation checks.
If you have not added any chatbot to WordPress before, read our general guide on how to add an AI chatbot to WordPress first. It explains the main setup methods.
What Voiceflow Is and How It Works on WordPress
Voiceflow is a platform for designing and building AI agents. Unlike a simple FAQ bot, a Voiceflow agent follows a flow you design. You decide the greeting, the questions it asks, the answers it gives, and the points where it hands over to a human. That control is useful when a conversation has clear steps, such as qualifying a lead, booking a call, or guiding a visitor to the right service.
A voiceflow wordpress chatbot is built as a conversation flow first, so you design the questions and answers before you touch WordPress.
The agent runs on Voiceflow servers. Your WordPress site only displays it through the Voiceflow website widget, which connects to your published agent using your project ID and a version ID, usually production. When a visitor types a message, the widget sends it to Voiceflow, and the agent replies according to the flow you built.
Voiceflow offers two display modes. The floating mode shows a chat button, usually in the lower right corner, that opens the chat window when clicked. The embedded mode places the chat window inside a specific section of a page. Most WordPress sites start with the floating mode, because it works on every page.
Plan details change over time, so check the current Voiceflow pricing page before you commit to a plan.
Voiceflow’s official site lists the current plans and the flow builder features.
Before You Start: What You Need
First, make sure you have administrator access to your WordPress site. Installing plugins or adding site-wide code needs an administrator account. With an editor role, ask your site administrator for help with this step.
Before you start a voiceflow wordpress chatbot project, have your Voiceflow account and your main support answers ready.
Second, create a Voiceflow account with a business email your team can access. Keep the account details in your team’s password manager.
Third, plan the conversation before you open the builder. Write down the five to ten questions your visitors ask most often, the correct answers, and the points where the agent should hand over to a human.
Fourth, set the things the agent must never do. It must never promise a refund, approve a discount, or advise on a specific order. Write those limits down. A bot with clear boundaries is more trustworthy than one that tries to answer everything.
Last, back up your WordPress site before you add any code or plugin. A backup costs little and saves you if something clashes with your theme or another plugin.
Prepare the Agent in Voiceflow
The agent must be ready and published before anything appears on your site.
Step 1: Build the Flow
Log in to Voiceflow and create a new agent project. Start with a simple flow rather than a complex one. A good first flow greets the visitor, offers two or three common topics, answers the questions you prepared, and offers a human handoff when the visitor needs one.
Preparing the agent is the heart of a voiceflow wordpress chatbot build, because the widget only shows what you designed.
Keep each agent message short. Visitors read chat one bubble at a time, and long paragraphs feel like a form, not a conversation. Use buttons or quick replies where they help, such as letting the visitor choose pricing, delivery, or talking to the team.
Write the agent’s answers from your own site content. Use your FAQ page, your policy pages, and your service descriptions as the source of truth. When two pages disagree, fix the pages before anything else.
Step 2: Test Inside Voiceflow
Before you publish, test the agent inside Voiceflow. Run through the conversation as a visitor would. Ask the questions you prepared, including awkward ones such as a refund after the deadline or a product you no longer sell. Check that the agent answers from your content and offers a human contact when the question is outside its scope.
Test the handoff path too. Trigger the handoff on purpose and confirm the agent gives the visitor a clear next step, such as an email address or a contact form link. Fix the flow now, while testing is free and fast, rather than after visitors have seen the problem.
Step 3: Publish a Version
When the flow works, publish it. Voiceflow uses versions, and the live widget reads a specific version, usually production. Publishing creates the version your site will use. Until you publish, the widget has nothing to show, and changes you make in the builder will not appear on your site.
Remember this rule for later: every change to the agent or the widget settings needs a new publish before it takes effect on your live site. Saving a draft is not enough.
If your agent needs to answer from documents, first build a knowledge base for an AI support bot.
Voiceflow WordPress Chatbot: Embed the Website Widget
There are two ways to add the widget to your site: a code snippet plugin or a WordPress plugin. Pick one, and use only that one.
Method 1: Add the Snippet With a Code Snippet Plugin
Voiceflow provides an embed snippet for the website widget. In the Voiceflow dashboard, find the widget or integration settings for your agent and copy the snippet. The snippet loads the widget script and connects it to your project using your project ID and version ID. Copy it exactly as provided and do not edit it.
In WordPress, install and activate a header and footer code plugin such as WPCode. Add a new snippet with the Voiceflow code and set it to load in the footer on every page. This keeps the code out of your theme files, so a theme update cannot remove it. Paste the snippet exactly as copied, and do not paste it into a post or page content area, where the editor will usually strip it out.
After saving, open your site in a private or incognito browser window and look for the chat button, usually in the lower right corner. Click it and confirm the chat window opens and the agent greets you. If nothing appears, check that the snippet is active and set to load on every page, and clear your caches.
Method 2: Use a WordPress Plugin
If you prefer to avoid code, use a WordPress plugin that connects Voiceflow to your site. There are community plugins in the WordPress plugin directory that add the Voiceflow widget using your project ID and version ID. Search the plugin directory for Voiceflow and check the publisher and recent update history before you install.
After activation, open the plugin settings and enter your Voiceflow project ID and version ID, usually production. Some plugins also let you choose a section ID so the widget appears embedded inside a specific page section instead of as a floating button.
The plugin route is simpler, but you rely on a third-party plugin being maintained. Keep it updated, and check after each update that the widget still appears. If the plugin is abandoned or breaks with a WordPress update, switch to the snippet method rather than waiting for a fix.
Embedded Mode on a Single Page
If you want the chat window inside a page rather than as a floating button, use embedded mode. The widget snippet can be configured to render inside a specific element on the page, and some plugins offer a section ID field for the same purpose. Place the target element where the chat should sit and give it enough height so the window is usable.
Embedded mode suits help pages, contact pages, and support hubs where visitors expect to chat in place. Test the layout on desktop and mobile before you rely on it.
If you need a snippet plugin for the embed code, browse the official WordPress plugin directory.
Customize the Chat Widget
The voiceflow website widget settings control how the chat looks and what visitors see first. In the Voiceflow dashboard, open the widget settings for your agent. Set the colors to match your brand, choose a launcher style, and add a short welcome message of one or two sentences. Tell the visitor what the chat can help with and what to expect if a human needs to follow up.
A finished voiceflow wordpress chatbot should match your brand colors and greeting, so visitors treat it as part of your site.
Compare the widget with your real site colors. A widget that matches your brand looks professional, while one that clashes draws the wrong kind of attention. Try the welcome message on both desktop and mobile. Visitors skip long greetings, and a message that promises instant human help when nobody is online will let them down. Any change to widget settings needs a new publish before it takes effect on your live site.
For broader guidance on colors, text, and layout, see our guide on how to customize an AI chatbot widget in WordPress.
Run End-to-End Conversation Checks
A widget that loads is not the same as a chatbot that works. Run a full conversation check before you rely on it. Open your live site in a private window, start a chat, and work through the same questions you tested in Voiceflow. Confirm the answers match your site content and the handoff path leads somewhere useful.
Test a voiceflow wordpress chatbot with real customer questions, not just the happy path, before you show it to visitors.
Test on a real phone as well. The chat button should not cover your mobile menu, cookie banner, or checkout button. The chat window should be easy to close, and the message field should stay visible when the keyboard is open. Then test in a second browser, since a widget can work in one browser and fail in another.
Ask a colleague to try the chat as a visitor. Fresh eyes catch problems you will miss, such as a greeting that assumes knowledge the visitor does not have, or a button label that makes no sense outside the builder. Note every issue, fix it in Voiceflow, publish a new version, and test again.
How to Update the Bot
How do I update the bot? Edit the flow or the widget settings in Voiceflow, then publish a new version. The live widget reads the published version, so your changes appear on the site only after you publish. Saving a draft does nothing on the live site.
Updating a voiceflow wordpress chatbot means editing the flow in Voiceflow and republishing it — the WordPress embed stays the same.
Keep a simple update routine. When you change a policy, a price, or a service on your site, update the agent in the same week. Test the changed answers in Voiceflow first, publish, and then check the live widget. An agent that quotes last year’s prices is worse than one that says it does not know.
The widget usually points to the production version, so test changes in a draft or test version before you publish them to production. That way a half-finished flow never reaches your visitors.
When the Widget Does Not Appear
If the chat button does not show, work through these checks. First, confirm the agent is published. An unpublished agent has no live version for the widget to load. Open Voiceflow, check the published version, and publish again if needed.
If a voiceflow wordpress chatbot widget does not appear, check that the agent is published in Voiceflow and that caching is not hiding it.
Second, check that the snippet or plugin is active and set to load on every page. Open the page source in your browser and search for voiceflow. If the code is missing, the snippet did not save or is set to load elsewhere. Third, clear your caches, then check the site in a private window.
Fourth, check for plugin conflicts. Switch off other plugins for a while, beginning with other chat tools and security plugins that block third-party scripts. Also look in the browser console for JavaScript errors. Finally, confirm the project ID and version ID in the snippet or plugin settings match the ones in Voiceflow. A single wrong character breaks the connection.
For the general checklist, see our fixes for a WordPress AI chatbot not showing.
Limitations, Privacy, and Security
A Voiceflow agent follows the flow you designed. That is its strength and its limit. If a visitor asks something outside the flow, the agent needs a clear fallback: say it does not know and offer a human contact. A confident wrong answer harms trust more than an honest admission.
The agent is only as accurate as the content behind it. Review your source pages regularly and re-test the agent after every major site update. Voiceflow is also a third-party service, so your privacy policy should explain that chats are handled by a third-party provider.
Ask visitors only for the details you truly need, such as a name and an email address for follow-up. Never ask for passwords, full payment card numbers, or other sensitive details in chat. Protect your Voiceflow account with a strong, unique password and two-factor authentication if it is available. Keep your project ID and any API keys private, and restrict the widget to your own domains where Voiceflow offers that setting, so other sites cannot show your agent. For a full treatment of key safety, see our guide on how to keep WordPress chatbot API keys secure.
Frequently Asked Questions
Do I need a plugin?
No. You can add the Voiceflow widget with a code snippet plugin such as WPCode by pasting the embed snippet into the footer on every page. A WordPress plugin is the easier route if you want to avoid code: install it, enter your project ID and version ID, and save. Pick one and do not combine them, because running both can produce two chat widgets.
How do I update the bot?
Edit the flow or the widget settings in Voiceflow, then publish a new version. The live widget reads the published version, usually production, so your changes appear on the site only after you publish. After publishing, check the live widget in a private window to confirm the change took effect.
Can I show the Voiceflow widget on one page only?
Yes. Use embedded mode to place the chat window inside a specific section of one page, or set your code snippet plugin to load the widget script only on that page. Do not load the site-wide script and hide the widget with CSS elsewhere, since that loads the chatbot everywhere and only hides it.
Conclusion
To embed a Voiceflow AI agent on WordPress, build the flow in Voiceflow, test it, publish a version, and add the website widget to your site with a code snippet plugin or a WordPress plugin. Then customize the basics, run end-to-end conversation checks, and set a routine for publishing updates.
Your next step is to open Voiceflow, build a simple flow from your five most common visitor questions, and publish it. Add the widget to a staging copy of your site first, test the full conversation as a visitor would, and only then publish it live.