TourKit
Dashboard

Quick start (5 minutes)

Create a project, drop in the script tag, and run your first tour end-to-end.

Prerequisites

  • A TourKit account (sign up from the marketing site).
  • A site or dev environment where you can add a script tag.

1. Create a project

In the dashboard, create a project and note your unique script key.

🖼️

Dashboard — Create a project and copy your script key

2. Install the snippet

The TourKit SDK is hosted on jsDelivr CDN. Add this script tag before your closing </body> tag:

<script
  src="https://cdn.jsdelivr.net/gh/webdev-raj/Tourkit@sdk-v14/sdk/dist/tourkit.min.js"
  data-key="YOUR_SCRIPT_KEY"
  data-api="https://tourkit-phi.vercel.app"
  async>
</script>

Replace YOUR_SCRIPT_KEY with the script key from your TourKit dashboard project.

The data-api attribute tells the SDK where to fetch your tour configuration from.

🖼️

Install snippet — Script tag in your HTML

3. Publish steps

  1. Open the tour editor for your project.
  2. Add a step: CSS selector, title, message, position.
  3. Activate the tour when you are ready.
🖼️

Tour editor — Add steps with CSS selectors

4. Verify on your site

Load the page that matches your selectors. The SDK fetches tour JSON and renders the tooltip tour.

🖼️

Live tour — Tooltip appearing on your website