Your product, explained inside your product.

Nudge is an SDK that draws a guided cursor and step cards on top of your own UI. When someone asks “how do I do this?”, it walks them through the answer right there, so they never have to open a docs tab or file a support ticket.

Works inReactNext.jsVuePlain JS
app.yourproduct.com
New invoice
Nudge · Ask
Ask anything about this app
Ask your buddy

Three steps. From npm install to guided users.

terminal
$ npm install nudge-sdk
+ nudge-sdk@0.1.2
$
Ask your buddy

Install

One package, one init.

npm install nudge-sdk, call init() with your key, then mount(). A floating launcher shows up in your product. There are no script tags to add and no CDN to wire up.

npm install nudge-sdk
Nudge · Ask
How do I send my first invoice?
Searching your flows…Matched

Ask

Users say what they need.

A user clicks the launcher and types a goal. The backend finds a walkthrough you already wrote, or builds one on the spot from what Nudge knows about your app.

Matched · or · Generated
Step 03 / 05
Click the highlighted card to open the send dialog.
3/5 · Send an invoice

Guide

The cursor does the showing.

Nudge anchors each step to a real element in your UI and walks the user through it. Every step gets a cursor, a card, and room to explain the why. Your page never changes.

Cursor on · Anchored to your DOM

Built for how users actually get stuck.

Nudge · Step 04

Open Settings → Members to invite your first teammate.

01 · IN YOUR UI

Help where the confusion is.

Nudge renders as an overlay on top of your interface. People get walked through the task on the page they're already on, instead of leaving to dig through a docs tab or file a support ticket.

02 · WHY, NOT JUST WHAT

Steps teach, not just point.

Each step pairs its instruction with an optional why, so users learn your product instead of memorizing clicks.

03 · GENERATED

Flows that write themselves.

Crawl your app once to build up its vocabulary. After that, Nudge can generate walkthroughs for goals you never wrote yourself.

04 · ANCHORED

Pinned to your real DOM.

Steps target real elements via stable selectors, so the cursor lands exactly where users should click.

React
Next.js
Vue
Svelte
Plain JS
05 · ANY STACK

One package, any web app.

The SDK. Five minutes to a live launcher.

Live on npm

Initialise with your publishable key and mount. Nudge handles the launcher, the cursor, the step cards, and all the back and forth with your backend. You just point it at your app.

  • One self-contained package, with no script tags or CDN to set up
  • Anchor steps to your UI with data-nudge-id attributes
  • Author flows, or let Nudge generate them from a goal
  • Open source and self-hostable
app-entry.ts
TS · 11 lines
1
2
3
4
5
6
7
8
9
10
11
import { NudgeSDK } from "nudge-sdk";
 
const nudge = NudgeSDK.init({
apiKey: "pk_live_…",
apiBase: "https://api.yourproduct.com/api",
defaultProjectKey: "invoice-onboarding",
});
 
nudge.mount();
 
// That's it. The launcher is now live in your product.
Compiledmain · 0 errors
UTF-8 · LF
Ready when you are

Stop telling.
Start showing.

Docs explain. Nudge shows you how. It walks every user through your product, right where they're stuck.