Search box that actually answers
Replace the static help-center search with a drop-in shadow-DOM element. Same agent, same intelligence — just disguised as the search box your visitors expect.
Five trigger surfaces. Zero forms. One AI agent your visitors can reach from any page, button, or link — without re-embedding.
Every “Contact us” button is a form. Every form is a wait. Every wait is a conversion you’ve already lost. The widget flips that model: visitors talk to your AI agent immediately, on the same page they were already reading.
Add data-autocrew-question to any button or link. Marketing edits the CMS; the widget handles the rest. Works on <button>, <a> (without navigating away), and bubbles through nested click targets.
<button data-autocrew-question="What are your hours?">
See our hours
</button>Append ?autocrew_q=… to any URL. The widget opens on landing and sends the question, then strips the param so a refresh doesn't re-fire. Pair with UTM tags for full campaign attribution.
https://yoursite.com/?autocrew_q=Show%20me%20a%20demo
&utm_source=email&utm_campaign=springwindow.AutoCrew.ask(), .open(), .close(), .isReady(), .onReady(). Calls before widget.js loads queue safely via the GA-style stub. Single-event dispatch keeps your analytics clean.
// Wire to any in-page event
window.AutoCrew.ask("Help me with my account");
// Or check ready state first
window.AutoCrew.onReady(() => {
console.log("widget v" + window.AutoCrew.version);
});<autocrew-search> is a custom element with closed shadow DOM — no CSS conflicts, no host access to internals. Configure with placeholder, button-label, primary-color, mode, auto-send. Submit calls ask(), so length caps and event dispatch are reused automatically.
<autocrew-search
placeholder="Search docs…"
button-label="Ask"
primary-color="#FF6B35"
></autocrew-search>Add data-autocrew-mode="voice" to any trigger. Falls back to chat if voice is disabled. Six visible states (Connecting / Listening / Thinking / Speaking / Muted / Error). Barge-in is supported — the visitor interrupts the agent mid-response and it stops cleanly.
<button data-autocrew-open data-autocrew-mode="voice">
Start a voice call
</button>Most chat widgets stop at text. Voice mode runs a full audio session: live transcription, natural-cadence speech, and barge-in — the visitor interrupts the agent mid-response and it stops cleanly. Each state is signalled visually so the caller never wonders if anyone’s there.
Each surface from the previous section maps to specific moments on real sites. Pick the ones that match yours — ship one, ship them all.
Replace the static help-center search with a drop-in shadow-DOM element. Same agent, same intelligence — just disguised as the search box your visitors expect.
None of this is glamorous. All of it is what separates a demo from something you embed on a live site and forget about.
Every trigger surface — declarative, URL, API, search — auto-truncates the message. No injection wormholes via overlong strings; no LLM context overruns.
Every trigger fires exactly one autocrew:triggered event, even on nested click targets that bubble up. Your analytics never double-count.
Calls to AutoCrew.ask() before widget.js finishes loading buffer in a small queue and replay on init. GA-style. Drop-in. No race conditions.
The widget renders inside a closed shadow root. Host CSS can't leak in, host JS can't reach internals, your visitor's session stays scoped.
?autocrew_q= and ?autocrew_open= are stripped via history.replaceState after consumption. Refresh doesn't re-trigger; shared links stay clean.
Each crewCode owns its own session, conversation history, and tenant scope. Multi-tenant safe by construction — no leakage between crews.
Every visible config knob lives in the AutoCrew dashboard. Theme, position, copy, suggested questions, voice toggle, greeting timing — change them per crew, push live, no redeploy. The widget pulls fresh config on every page load.
crewCode. That’s it.Paste the snippet anywhere in your page’s HTML. The widget picks up its config from the dashboard, attaches the trigger listeners, and starts answering. No build step, no SDK install.
<!-- 1. Tell the widget which crew to load -->
<script>
window.AutoCrewConfig = { crewCode: "YOUR-CREW-CODE" };
</script>
<!-- 2. Drop in the widget -->
<script src="https://app.autocrew-ai.com/widget.js" async></script>If you call AutoCrew.ask() before widget.js finishes loading, drop in the queue stub to buffer + replay. GA-style.
<!-- Optional: buffer pre-init AutoCrew.ask() calls -->
<script>
window.AutoCrew = window.AutoCrew || {
q: [],
ask: function () { (this.q = this.q || []).push(["ask", arguments]); },
open: function () { (this.q = this.q || []).push(["open", arguments]); },
close: function () { (this.q = this.q || []).push(["close", arguments]); },
onReady: function () { (this.q = this.q || []).push(["onReady", arguments]); }
};
</script>The widget is already running on this page. Ask it for a walkthrough — you’ll see exactly what your visitors would.
| Capability | Static form | Generic chatbot | Custom AI build | AutoCrew triggers |
|---|---|---|---|---|
| Time to deploy | Hours | Days | Weeks | Minutes |
| Per-page question targeting | No | Partial | Yes | Yes |
| Voice mode | No | No | Custom build | Yes |
| Single-dispatch + length-capped | No | Varies | Varies | Yes |
| Live handoff to humans | No | Yes | Yes | Yes |
| New triggers without re-embed | No | No | No | Yes |
| Cost | Low | Per-seat (high) | Very high | Usage-based |
The single feature only AutoCrew has: a new trigger never requires a re-embed. Add an HTML attribute, change a URL param, the widget picks it up.
Twenty minutes with a human, or thirty seconds with the widget itself. Either way you’ll know whether this fits your site before you commit a line of code.