Widget Installation

The Clarm widget is a self-contained JavaScript bundle that renders an AI chat agent on your website. Choose the installation method that fits your stack.

Option A: Script tag (recommended for most sites)

Paste before the closing body tag:

Script taghtml

<script>
  (function(c,l,a,r,m){
    c['__CLARM_CONFIG__']={apiKey:r,agentId:m};
    var s=l.createElement('script');
    s.async=true;s.src=a;
    l.head.appendChild(s);
  })(window,document,'https://cdn.clarm.com/widget/clarm-widget.min.js',
    'YOUR_API_KEY','YOUR_AGENT_ID');
</script>

Option B: npm SDK (React / Next.js / TypeScript)

Installbash

npm install @clarm/widget

app/layout.tsxtypescript

import { initClarm } from '@clarm/widget'

// Call once at app startup
initClarm({
  apiKey: process.env.NEXT_PUBLIC_CLARM_API_KEY!,
  agentId: process.env.NEXT_PUBLIC_CLARM_AGENT_ID!,
  theme: 'auto',       // 'light' | 'dark' | 'auto'
  position: 'bottom-right',
})

Option C: Static bundle

Download the bundle files and self-host them:

clarm-widget.min.js — the widget JavaScript
clarm-widget.min.css — the widget styles

Self-hostedhtml

<link rel="stylesheet" href="/assets/clarm-widget.min.css" />
<script>
  window.__CLARM_CONFIG__ = {
    apiKey: 'YOUR_API_KEY',
    agentId: 'YOUR_AGENT_ID'
  };
</script>
<script src="/assets/clarm-widget.min.js"></script>

The widget isolates its styles using Shadow DOM, so it will not conflict with your site's CSS.

Verify

After installation, refresh your page and look for the chat bubble in the bottom-right corner. Open browser DevTools → Console and confirm there are no errors from clarm.