Website Widget

A chat window on your site, answered by the same agent that handles your email and WhatsApp. Visitors become leads, conversations land in the same inbox, and the whole thing is one script tag.

Setup#

1Go to Agent → Chat Widget. A widget belongs to one agent - that's who answers.
2Style it and write the greeting. The live preview updates as you go.
3Add the domains it's allowed to load on.
4Copy the snippet into your site.
5Switch it from test to live when you're happy.

Installing it#

One script tag, loaded asynchronously. It renders a launcher button and opens the chat in an iframe, so it can't collide with your site's CSS or JavaScript.

<script
  async
  src="https://spliceai.co/embed.js"
  data-spliceai-key="pk_live_your_public_key"
></script>

The public key is safe in client code

pk_live_… is designed to be public - it identifies the widget, it doesn't authorise anything. What actually protects you is the allowed-origins list.

Allowed origins#

The widget only runs on domains you list, wildcards included - https://acme.com, https://*.acme.com. Anywhere else, it refuses to load.

Add every host you actually use

Staging, the www and non-www variants, and any country domains all need listing. A widget that works locally but not in production is almost always a missing origin.

Appearance#

Setting	What it controls
Accent colour	Launcher, header and the visitor's own message bubbles.
Background / text colours	The chat panel itself.
Bubble colours	Visitor and agent bubbles, separately.
Corner radius	Panel and button rounding.
Font family	Match your site's typeface.
Position	Bottom-right or bottom-left.
Launcher icon & size	A built-in icon or your own image.
Header title & subtitle	The text at the top of the panel.
Agent name & avatar	Show who's replying, or keep it anonymous.
Layout style	The overall shape of the panel.
Powered-by badge	On by default, can be turned off.
Custom CSS	For anything the controls don't cover.

Greeting & questions#

A welcome message shown before anyone types.
Your own input placeholder.
Optional starter questions as clickable chips - the fastest way to get a first message out of a hesitant visitor.
A fallback message for when the agent can't answer confidently, so the visitor gets a human-sounding close rather than silence.

Capturing who they are#

Control	Behaviour
Collect email	Ask for an address partway through the chat rather than blocking the first message. You choose after how many messages.
Pre-chat form	Ask up front instead, when you'd rather have the details than the conversation.
Require email verification	Send a one-time code and only continue once it's entered. This is what makes a visitor genuinely verified.

Verified visitors are matched to an existing lead where one exists, and their identity is what identity-scoped custom tools check before running. Visitors are tracked by a browser-local token, and IP addresses are stored hashed rather than raw.

JavaScript API#

The loader exposes window.SpliceAI. If your app already knows who the user is, tell the widget and skip the form entirely.

// Your app already knows who this is - skip asking them again.
window.SpliceAI.identify({
  externalId: "user_123",
  email: "priya@acme.com",
  name: "Priya",
});

// Drive the widget from your own UI
window.SpliceAI.open();
window.SpliceAI.close();
window.SpliceAI.toggle();

Calling identify before the widget has opened is fine - the details are queued and applied when it loads.

Replies, tools & tasks#

Website auto-reply is on by default - a live chat that takes an hour to answer is worse than no chat at all.
Custom tools can be enabled per widget, so the agent can look things up in your systems mid-chat.
Task creation defaults to verified visitors only, which keeps anonymous traffic from filling your board.
Everything lands in the normal inbox with the normal draft, escalation and SLA behaviour.

Test mode

A widget starts in test mode. Use it to try the whole flow on a staging page before pointing real traffic at it.

CSAT#

Turn on satisfaction ratings and each reply can be rated - thumbs by default - with your own prompt text. These ratings are the main source of the CSAT figure in Analytics, and negative ones feed the knowledge gaps list.

Before going live

Ask it five real customer questions on a staging page and read the answers as a stranger would.
Check the colours against your actual site, not the preview background.
Decide deliberately between collecting email late (more conversations) and a pre-chat form (more contact details).
Turn on verification if the agent will ever discuss someone's account.

PreviousRouting Rules NextBilling