audentic

Add an AI voice agent to a Replit app

Add an Audentic voice agent to a Replit web app with a floating website widget or the React component. Publish the agent in Audentic, allow the app's exact origin, and publish the website through Replit. The widget connects visitors to Audentic's hosted voice service; the Replit app does not need an OpenAI API key.

This guide uses the floating button because it works with websites that serve HTML, including projects with a backend. For React, the React integration guide offers an inline component.

Prepare your agent and website addresses

Create and test an agent using the quickstart. Review the business information and instructions, then open Test & publish in Audentic. Under Website addresses, add the exact origin of each website hosting the widget and select Publish agent.

Replit's development Preview has a temporary .replit.dev URL, while a published app uses its own .replit.app URL. Inspect your app's actual URL; the editor's https://replit.com origin is not your website origin. Replit's Preview documentation explains the temporary URL and the New tab control.

For production, an entry looks like https://your-app.replit.app. Use no page path or wildcard. A custom domain needs another entry, and https://example.com and https://www.example.com are separate origins. Local testing needs the exact port, such as http://localhost:4000.

Copy your published agent ID. It is a public identifier, so it can appear in the script attributes. Keep provider credentials on Audentic's server.

Give Replit Agent this prompt

Replace the placeholders and paste the prompt into the existing web project:

Add a floating Audentic voice button to this Replit web app.
My published agent ID is YOUR_AGENT_ID.
My production website origin is https://YOUR_APP.replit.app.

Inspect the app's framework and locate its shared HTML document or layout.
Load https://www.audentic.org/widget.js once with data-agent-id set to my
agent ID, data-position="bottom-right", and defer. Preserve existing pages,
forms, and authentication. Do not create a new voice backend or request an
OpenAI API key. In a React SPA, use the HTML entry document; in a server-
rendered app, use the shared HTML template and the framework's script-loading
conventions. Run the usual build or typecheck. Report the exact development,
production, and custom-domain origins that need approval in Audentic.
Explain what must be checked on the published app with a real microphone.

Replit Agent implements the website change. Save the agent's knowledge and publish it in Audentic before testing visitor conversations. The coding-agent guide provides more context to give an assistant.

Review the floating widget code

For a static HTML page, add this once before the closing body tag. For a shared server template, include it once in the document layout so it appears on the intended pages:

<script
  src="https://www.audentic.org/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  data-position="bottom-right"
  defer
></script>

Use your actual agent ID. Opening the panel does not immediately request microphone access; the visitor starts a conversation first. The launcher positions are bottom-right, bottom-left, top-right, and top-left. Use Audentic's generated snippet if you want configured launcher text or colors. See Publish to a website for the inline card and browser requirements.

Publish and add a custom domain

Select Publish in Replit's Project Editor. Review the generated .replit.app domain and choose the access setting appropriate for your website. For a public business website, choose Public. Review the release and select Publish, then wait for success and open the production URL. Editing the project does not update that live release automatically; test changes and use Republish. Follow Replit's publishing guide.

After a successful deployment, open the Publishing tool and its Domains tab. Select Connect your own domain and enter the address you own. Complete the guided DNS setup or add Replit's generated A and TXT records manually at your registrar. Keep the verification TXT record for certificate renewals. Wait for Verified and check the domain in your browser. Connect www separately if you intend to serve it. These details follow Replit's custom-domain guide.

Add every final HTTPS hosting origin to Audentic's website list and repeat the conversation test there.

Diagnose Preview and voice problems

If Preview works but production shows old code, check that the latest release was republished. If voice works on .replit.app but fails on your custom domain, check the exact Audentic origin entry and the domain's HTTPS certificate.

Use Preview's New tab control or open the live URL to test outside the editor. An iframe can block microphone access even when the agent and origin are correct. A parent iframe you control needs allow="microphone; autoplay"; code inside the child cannot override the parent's policy. Voice also requires HTTPS or localhost and browser microphone permission. Check a restrictive Content Security Policy against the requirements in the website guide.

Example and verification checklist

A Replit-built workshop directory can answer questions about class duration, accessibility, and venue details from agent knowledge. Give visitors a clear booking link. The voice widget alone does not reserve a seat or connect the directory's database to the agent.

  • Visit production while signed out of Audentic, then repeat on a phone.
  • Start a conversation, allow the microphone, speak, and interrupt the agent.
  • Test denied microphone permission and the browser's recovery controls.
  • End the conversation and confirm the microphone indicator turns off.
  • Test both .replit.app and your custom domain, then review Conversations.

Explore other integration guides.

Official platform references: Replit publishing, custom domains, and Preview.

Updated · Written by the audentic team