How to add an AI support agent to your SaaS app

Most AI support agents answer in paragraphs. Your user asks "how do I export my contacts?" and gets three sentences telling them to open Settings, then Data, then Export. Then they go hunting for each button.

I build Clickalong, an AI support agent that answers from your docs and then points at each button in your app until the task is done. This post shows how to add it to a SaaS app, from a plain HTML page up to a React app with signed-in users.

1. Create a workspace and load your docs

Sign up at clickalong.ai and paste your help center link. Clickalong imports the articles, and the agent answers only from them.

No help center yet? Write articles in the dashboard, or let your coding agent draft them with our open-source skill:

npx skills add clickalong/clickalong-agent-skills --skill write-clickalong-docs

2. Add the widget

On a plain HTML site, one tag goes before </body>:

<script async
  src="https://clickalong.ai/widget.js"
  data-key="pk_your_key"
  data-clickalong="1">
</script>

Your key is on the Install page in the dashboard.

3. In a React app, use the SDK

Bundled apps get a typed loader, @clickalong/sdk. It has no dependencies, does nothing during server rendering, and is safe under React Strict Mode.

npm install @clickalong/sdk

"use client";
import { useEffect } from "react";
import * as Clickalong from "@clickalong/sdk";

type User = { email: string; name?: string };

export function ClickalongWidget({ user }: { user?: User }) {
  useEffect(() => {
    Clickalong.init({ key: "pk_your_key" });
  }, []);

  useEffect(() => {
    if (user?.email) Clickalong.identify({ email: user.email, name: user.name });
  }, [user?.email, user?.name]);

  return null;
}

Render it once in your root layout: app/layout.tsx in Next.js, app/root.tsx in React Router. Conversations now follow the user across devices, and your team sees who they're talking to.

Want the Verified badge? Pass a userHash as well. It's an HMAC-SHA256 of the lowercased email, computed on your server with the identity secret from Settings.

4. Pass app state

Clickalong.set({ plan: "pro", seats: 12 });

These values show next to the conversation, so whoever picks up a handed-over chat sees the user's plan without asking.

5. Teach it the clicks

This is the part that makes it more than a chatbot. Install the Clickalong Recorder Chrome extension, click through a task once (say, changing a plan), and save it as a tour. Next time a user asks how to change their plan, the agent answers and then walks them through it, one highlighted button at a time.

No recorded tour for a task? The agent can still guide from your help articles with "Show me".

What you get

• An AI support agent that answers from your docs, in the user's language
• Guided tours that point at the real buttons in your app
• A shared inbox for chats the AI hands over
• One flat price per workspace with unlimited conversations

The widget and inbox are free. The AI agent starts on the Mini plan, and guided tours and "Show me" start on Essentials. See pricing or start free.