Getting Started

Create your account

Go to https://app.geyed.io/register and sign up with your email. After you verify your address you will land on the dashboard. Every new account starts a free 14-day trial — no credit card required.

Create your first app

In Geyed, an app represents a single site or product you want to add tours to. Navigate to Apps in the sidebar, then click Create App. Give it a name that matches your product. Once the app is created it appears in your app list with its API key — a short token that starts with gyd_. Copy that key; you will paste it into the SDK in the next step.

Install the SDK

Install the Geyed SDK in your frontend project:

npm install @geyed/sdk

Or load it from a CDN if you prefer a script tag:

<script src="https://unpkg.com/@geyed/sdk/dist/index.iife.js"></script>

Initialize the SDK as early as possible in your app's entry point, then call start() to fetch and display published tours:

import { init, start } from "@geyed/sdk";

init({
  apiKey: "gyd_your_app_key",
  baseUrl: "https://api.geyed.com",
});

await start();

Replace gyd_your_app_key with the API key you copied from the Apps page. start() fetches your published tours and runs the first one whose URL pattern matches the current page path.

For the complete API reference — including startTour, stop, on/off events, and advanced configuration options — see Installing the SDK.

Build your first tour

Open the app you just created and click on a tour to open the tour editor. If you haven't created a tour yet, use the Create Tour button on the app's tour list.

Inside the editor you will see a two-panel layout. The left panel is the Tour Steps sidebar, where you add, reorder, and select steps. Click Add step to create your first step, then fill in a title and content in the right-hand editor panel. Each step targets a specific element on your page — paste a CSS selector into the Target Selector field to anchor the tooltip to that element.

The easiest way to get a selector is the Geyed Chrome Extension. Install it, navigate to your product, hover over any element, and click to copy its CSS selector. Paste that value directly into the step's target selector field. For a full walkthrough of the capture flow, see Capturing Selectors.

Once your steps are in place, set the URL Pattern at the top of the editor so the SDK knows which page to run the tour on. Use * as a wildcard — for example, /dashboard/* matches any path under /dashboard/.

Publish

While you are editing, every change lives in a draft. Your users see nothing until you publish. When you are ready, click Save & Publish. The tour goes live immediately and the SDK will start serving it to users whose page path matches your URL pattern.

The draft and published versions are kept separate. After publishing you can keep editing the draft — your changes will not affect the live tour until you publish again. If you need to take a tour offline at any point, click Unpublish.

What's next?

• Read Core Concepts to understand how tours, steps, and drafts relate to each other.
• See Installing the SDK for advanced configuration, lifecycle events, and how to trigger tours manually.
• Check Analytics to measure tour completion rates and step-level drop-off.