Documentation

Install Celot.

Three ways to deploy the agent. Pick one. Replace the placeholder key with the API key you'll find on each domain's page inside your console.

Tip — Real API keys are issued automatically when you register a domain. Create an account →
1

Plain script tag

Paste this in your site's <head>. Smallest possible footprint.

index.html
<!-- Celot Voice Agent -->
<script
  src="https://getcelot.com/agent.js"
  data-key="clt_live_YOUR_KEY_HERE"
  async
></script>
2

Google Tag Manager

In GTM: Tags → New → Custom HTML. Trigger: All Pages. Paste the snippet below.

GTM • Custom HTML
<!-- GTM > New Tag > Custom HTML
     Trigger: All Pages -->
<script>
  (function(d,k){
    var s = d.createElement('script');
    s.src = 'https://getcelot.com/agent.js';
    s.async = true;
    s.setAttribute('data-key', k);
    d.head.appendChild(s);
  })(document, 'clt_live_YOUR_KEY_HERE');
</script>
  1. Open Google Tag Manager → your container.
  2. Tags → New → Tag Configuration → Custom HTML.
  3. Paste the snippet above.
  4. Triggering → choose All Pages.
  5. Save → Submit → Publish.
3

Cloudflare Worker

Inject the agent at the edge — no changes to your origin code.

cloudflare-worker.js
// cloudflare-worker.js  —  Edge-inject the Celot agent
// Deploy: Cloudflare Dashboard > Workers > Create > paste this.
// Route: yourdomain.com/*

const CELOT_KEY = 'clt_live_YOUR_KEY_HERE';
const INJECT = `<script src="https://getcelot.com/agent.js" data-key="${CELOT_KEY}" async></script>`;

export default {
  async fetch(request) {
    const res = await fetch(request);
    const ct = res.headers.get('content-type') || '';
    if (!ct.includes('text/html')) return res;

    return new HTMLRewriter()
      .on('head', {
        element(el) { el.append(INJECT, { html: true }); }
      })
      .transform(res);
  }
};
  1. Cloudflare Dashboard → Workers & Pages → Create Worker.
  2. Paste the script above and Deploy.
  3. Workers → Triggers → add a route yourdomain.com/*.
  4. Done — every HTML response now includes Celot.
4

React / Next / TanStack hook

Drop into your root layout.

useCelot.ts
// useCelot.ts — for React / Next / TanStack apps
import { useEffect } from 'react';

export function useCelot() {
  useEffect(() => {
    if (document.querySelector('script[data-celot]')) return;
    const s = document.createElement('script');
    s.src = 'https://getcelot.com/agent.js';
    s.async = true;
    s.dataset.key = 'clt_live_YOUR_KEY_HERE';
    s.dataset.celot = 'true';
    document.head.appendChild(s);
  }, []);
}

Ready to plug it in?

Create an account, register a domain, get a real API key.

Get my key →