How to Add an AI Lead-Gen Chat Widget to Your Website with OpenClaw (2026)

An AI lead-gen chat widget is a small JavaScript snippet you drop on your landing page. It sends visitor messages to your own backend endpoint, which forwards them to an OpenClaw agent running on a cheap open model. The agent chats, then uses tool calling to capture and qualify the visitor and write them straight to your CRM. This guide shows you how to build that pipeline end to end.

OpenClaw is messaging-native - it was built for WhatsApp, Telegram, and other chat channels. So a website widget is not a native OpenClaw feature; it is a thin web front-end that talks to the same agent over an API. You build a lightweight embeddable script for the browser, and the OpenClaw agent does the real work: reasoning, tool calling, and CRM writes. That split is the whole design, and it is what keeps your model credentials off the public internet.

How Does the Widget Actually Work?

The flow is four hops, and it is worth holding the whole chain in your head before you build any of it:

1. Browser widget (JS). A visitor types a message. The widget holds only a public widget key - never a model API key - and posts the message to your endpoint.
2. Your backend endpoint. This layer authenticates the widget key, enforces CORS for your domain, rate-limits per IP and session, and manages the conversation session. It is the only thing that holds real model credentials.
3. OpenClaw agent (LLM + tool calling). The agent reasons over the conversation on a cheap open model and, when it has enough signal, calls tools like capture_lead, qualify_lead, and book_meeting.
4. CRM write and reply. Your tool handlers validate and write the lead to the CRM, and the agent’s reply flows back to the widget.

The single most important line in that chain: the model API key never touches the browser. Everything is proxied through your backend, which sits behind an nginx reverse proxy with TLS, exactly as in our OpenClaw nginx reverse proxy guide.

Why Run the Agent on a Cheap Open Model?

Lead qualification is a light task. A visitor conversation is usually a handful of turns and two or three tool calls - collect a name and email, gauge intent, maybe offer a meeting slot. You do not need a frontier model for that.

A cheap open model like Kimi K2.6 or GLM-5.2 handles it comfortably while keeping cost to cents per conversation. On a busy landing page that difference compounds fast: the same traffic that would run up a serious bill on a premium API costs almost nothing on an open model. We break down the numbers in Cut OpenClaw Costs 90% with Kimi K2.6 and Ollama. If you are still choosing a model, Best Open Source AI Chatbots in 2026 compares the current field.

Step 1: Stand Up the OpenClaw Agent on a Cheap Open Model

Install OpenClaw on a VPS and point it at a cheap open model. If you have not deployed OpenClaw before, our VPS install guide covers the base setup; here you just configure the model to a low-cost option:

agent:
  model: "kimi-k2.6"        # or glm-5.2 - cheap open models
  temperature: 0.4
server:
  host: "127.0.0.1"         # localhost only - nginx fronts it
  port: 18789

Binding to 127.0.0.1 is deliberate: the agent should never be reachable from the internet directly. Nginx will be the only thing that talks to it.

Step 2: Define the Lead-Capture Tool Functions

The agent turns conversation into structured data through tool calling. Define the tools it is allowed to call and describe them well - the model decides when to fire each one based on your descriptions:

{
  "tools": [
    {
      "name": "capture_lead",
      "description": "Save a lead once you have at least a name and email.",
      "parameters": {
        "type": "object",
        "properties": {
          "name":  { "type": "string" },
          "email": { "type": "string" },
          "phone": { "type": "string" },
          "intent": { "type": "string", "description": "What the visitor wants" }
        },
        "required": ["name", "email"]
      }
    },
    { "name": "qualify_lead", "description": "Score the lead as hot, warm, or cold." },
    { "name": "book_meeting", "description": "Offer and record a meeting slot for a hot lead." }
  ]
}

Pair this with a system prompt that tells the agent to gather name, email, phone, and intent naturally over the conversation rather than interrogating the visitor up front. For guidance on shaping the CRM side of these tool calls, our sister site has a detailed walkthrough at nomadx.ae/blog/connect-ai-chatbot-hubspot-salesforce-zoho-2026.

Step 3: Expose a Minimal Chat API Endpoint

The backend endpoint is the security boundary. It accepts widget messages, checks the public widget key, enforces CORS so only your domain can call it, rate-limits abusers, and forwards the message to the agent. In outline:

// POST /api/chat  - proxies widget messages to the OpenClaw agent
app.post("/api/chat", rateLimit({ windowMs: 60000, max: 20 }), (req, res) => {
  // 1. Verify the public widget key identifies a known site
  if (req.body.widgetKey !== process.env.PUBLIC_WIDGET_KEY) {
    return res.status(401).json({ error: "invalid widget key" });
  }
  // 2. Forward to the local OpenClaw agent (model key stays server-side)
  const reply = agent.send({
    sessionId: req.body.sessionId,
    message: req.body.message,
    context: { url: req.body.url, utm: req.body.utm }
  });
  return res.json({ reply });
});

Set CORS to your own origin only:

app.use(cors({ origin: "https://www.yourdomain.com", methods: ["POST"] }));

The public widget key is not a secret in the cryptographic sense - it will sit in your page source - so it only identifies the site. The real model API key lives on the server and is never sent to the browser. Rate limiting per IP and session is what stops someone from scraping the widget key and running up your model bill.

Step 4: Build and Embed the Widget Script

Now the visible part: a lightweight embeddable script your visitors load. Keep it small - a bubble, a message list, and a fetch to your endpoint. The embed is a single tag on your landing page:

<!-- Drop this before </body> on your landing page -->
<script
  src="https://www.yourdomain.com/widget.js"
  data-widget-key="pub_live_xxxxxxxx"
  data-endpoint="https://www.yourdomain.com/api/chat"
  defer></script>

The widget captures the current page URL and any UTM parameters and sends them with each message, so the lead record knows where the visitor came from. That context is cheap to collect and invaluable for attribution.

Step 5: Wire the Tools to Your CRM with Validation

When the agent calls capture_lead, your handler is what actually writes to the CRM. Do not write blindly - validate, dedupe, then persist. The fields worth capturing:

• name, email, phone - the core contact details.
• source - set to widget so you can segment widget leads later.
• first_conversation_url - the page the visitor started on.
• UTM params - campaign attribution passed through from the widget.

async function captureLead(fields, ctx) {
  if (!isValidEmail(fields.email)) return { ok: false, reason: "bad email" };
  const existing = await crm.find({ email: fields.email });   // dedupe
  const record = {
    ...fields,
    source: "widget",
    first_conversation_url: ctx.url,
    utm: ctx.utm
  };
  return existing
    ? crm.update(existing.id, record)
    : crm.create(record);
}

Route hot leads immediately - a Slack ping, an email to sales, or a task in the CRM - so a warm visitor is not sitting in a queue while their interest cools.

Step 6: Put the Backend Behind Nginx with TLS

The backend must never be exposed directly. Front it with an nginx reverse proxy on port 443 with a Let’s Encrypt certificate, and keep both the backend and the agent bound to localhost:

server {
    listen 443 ssl;
    server_name www.yourdomain.com;

    location /api/chat {
        proxy_pass http://127.0.0.1:3000;   # your backend, localhost only
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_read_timeout 120s;
    }
}

Get the certificate with certbot --nginx -d www.yourdomain.com, and open only ports 22, 80, and 443 in your firewall. The full pattern, including WebSocket headers and verification steps, is in our OpenClaw nginx reverse proxy guide, and the broader hardening checklist lives in our OpenClaw security guide.

Step 7: Add Consent, Logging, and a Human Handoff

Three guardrails separate a toy from something you can run on a real business site:

• Consent and a privacy notice. Show a short notice in the widget and, depending on your jurisdiction, a consent checkbox before you store personal data. You are collecting names and emails, so treat it as the regulated data it is.
• Conversation logging. Log conversations server-side so you can audit what the agent said, debug bad captures, and improve the prompt over time.
• Human handoff. Give the agent a path to escalate - a “talk to a human” option, or an automatic handoff when it is unsure or the visitor asks. An agent that never hands off will eventually frustrate a high-value lead.

Step 8: Test Capture, Qualification, and Routing End to End

Before you trust it with real traffic, run a full conversation through the live widget yourself. Confirm that:

• the lead lands in your CRM with name, email, source, first_conversation_url, and UTM populated,
• a second conversation from the same email dedupes rather than creating a duplicate,
• a clearly hot lead gets routed to wherever your sales flow expects it,
• rate limiting kicks in when you hammer the endpoint, and
• the human-handoff path works.

Watch the conversation logs while you do this - they will tell you fast whether the agent is calling the right tools at the right moments.

The Short Version

To add an AI lead-gen chat widget to your website with OpenClaw: run the agent on a cheap open model, give it capture_lead, qualify_lead, and book_meeting tools wired to your CRM, expose a minimal backend endpoint that holds the model key and enforces CORS and rate limiting, embed a lightweight widget script on your landing page, front everything with nginx and TLS, and add consent, logging, and a human handoff. The visitor sees a simple chat bubble; behind it, an OpenClaw agent is qualifying leads for cents per conversation.

If you would rather have this built and connected to your CRM without touching a line of code, our AI Feature Add-ons service builds and embeds the widget for you, and Self-Hosted AI Installation stands up the OpenClaw backend on a cheap open model with the reverse proxy and TLS configured from day one.