@briloai/web-widget

v1.0.0

Published

a month ago

Brilo AI embeddable voice agent widget for websites

Downloads

0High
0Medium
0Low

phanib

brilo ai voice-agent widget web-component embed customer-support

Brilo AI Web Widget

Embeddable voice agent widget that lets your website visitors talk to a Brilo AI agent. Works anywhere — HTML, React, Next.js, Vue, WordPress, Framer, Webflow, Squarespace, and more.

Quick Start

Get your Agent ID from dashboard.brilo.ai
Allow-list your domain in the dashboard under your agent's settings
Paste this snippet into your website (before </body>):

<!-- Brilo AI Widget -->
<brilo-widget agent-id="YOUR_AGENT_ID"></brilo-widget>
<script async src="https://unpkg.com/@briloai/web-widget@1" type="text/javascript"></script>

That's it — a voice call button appears on your site.

How It Works

The widget renders an inline pill button on your page. When a visitor clicks it, the widget requests microphone permission and connects them to your Brilo AI voice agent in real-time.

Attributes

| Attribute | Required | Description | | ---------- | -------- | ------------------------------------------------------------------------------ | | agent-id | Yes | Your Brilo AI agent ID (from dashboard.brilo.ai) | | theme | No | light or dark | | debug | No | Set to "true" to enable debug logging |

Permissions

The widget requires microphone access to enable voice calls. The browser will prompt the visitor for permission when they click the widget to start a call. No microphone access is requested until the visitor interacts.

Domain Allow-listing

Your website domain must be allow-listed in your agent's settings at dashboard.brilo.ai for the widget to connect. Without this, the widget will not load.

Framework Examples

HTML

<!DOCTYPE html>
<html>
  <body>
    <h1>My Website</h1>

    <!-- Brilo AI Widget -->
    <brilo-widget agent-id="YOUR_AGENT_ID"></brilo-widget>
    <script async src="https://unpkg.com/@briloai/web-widget@1" type="text/javascript"></script>
  </body>
</html>

React / Next.js

Load the script once in your layout, then place <brilo-widget> on any page:

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="https://unpkg.com/@briloai/web-widget@1" strategy="afterInteractive" />
      </body>
    </html>
  );
}

// Any page or component
export default function ContactPage() {
  return (
    <div>
      <h1>Talk to us</h1>
      <brilo-widget agent-id="YOUR_AGENT_ID" />
    </div>
  );
}

WordPress

Add this to your site using a plugin like "Insert Headers and Footers", or paste it into your theme's footer.php:

<!-- Brilo AI Widget -->
<brilo-widget agent-id="YOUR_AGENT_ID"></brilo-widget>
<script async src="https://unpkg.com/@briloai/web-widget@1" type="text/javascript"></script>

Framer / Webflow / Squarespace

Paste the same snippet into a Custom Code embed block, or add it to your site-wide custom code settings (before </body>).

Events

Listen to widget lifecycle events programmatically:

<brilo-widget agent-id="YOUR_AGENT_ID"></brilo-widget>
<script async src="https://unpkg.com/@briloai/web-widget@1" type="text/javascript"></script>
<script>
  const widget = document.querySelector('brilo-widget');
  widget.on('ready', () => console.log('Widget ready'));
  widget.on('call:start', (data) => console.log('Call started', data));
  widget.on('call:end', (data) => console.log('Call ended', data));
  widget.on('error', (err) => console.log('Error', err));
  widget.on('message', (msg) => console.log('Message', msg));
</script>

| Event | Description | | -------------------- | ----------------------------------------------------------- | | ready | Widget loaded and ready | | call:start | Voice call started | | call:end | Voice call ended | | error | An error occurred | | message | Message sent or received | | agent:state-change | Agent state changed (connecting, listening, speaking, etc.) |

Customization

Widget appearance — colors, text, logo — is configured from dashboard.brilo.ai. Changes apply automatically with no code updates needed.

Support

Email: [email protected]
Privacy Policy: brilo.ai/privacy
Terms of Service: brilo.ai/terms

License

MIT - see LICENSE for details.