TourKit

Announcements

Ship product updates with the same script tag as your tour. Modal, banner, or slide-in — no extra install.

Types

  • Modal — centered card over a dimmed overlay. Best for launches and important notices.
  • Banner — full-width bar at the top of the page. Pushes page content down while it is open.
  • Slide-in — corner card (bottom-right by default). Pro plan only.

Sizes

Every type has Small, Medium, and Large. Medium is the default. Modal medium is wider than a tour tooltip.

  • Modal max-width: 380px / 520px / 720px
  • Banner height: compact title+CTA / title+description / plus image thumbnail
  • Slide-in width: 300px / 380px / 460px

Variants

Info (your tour primary color), Success, Warning, and Promo change the accent on the CTA, top line, and icon. Layout stays the same.

Targeting

Pages

Show on all pages, or a comma-separated list of URL patterns. Patterns use the same matcher as tour URL triggers: exact paths, [param] segments, and /* wildcards.

Audience

  • All visitors
  • New visitors — first seen less than 7 days ago
  • Returning visitors — first seen 7 or more days ago
  • Logged-in users — only after identify() is called, optionally filtered by plan

Frequency

  • Once per user — skipped after the first view
  • Until dismissed — keeps showing until the visitor closes it
  • Every visit — no localStorage gate

identify()

Call after login so logged-in and plan-based audiences can resolve. The object is stored in memory only (not localStorage). Announcements re-evaluate immediately after the call.

window.TourKit.identify({ userId: 'user_123', plan: 'pro' })