TourKit

Product Introduction

1. Definition: TourKit is a lightweight, Software-as-a-Service (SaaS) product tour and user onboarding SDK (Software Development Kit). It is a hosted tool that enables developers and product teams to create, manage, and deploy interactive guided tours and tooltips on any website without requiring code deployments for updates.
2. Core Value Proposition: TourKit exists to bridge the gap between heavy, expensive enterprise onboarding platforms and purely code-based open-source libraries. Its primary value is delivering dashboard-controlled product tours through a single script tag embed, enabling context-aware step triggering on dynamic URLs while maintaining a minimal technical footprint. This makes professional-grade user onboarding accessible and maintainable for teams of all sizes.

Main Features

1. Hosted Dashboard & Configuration API: TourKit provides a cloud-based dashboard where non-technical users can visually create, edit, and sequence tour steps. This configuration is served via a public JSON API endpoint (/api/tour/[scriptKey]). How it works: The embedded SDK on your website fetches the live tour configuration from this API in real-time, separating tour logic from application code and enabling instant updates without redeploying your React, Vue, or static site.
2. Universal Script Tag SDK: The core technical delivery mechanism is a vanilla JavaScript file served via CDN (jsDelivr). It requires no npm installation, framework-specific packages, or build process integration. By adding one <script> tag with a data-key attribute before the closing </body> tag, the SDK initializes and automatically fetches and renders tours based on the hosted configuration, ensuring compatibility with React, Next.js, Vue.js, WordPress, and plain HTML/CSS websites.
3. Context-Aware Step Triggering: This feature allows tours to be precisely mapped to specific pages or page patterns within a web application. Steps can be triggered based on URL patterns, including exact paths (e.g., /dashboard), dynamic segments (e.g., /projects/[id]), and wildcards. This is essential for single-page applications (SPAs) and dynamic content, ensuring tooltips appear only on the correct pages as users navigate.
4. Dark Glass Tooltip UI: The tooltips feature a clean, modern "frosted glass" aesthetic with a dark theme. This UI design is intentionally crafted to feel native and unobtrusive on modern SaaS dashboards, marketing sites, and applications, providing a premium user experience that doesn't clash with existing design systems.
5. Basic Step Analytics: Integrated analytics track tour performance metrics such as completion rates and drop-off points per individual step. This provides data-driven insights into user engagement and potential friction points in the onboarding flow, directly within the TourKit dashboard.

Problems Solved

1. Pain Point: Eliminates the development overhead and slow iteration cycle of hard-coded product tours. Traditional methods require developers to write, test, and deploy code for every tour copy or step change, creating a bottleneck for product and marketing teams.
2. Target Audience: Product Managers and Growth Marketers who need to iterate quickly on user onboarding without developer dependency; Frontend Developers and Software Engineers at startups and mid-market companies who need a reliable, low-maintenance embedding solution; Solo Founders and Indie Hackers building MVPs who require professional onboarding without the complexity or cost of enterprise tools.
3. Use Cases: Rapid onboarding flow A/B testing for new feature launches; guiding users through a complex dashboard interface post-signup; creating contextual help tours for specific pages like a new settings panel or billing page; providing interactive walkthroughs for marketing site demos or landing page features.

Unique Advantages

1. Differentiation: Compared to heavy platforms like Appcues or Pendo, TourKit is architecturally simpler, more affordable, and has a negligible performance impact. Compared to code libraries like Shepherd.js or Intro.js, it offers a managed dashboard for non-technical editing, hosted configuration, and basic analytics without requiring in-house infrastructure.
2. Key Innovation: The combination of a hosted configuration API with a context-aware, universal CDN SDK. This architecture decouples tour content from application code entirely. The innovation lies in using URL pattern matching delivered via JSON, allowing the lightweight client-side script to intelligently display the right steps on the right pages dynamically, a functionality typically only found in much heavier SDKs.

Frequently Asked Questions (FAQ)

1. How does TourKit work with Single Page Applications (SPAs) like React or Vue? TourKit's SDK includes a TourKitProvider mechanism that listens to client-side route changes. When integrated, it automatically re-evaluates the current URL against the tour's url_pattern triggers fetched from the API, ensuring steps appear correctly during SPA navigation without a page reload.
2. Is TourKit really free, and what are the limits? Yes, TourKit offers a fully functional free tier with no credit card required. The free plan includes core features like the dashboard, script embed, and context-aware tours, typically with limits on the number of monthly active users or projects, making it suitable for small projects and startups. Paid plans ($9/$19) unlock higher limits and advanced features like AI-assisted copy generation.
3. What happens if the TourKit service or API goes down? The SDK is designed to fail gracefully. If it cannot fetch the tour configuration from the hosted API endpoint, the tour simply will not display on your site. This prevents your website's core functionality from being broken by the onboarding tool's availability.
4. How do I target elements for tooltips in a dynamic web app? You define CSS selectors in the TourKit dashboard for each step. For dynamic content, you use stable selector patterns (e.g., [data-testid="user-menu"] or .user-profile .avatar). It is a best practice to use dedicated data-* attributes for the most reliable targeting in applications with frequently changing DOM structures.
5. Can I customize the look and feel of the tooltips? The primary UI is the pre-designed dark glass theme. While the free and core plans offer limited customization (like text), significant UI/theme customization is generally a feature reserved for higher-tier plans in tools like TourKit, as indicated by its focus on a clean, universal aesthetic.