​
Overview

Interactive flows help users discover and learn your product through step-by-step guidance. Unlike our AI chat and interactive guides, flows require explicit configuration from developers, giving you precise control over the user experience.

With Pointer’s flows, you can:

  • Onboard new users with guided tours of your product
  • Highlight new features or important functionality
  • Guide users through complex workflows
  • Increase feature adoption and user engagement
  • Reduce support tickets by proactively educating users

Flows are fully customizable and can be triggered automatically (when a user visits a specific page or meets certain conditions) or manually (when a user clicks a button).

We’re giving flows their own section because they require additional configuration and are designed for specific scenarios\\!

Note: We’re working on a visual editor and browser extension to make flow creation even easier. For now, flows are configured through code, giving you more flexibility.

​
Getting started

1

Grab an API key from the Pointer dashboard.

Login to the Pointer dashboard, then create a project. Two keys will be automatically generated for you — a production and development key. Copy the development key and store it.

2

Install the Pointer SDK using your preferred package manager.

npm install pointer-sdk
3

Configure your environment variables.

Add the appropriate Pointer API key into your .env file.

POINTER_API_KEY=pt_dev_*********************

Note that there are two types of API keys: development and production.

  • Development keys (pt_dev_*):
    • For local development only
    • No origin restrictions
    • Stricter rate limits
  • Production keys (pt_live_*):
    • Required for deployed applications
    • Must specify allowed origin domains
    • Domains must be valid (e.g., example.com)
4

Configure the provider

Add the PointerFlowProvider to wrap your app, typically in a layout file that contains your authenticated routes:

import { PointerFlowProvider } from "pointer-sdk";

function App() {
	return (
		<PointerFlowProvider
  		 apiKey={process.env.POINTER_API_KEY!}
         flows={myFlows}
        >
  		  {children}
		</PointerFlowProvider>
	);
}

See more info below on configuring the PointerFlowProvider.

​
Next steps

Congrats! You’ve set up the PointerFlowProvider, and are now ready to start configuring flows.