How it worksFeaturesSDKDocsPricing

Introduction

What Nudge is

Nudge is an in-product walkthrough engine. You install one npm package, point it at your backend, and it guides your users through real tasks by drawing a cursor and a card on top of your own UI.

A walkthrough in Nudge is called a flow. A flow is an ordered list of steps, and each step is a small piece of instruction tied to a real element on the page:

  • a selector that points at an element in your app (for example [data-nudge-id="save"])
  • an instruction, like "Click Save to publish the invoice"
  • an optional reason that explains why the step matters

The SDK runs in your user's browser. When a walkthrough starts, it asks your backend for the steps, finds each element, and renders the overlay on top of your interface. Your page does not change. Nudge draws over it.

The shape of a request

Every walkthrough follows the same path. The SDK sends a small request, the backend decides which steps to return, and the SDK renders them.

User clicksAsk your buddy
SDKin the browser
Backend/api/sdk/*
Stepsreturned
Overlaycursor + card
The same five stages run whether the walkthrough was pre-authored or generated on the spot.

Two ways a walkthrough is produced

There are two routes, and the backend picks between them:

  • Matched.Someone already authored a flow for this task. The backend finds it by project key or by matching the user's goal, and returns its steps as-is.
  • Generated. No flow exists, so the backend writes one from what it knows about your app. That knowledge lives in a per-tenant vocabulary, which you build by crawling your app or importing it. Without vocabulary there is nothing to generate from, so generation returns empty.

The one rule that decides whether it works

A flow can only highlight a step if that step's selector matches a real element on the page the walkthrough runs on. Flows are tied to a specific app's DOM. The most reliable setup is to add stable data-nudge-id attributes to the elements you care about.

Where to go next

  • Quickstart installs the package and renders your first walkthrough.
  • Configuration lists every option init() accepts.
  • Customising the UI covers theming, the cursor, and the card.
  • Vocabulary explains how to teach Nudge your app so it can generate walkthroughs on its own.
NextQuickstart