Shop assistant
Where is my order, and returns: checks the order number against the email, the return window, asks for a photo of a damaged item, confirms with buttons and emails your support. Answers with the order's card.
Download the workflowYour n8n chat,
with cards.
A drop-in replacement for n8n's chat widget. Same setup, same Chat Trigger, and your workflow can answer with an order, a booking, a product or the weather, drawn as a card.
- Free, open source, MIT
- Works with any n8n Chat Trigger
- One script tag, or npm
Try it:
A live demo: the widget from npm, talking to a stand-in for an n8n webhook.
Why switch from n8n's widget
Same options, same Chat Trigger, same session in the browser. What changes is what your visitors get.
| @n8n/chat | aparté chat for n8n | |
|---|---|---|
| Rich cards | the JSON as text | drawn: order, booking, product, weather and seven more |
| Weight, first load | ~465 KB | ~100 KB |
| Languages | English | ten, loaded one at a time |
| Keyboard and screen reader | buttons without names | named controls, a labelled window |
| Contrast of the visitor's bubble | 2.55:1 | 4.7:1 (WCAG AA) |
| Dark scheme | — | yes, or following the system |
| Drive it from the page | — | open, send, reset, setDisabled… |
| A tool's steps after a reload | bubbles of raw JSON | left out, as while chatting |
| License | Sustainable Use | MIT |
Eleven cards, live
Drawn right here by @aparte/plugin-cards, the same code the widget fetches when an answer holds one: switch the units, page through the pictures, open the details.
A card is a code block your workflow writes
n8n's chat only carries text, so the card travels as text: a code block whose language names the card, holding its fields as JSON. This widget draws it; any other chat shows the block as code, under the sentence that comes before it.
Eleven cards: weather, order (bookings too), product,
place, items, stats, stock, plan,
score, media, link. Each is fetched the first time an answer
uses it.
Build the block in a Code node from your tool's real result, rather than asking the model to write JSON: it is exact every time, and a setting can turn it off.
Order 1001 is on its way.
```card-order
{ "number": "1001", "status": "shipped",
"line_items": [
{ "name": "Linen shirt", "quantity": 1, "total": "49.00" }
],
"total": "49.00", "currency": "EUR" }
```Workflows to start from
Tested on n8n, each with its setup in sticky notes. Import the JSON, set your credentials, and point the widget at its Chat Trigger.
Booking assistant
Offers free times from your opening hours, takes a name and email, confirms with buttons, checks the time is still free and saves it. Answers with the booking's card.
Download the workflowQuestions about a document
The visitor attaches a PDF or a text file and asks about it; the answer stays on the document. Works with n8n's own chat too.
Download the workflowInstall
Coming from @n8n/chat: change the two URLs. Everything else carries over.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aparte/n8n-chat@0/dist/style.css">
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@aparte/n8n-chat@0/dist/cdn/n8n-chat.js';
createChat({
webhookUrl: 'https://your-n8n.example.com/webhook/…/chat',
// Optional: what the visitor is looking at, for your workflow to read.
metadata: { page: location.href, title: document.title },
});
</script>A block in the page instead of a button in the corner: mode: 'embedded' with a target that has a height. Every option is in the README.