Embed an inline AI Q&A box on any page. Customers ask, your knowledge base answers — no chat panel, no ticket.

Drop an inline AI Q&A box on any page. Customers ask a question, your knowledge base answers. No chat panel, no ticket, no signup.

What Quick Help Is

Quick Help is a one-shot inline assistant. It looks like a small chat box, but it's not the support widget. There's no panel to open, no conversation history persisted, and no agent on the other end. Each question gets one answer pulled from your published help articles.

Use it for:

  • Docs and tutorial pages: let readers ask a follow-up without leaving the page
  • FAQ pages: replace the static list with something that actually answers
  • Pricing or feature pages: handle objections before they become tickets
  • Empty states: "Not sure where to start? Ask Quick Help."

When the AI can't answer, it suggests opening a ticket, and you'll see those escalated events come through your event listener.

Before You Turn It On

Quick Help reuses your team's existing AI agent with a restricted skill set (library, Atlas, read-only integrations). You need at least one AI agent configured before Quick Help can answer anything.

  1. Go to Settings → Team → AI Agents and create an agent if you don't already have one.
  2. Confirm the agent has its library and Atlas skills enabled. These are the skills Quick Help draws on.
  3. Publish at least one library article. The AI grounds its answers in your library, so an empty library means an empty assistant.

Without an AI agent, Quick Help will load on the page but won't have anything to respond with.

Enable It

Go to Settings → Team → Quick Help and turn it on. Pick a primary color, header copy, and placeholder text. The AI is grounded in your published library articles, so keep them up to date.

Installation

If you've already pasted the universal cStar script, you're done. Quick Help auto-detects mount points on the page:

<script src="https://www.cstar.help/cstar.js?team=YOUR_TEAM_SLUG"></script>

Then add a mount element anywhere:

<div data-cstar-quickhelp></div>

That's it. The element renders into a Shadow DOM so your page's CSS won't leak in (and Quick Help's styles won't leak out). You can drop multiple instances on the same page if you want.

Programmatic Mounting

For SPAs or any page where the mount point appears after load, use window.CStarQuickHelp:

// Mount with default config
CStarQuickHelp.mount('#help-box');

// Mount with overrides
CStarQuickHelp.mount('#help-box', {
  headerTitle: 'Stuck on pricing?',
  headerSubtitle: 'Ask anything',
  placeholderText: 'How does the seat count work?',
  primaryColor: '#FB923C',
  borderRadius: '12px',
  fontBody: "'Inter', sans-serif",
  fontHeading: "'Inter', sans-serif"
});

// Pass an element directly
const el = document.getElementById('help-box');
CStarQuickHelp.mount(el, { headerTitle: 'Custom title' });

// Unmount
CStarQuickHelp.unmount('#help-box');

The defaults come from Settings → Team → Quick Help. Anything you pass to mount() overrides the team config for that instance only.

Mount Options

Option Type Default
headerTitle string "Quick Help"
headerSubtitle string "Get a fast answer"
placeholderText string "Ask a quick question..."
primaryColor hex string Team default
borderRadius CSS length (px/rem/em/%) 12px
fontBody font-family string Lexend stack
fontHeading font-family string Inherits fontBody

Color and length values are validated client-side. Anything that doesn't look like a hex color or CSS length is dropped silently, and the default is used.

Events

Listen for what your customers are asking. The same listener fires for every Quick Help instance on the page.

CStarQuickHelp.on('answered', ({ question, answer, sessionId, outcome }) => {
  // outcome can be 'answered' or 'escalated'
});

CStarQuickHelp.on('escalated', ({ question, answer, sessionId }) => {
  // Quick Help suggested opening a ticket
  // Good place to track topics that aren't covered by your docs
});

CStarQuickHelp.on('error', ({ status, code, message }) => {
  // Network failure or rate-limit hit
});

// Remove a single listener or all listeners for an event
CStarQuickHelp.off('answered', handler);
CStarQuickHelp.off('error');

How It's Different From the Chat Widget

Quick Help Chat Widget
Where it lives Inline on the page Floating launcher in the corner
History None (anonymous, in-memory only) Persists per customer
Answers from AI grounded in your library articles Live agents (with optional AI assist)
Creates a ticket? No, but can suggest one Yes, every conversation becomes a ticket
Identifies the customer? No Optional, via identity verification
Best for Self-serve, top-of-funnel Support, sales, ongoing conversations

You can run both side by side. Quick Help on a docs page, the chat widget for everything else.

Styling and Layout

The mount element decides Quick Help's footprint. The Shadow DOM caps the inner width at 480px and lets the height grow with the conversation log. Wrap it in your own grid cell if you want a fixed sidebar:

<div style="max-width: 360px;">
  <div data-cstar-quickhelp></div>
</div>

Custom CSS on the host page won't reach inside the Shadow DOM. Use the mount options for theming instead.

Privacy

Quick Help is anonymous by design:

  • No localStorage, no cookies, no fingerprinting
  • The session ID lives in memory only and resets on page reload
  • Questions and answers are logged to your team's Quick Help session table for analytics, but no customer identity is attached
  • Sessions auto-expire after 90 days

Testing

Add the mount, reload the page, ask "What's your pricing?" If you don't see a box appear, check:

  1. You have at least one AI agent set up in Settings → Team → AI Agents (Quick Help can't answer without one)
  2. Quick Help is enabled in Settings → Team → Quick Help
  3. Your team has at least one published library article (the AI grounds answers in your library)
  4. The script tag points to your team slug, not a placeholder
  5. Browser console for [cStar Quick Help] errors