Installation

CDN

The simplest approach. Add a script tag and the custom element to your HTML:

<ariontalk-widget></ariontalk-widget>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@ariontalk/widget@latest/dist/ariontalk.js"
  async
></script>

The element above uses the default local (on-device) engine. To use the cloud-based Gemini engine, add a site-key:

<ariontalk-widget site-key="YOUR_SITE_KEY" interactive-highlights></ariontalk-widget>

When site-key is set, the widget automatically uses the ArionTalk cloud service (engine="gemini") — no token server to run. See the Gemini engine guide for site-key setup and self-hosted alternatives.

Version Pinning

For production, pin to a specific version instead of @latest:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@ariontalk/widget@0.2.0/dist/ariontalk.js"
  async
></script>

Using @latest always fetches the newest release, which is convenient during development but may introduce breaking changes without warning.

Self-Hosting the CDN Build

The CDN build ships an entry file (ariontalk.js) alongside sibling chunks (chunk-*.js) in the same directory. If you self-host the CDN assets rather than serving from a public CDN, copy the entire dist/ directory to your web server so the browser can resolve dynamic engine chunks. Standard script tags pointing to public CDNs like jsDelivr and unpkg resolve sibling chunks automatically without extra configuration.

Package Manager

pnpm

pnpm add @ariontalk/widget

npm

npm install @ariontalk/widget

yarn

yarn add @ariontalk/widget

Then import the package in your JavaScript/TypeScript entry point:

import '@ariontalk/widget';

And add the element to your HTML:

<ariontalk-widget></ariontalk-widget>

Framework Integration

ArionTalk is a standard Web Component. It works in any framework — just import the package and use the element.

React

import '@ariontalk/widget';

function App() {
  return <ariontalk-widget></ariontalk-widget>;
}

Vue

<script setup>
import '@ariontalk/widget';
</script>

<template>
  <ariontalk-widget></ariontalk-widget>
</template>

Svelte

<script>
  import '@ariontalk/widget';
</script>

<ariontalk-widget></ariontalk-widget>

Bundle Size

The widget loads its voice engine on demand. A page that embeds ArionTalk but is never used downloads only the idle bundle: the floating button, the session UI, and Lit. No engine code is fetched until a visitor starts a conversation, so embedding the widget has no meaningful effect on your page’s load performance.

When a session starts, the widget fetches the chunk for the configured engine and nothing else. A site on the cloud engine never downloads the on-device engine, and vice versa.

Every build prints a size report. Run pnpm build in packages/widget to see the current figures for each artifact.

Headless Mode

If you only need the voice engine without the built-in UI, install @ariontalk/core:

pnpm add @ariontalk/core

import { VoiceEngine, isVoiceChatSupported } from '@ariontalk/core';

// Check browser support
const supported = await isVoiceChatSupported('local');

if (supported) {
  const engine = new VoiceEngine();
  // Build your own UI on top of the core engine
}

This is useful when you want complete control over the user interface while reusing ArionTalk’s voice session logic.

Gemini Engine Add-on

To use the cloud-based Gemini Live engine instead of the default local (on-device) engine, install the Gemini engine package:

pnpm add @ariontalk/engine-gemini

The Gemini engine requires a token server to securely issue ephemeral API tokens. See the Gemini Live engine guide for setup instructions.