Product tours

Nook can do more than answer questions, it can walk a visitor through your product. A short video asks them to do something ("click Sign up to start"), they click the real button on your page, and the next video plays. It is a friendly, human onboarding flow instead of a static tooltip tour.

How it works

Each step in a tour is a normal Nook clip. A step can advance to the next one in two ways:

• The visitor clicks a button inside the player (your "Next" or branch buttons), or
• The visitor clicks a real element on your page (an "advance on click" trigger). Nook never blocks that click, so your own action still runs while the next video plays.

Build a tour with no code

Everything below is done in the dashboard, no developer needed.

1. Create your steps as questions and record (or upload) a short clip for each, for example "Welcome", "Create your first project", "Invite your team".
2. Open the first step and find Advance on click (product tour).
3. Turn it on, enter the CSS selector of the element the visitor should click (for example #signup-btn or .create-project), and choose then play step as the next step.
4. Repeat for each step. That is the whole tour.

On your live site, when the visitor clicks the matching element, their action happens as normal and the next video plays right away.

Finding the right selector

A selector points Nook at the element to watch. The easiest options:

• An id: #signup-btn (most reliable if your element has one).
• A class: .cta-primary
• An attribute: [data-action="checkout"]

Right-click the element in your browser, choose Inspect, and look for an id or a stable class. Clicks inside the Nook widget itself are ignored, so you only ever match your own page.

Drive it from your own code

If you would rather trigger steps from your app's own logic, Nook exposes a small API on window.PresenceLayer. Wait for the nook:ready event, then call it from any click handler:

addEventListener('nook:ready', () => {
  document.querySelector('#signup-btn')
    .addEventListener('click', () => window.PresenceLayer.play('step2'));
});

• PresenceLayer.play(stepId) jumps to a specific step.
• PresenceLayer.next() advances to the next step in order.
• PresenceLayer.open() / PresenceLayer.close() open and close the widget.

Tips

• Keep each step under about 20 seconds. A tour is a series of nudges, not a webinar.
• End the tour on a clear win, for example "You are all set", with a call-to-action button.
• If a step's element only exists on one page, combine it with page targeting so the step shows up in the right place.
• Product tours are a Pro feature.