Core Concepts

Apps

An app represents a single website or product you want to add tours to. You create one app per product — not one per tour. When you set up an app in the dashboard you receive an API key (prefixed gyd_) that you pass to the SDK as apiKey. Every tour you create lives inside that app, and the SDK uses the key to fetch the right tours for the right product.

Tours

A tour is a named sequence of steps that guides users through a specific flow in your product — for example, "First-time onboarding" or "New feature walkthrough". Tours belong to an app. Each tour has its own URL pattern so the SDK knows which page to run it on, and its own publish lifecycle so you can iterate without disturbing users.

Tours can live in two places. You can build them in the Geyed dashboard so anyone on your team can edit them without touching code, or you can define them directly in your codebase and register them with the SDK at runtime. Most teams use the dashboard; code-defined tours are useful for offline demos, self-hosted deployments, or embedding tours in an open-source project. See Installing the SDK for how to register tours in code.

Steps

Steps are the individual tooltips that make up a tour. Each step targets a specific element on your page using a CSS selector, and contains the title and body content you write in the builder. Steps are ordered and can be placed above, below, to the left, or to the right of their target element. The Tour Builder & Selector Picker lets you add, reorder, and preview steps in a two-panel editor.

Draft & Publish Workflow

Every tour has two states: draft and published. When you open the editor you are working on the draft. The published version stays live for your users and is unaffected until you explicitly publish. Clicking Save & Publish replaces the live version with the current draft immediately. You can continue editing the draft after publishing — those changes will not reach users until you publish again. If you need to take a tour completely offline, click Unpublish. This Draft & Publish Workflow means you can iterate freely without the risk of shipping incomplete changes.

Themes

Themes are the styling layer for your tour tooltips — controlling colors, visual presets, and transition animations so your tours match your product's look and feel. You configure themes per app from the dashboard. For a full walkthrough of presets, custom colors, and animation options, see Themes & Branding.

Selectors

Tours target elements on your page using CSS selectors. Each step holds one selector that anchors its tooltip to a specific element. The most reliable way to capture selectors is the Geyed Chrome Extension, which lets you hover and click any element on your live site to generate a usable selector without reading source code. See Capturing Selectors for the full capture workflow.

Triggers

Tours are activated in two ways. The most common is automatic: when the SDK initialises it compares the current page URL against each published tour's URL pattern and starts the first matching tour. You can also trigger a specific tour from your own code using startTour(), which is useful for event-driven onboarding — for example, starting a tour when a user clicks a help button. The SDK reference page covers the full trigger API and configuration options.