Embeddable Widget

Embed the AutoCrew widget on any website to turn pages, buttons, and links into live conversations with your AI crew. No forms, no SDK install, no build step.

Quick Start

Paste this snippet anywhere in your page’s HTML. Replace YOUR-CREW-CODE with the crew code from your Autocrew dashboard. The widget loads async, picks up its config, and attaches the trigger listeners automatically.

<!-- 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>

Language: html

Trigger Surfaces

The widget exposes five ways to start a conversation. The same agent answers every one — pick the surfaces that match your existing site patterns.

1. Declarative

Add data-autocrew-question to any <button> or <a>. Click handlers bubble through nested elements; links don’t navigate away when intercepted.

<button data-autocrew-question="What are your hours?">
  See our hours
</button>

Language: html

Best for: FAQ pages, pricing-tier CTAs, footer quick-links — turn dead ends into conversations without writing JavaScript.

2. URL Parameter

Append ?autocrew_q=… to any URL. The widget opens on landing, sends the question, and 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

Language: text

Best for: Email campaigns, paid-ad landing URLs, and chatbot handoffs from other apps.

3. JavaScript API

Call window.AutoCrew.ask() from any in-page event. See the full method reference below.

// 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);
});

Language: javascript

Best for: Post-form-submit handoff with prefilled context, idle-detection recovery, scroll-depth or exit-intent triggers.

4. Search Element

<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, and auto-send.

<autocrew-search
  placeholder="Search docs…"
  button-label="Ask"
  primary-color="#FF6B35"
></autocrew-search>

Language: html

Best for: Help-center search box, hero “Ask” CTAs, docs-site search replacement.

5. Voice Mode

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) with barge-in support.

<button data-autocrew-open data-autocrew-mode="voice">
  Start a voice call
</button>

Language: html

Best for: Mobile CTAs, healthcare intake/triage, hands-free contexts (warehouse, drive-through, kitchen).

JavaScript API

Five methods are exposed on window.AutoCrew once the widget loads:

Method	Purpose
.ask(message, options?)	Open the widget and send a message. Options include `mode` ("chat" or "voice") and `autoSend`.
.open()	Open the widget without sending a message.
.close()	Close the widget if it’s open.
.isReady()	Synchronous boolean. Returns `undefined` (not `false`) before `widget.js` loads — use `.onReady()` for pre-init code.
.onReady(callback)	Run a callback once the widget is ready. Safe to call before the script loads when paired with the queue stub.

Tip: Calls to .ask(), .open(), .close(), and .onReady() made before the script loads are buffered safely if the queue stub is present (see below).

Pre-Init Queue

If you call AutoCrew.ask() before widget.js finishes loading, drop in this GA-style queue stub to buffer and replay calls. The widget drains the queue on init.

<!-- 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>

Language: html

Voice vs Chat

The widget supports two modes — chat (the default) and voice. Set the mode declaratively or programmatically:

Declarative: add data-autocrew-mode="voice" (or "chat") to any trigger element.
Programmatic: pass { mode: "voice" } as the second argument to .ask().

window.AutoCrew.ask("Tell me about pricing", { mode: "voice" });

Language: javascript

Voice mode falls back to chat automatically if voice has been disabled in your dashboard or the visitor’s browser blocks microphone access.

Configuration Reference

The embed snippet exposes a single embed-time config key on window.AutoCrewConfig:

Key	Type	Description
crewCode	string	Identifies which crew to load. Required. Find this in the Autocrew dashboard under your crew settings.

All other settings — theme, position, suggested actions, voice availability, welcome message — are managed in the Autocrew dashboard and applied automatically when the widget loads. You don’t need to specify them at embed time.