AI voice agent integrations for your website
You can add a published audentic voice agent to a website built with Lovable, v0, Bolt, Replit, or a coding assistant. Use the React component in a React app, or paste the website widget into a page that accepts custom scripts. Configure the agent's business knowledge in audentic, then approve the exact website origin where visitors will talk to it.
These guides use audentic's public React package and website widget. Each walks through the code change, publication, and a real browser conversation on your website.
Choose your website builder
| Build with | Follow this guide | What you will set up |
|---|---|---|
| Lovable | Add a voice agent to Lovable | Ask Lovable to install the React package, mount a voice component, and test the published site. |
| v0 | Add a voice agent to v0 | Add a Next.js Client Component and approve the deployed Vercel or custom-domain origin. |
| Bolt | Add a voice agent to Bolt | Give Bolt a focused integration prompt and publish a website with the voice widget. |
| Replit | Add a voice agent to Replit | Let Replit Agent add the React component or HTML widget and verify the published app. |
For an existing React or Next.js repository, go directly to the React integration. For a site with a custom HTML area, follow the website widget guide.
Work with Codex, Claude Code, Cursor, or ChatGPT
A coding assistant with repository access can add the widget to your app. An assistant working only in chat can generate code and explain where to put it. Supply your published agent ID, the website framework, and the coding-agent guide or audentic integration skill.
Use this starting prompt and fill in your project details:
Add an audentic website voice agent to this project.
Agent ID: YOUR_AGENT_ID
Integration docs: https://www.audentic.org/docs/developers/react
Inspect our framework and use its existing conventions. For React,
install @audentic/react and render SessionControl with the agent ID.
In Next.js, place it in a Client Component. For a plain HTML site,
use the floating widget snippet from audentic's website widget guide.
Place the agent beside our contact or product-help content. Keep the
existing navigation and page layout. The agent should connect only
after a visitor starts a conversation. No OpenAI key belongs in this
app. Run the project's build and explain which exact production and
development origins I need to approve in audentic.
The assistant installs an existing agent on your website. Create, configure, and publish that agent in the audentic workspace; the quickstart covers those steps.
Prepare your agent before integrating
- Create an agent and add reviewed business knowledge, such as services, product details, opening hours, and contact information.
- Test the questions visitors are likely to ask in Test & publish.
- Add the website's exact origin under Website addresses.
https://example.comandhttps://www.example.comneed separate entries; staging sites and localhost ports also need their own entries. - Publish the agent and copy its agent ID. The ID can appear in browser code; audentic handles model access on its server.
For example, a studio website can answer questions about classes and opening hours, then collect a visitor-confirmed enquiry with Take a message enabled. The owner reviews it in the Inbox and follows up. Explore the gallery for agents you can fork and adapt with your own facts.
Why does a widget work in one place but not another?
The builder preview, the published website, and a custom domain can have different origins and browser permissions. A successful conversation in audentic tests your agent; it does not approve an external website automatically.
- The widget appears but cannot connect: confirm that the agent is published and the current browser origin is listed in Website addresses.
- The microphone is unavailable: use HTTPS or localhost and allow microphone access in your browser.
- The editor preview fails: an embedded preview may restrict microphone access. Test the published page in its own browser tab. If you control a parent iframe, it needs
allow="microphone; autoplay". - The custom domain fails after launch: approve its origin separately and republish the website with your integration changes.
- A restrictive security policy blocks requests: follow the script, API, frame, and styling requirements in the React and browser guide.
Before launch, test while signed out of audentic on desktop and mobile: start, speak, hear the response, interrupt, and end the conversation. Review the saved transcript and any confirmed enquiry in your workspace. See the voice agent FAQs for visitor access, forms, knowledge, and current product limits.