Audentic / Docs
Open studio

Publish to a website

The builder generates a snippet for websites that allow custom HTML and scripts. Visitors also need a secure page and browser microphone access to have a voice conversation. Developers can use the React component in a React app. Both use the same agent and the settings you save in Audentic. See the voice agent FAQs for a short compatibility answer.

Before you embed

  1. Open the agent in Agents, save your changes, and test it in Test & publish.
  2. In Website addresses, add the exact origin of every site that will host the widget. For example, https://example.com and https://www.example.com are separate entries. Add staging origins separately. Paths and wildcards are not accepted. For local development, http://localhost:4000 is allowed when the port matches your test site.
  3. Select Publish agent. Only a published agent can start new conversations for website visitors.

Explore the agent gallery for use cases and agents you can fork. A fork is a private draft in your account. Review its instructions and replace the reference facts with your own business information before publishing.

Any website: copy the generated snippet

In Test & publish, choose Floating voice button and select its corner. Then select Copy snippet and paste the code once into your website's custom code area or footer script area. The small button opens a conversation panel over your existing page:

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

Use the actual snippet from your agent's builder: it includes your agent ID and the correct Audentic host. data-position accepts bottom-right, bottom-left, top-right, or top-left. Optional data-title, data-prompt, and data-color attributes customize the launcher and its welcome message.

Opening the panel does not start a microphone session. Visitors choose to start a conversation and allow microphone access. Transcripts, choices, cards, and forms appear inside the panel as the conversation unfolds. Close the panel to end the conversation.

Publish the website changes, then visit the page while signed out of Audentic. Confirm that you can open the panel, hear, speak, interrupt, end, and close it. Test the published website on mobile too.

Optional: place an inline voice card

Choose Inline voice card in the builder if you want the agent inside a specific page section. Paste this generated code into a Custom HTML or Embed block at that position:

<script src="https://www.audentic.org/embed.js" defer></script>
<audentic-embed
  agent-id="YOUR_AGENT_ID"
  api-base-url="https://www.audentic.org/api"
  show-transcript
></audentic-embed>

The inline card uses the same agent settings and interactive steps. show-transcript displays the written conversation; visitors can hide or show it while talking.

React: use the component

Install the published package in a React 18.2 or React 19 app:

npm install @audentic/react

Render the component with your published agent ID. In a Next.js App Router app, put it in a client component:

"use client";

import { SessionControl } from "@audentic/react";

export function VoiceAssistant() {
  return <SessionControl agentId="YOUR_AGENT_ID" />;
}

The component defaults to Audentic's hosted API. If your Audentic instance uses another host, pass apiBaseUrl="https://your-audentic-domain.example/api". The package includes its own styles. The site's exact origin must still be on the agent's allowed website list.

See the developer integration guide for additional widget options. If a coding assistant is making the website change, give it the coding-agent guide.

Browser requirements and common fixes

  • Voice needs HTTPS or localhost, a WebRTC-capable browser, and microphone permission.
  • If the widget sits inside an iframe, the parent must allow microphone and autoplay permissions, for example allow="microphone; autoplay".
  • A restrictive Content Security Policy must allow widget.js and embed.js, the Audentic API host in connect-src, the Audentic host in frame-src for custom interactive views, and the widget's inline styles.
  • Some website builders restrict scripts or microphone access in preview mode. Test the published page in a normal browser tab.
  • If a published widget cannot connect, check the allowed origin, agent ID, microphone permission, and whether the latest site changes are live.

You can unpublish an agent in Test & publish to stop new visitor conversations. Existing conversations may continue until they end. Review saved results in Conversations.

Check the published website

Test from a different website origin while signed out of Audentic, including a narrow mobile viewport. Confirm that the widget loads without a microphone prompt, allow and deny microphone access, speak and interrupt, mute and end, and verify that the browser's microphone indicator turns off. If enquiries or on-screen steps are enabled, review and submit them and check the saved result in your account. Test your actual site’s CSP and iframe permissions.

For developers, the application's examples/embed-gallery directory contains a separate-origin static website fixture using the installed embed bundle. Its browser checks simulate microphone and WebRTC transport while making real cross-origin HTTP requests. They check widget behavior without a live provider session; real HTTPS audio, Safari, mobile devices, and individual site builders still need their own checks.