Add an AI avatar to your website with one snippet

Adding an Avarole agent to a site takes a few minutes and one line of HTML. This guide covers the widget first, then what to check in production, then the options for apps and back ends.

Step 1: create an agent

Sign up at app.avarole.com, create or pick an avatar and give it your knowledge. The free plan is enough to try the full flow. Copy the agent ID and the agent's embed key from your agent in the app.

Step 2: paste the snippet

Add this before the closing </body> tag on every page where the agent should appear.

<script
  src="https://app.avarole.com/widget.js"
  data-api-key="YOUR_AGENT_EMBED_KEY"
  data-agent-id="YOUR_AGENT_ID"></script>

Use the agent's embed key in client code. Keep any other API key on your server.

Step 3: check your security headers

If your site sends a Content Security Policy, the widget needs to load its script, open its frame and connect for audio and video. Allow the Avarole hosts in the matching directives.

• script-src and frame-src: https://app.avarole.com
• connect-src: https://app.avarole.com, https://ai.avarole.com, https://livekit.avarole.com and, for sockets, wss://app.avarole.com and wss://livekit.avarole.com
• media-src: blob: and https:

Voice conversations need the visitor's microphone, so the browser asks for permission the first time. If you send a Permissions-Policy header, make sure it does not block the microphone on your own pages.

Step 4: turn on Site Navigation

Switch Site Navigation on for the agent from the Build page. The embed code does not change. You then choose where the agent may go: block or allow paths, add data-agent-skip to hide an element, data-agent-risky to force a confirmation and data-agent-label to give a link a friendlier name. To keep it off on one page, add data-guided-nav="false" to the script tag.

Step 5: measure it

Name the steps that matter with an HTML attribute or one line of code, and Avarole Insights shows the funnel, the pages visitors leave from and where they struggle. It records page paths only, never what visitors type.

Mobile apps and back ends

The React Native SDK adds the agent to iOS and Android apps. Install the package, run setupAvarole() once before anything renders, and mount the component.

import { setupAvarole } from '@avarole/react-native';
setupAvarole();

import { AvaroleAgent } from '@avarole/react-native';

export default function App() {
  return (
    <>
      <YourApp />
      <AvaroleAgent agentId="YOUR_AGENT_ID" apiKey="YOUR_AGENT_EMBED_KEY" name="Assistant" />
    </>
  );
}

For your own back end, the REST API covers agents, Gmail and CRM connections, email, Site Navigation and Page Insights, authenticated with an X-API-Key header. Full details, including the package download, are in the developer docs, the SDK page and the list of integrations: Gmail, IMAP and SMTP mailboxes, Zoho CRM and Desk, Calendly and a generic CRM.

Go-live checklist

1. The snippet is on every page where the agent should appear, and nowhere it should not.
2. Your CSP allows the Avarole hosts and the microphone prompt works.
3. You tested on a phone, with the sound on and with it off.
4. The knowledge base answers your top 50 questions. See how to prepare it.
5. Funnel steps are named in Insights, so day one already gives you a baseline.