Docs

Everything fits on one page.

If the docs need a table of contents three levels deep, the product is too big.

1. Install

Paste this before </head> on every page of your app. It's the only script you need for all three modules.

<script>
  (function (w, d) {
    w.strykethru = w.strykethru || function () {
      (w.strykethru.q = w.strykethru.q || []).push(arguments);
    };
    var s = d.createElement("script");
    s.async = 1;
    s.src = "https://cdn.strykethru.com/v1/st.js";
    d.head.appendChild(s);
  })(window, document);

  strykethru("init", { key: "st_live_8f2c41a9" });
</script>

2. Identify

Call identify once you know who the user is. Every property you pass becomes usable in segment rules.

strykethru("identify", {
  id: user.id,
  email: user.email,
  plan: user.plan,        // used for segment rules
  createdAt: user.createdAt
});

3. Targeting

Guides attach to a CSS selector and branch on URL, user property, or a completed step. If the element is missing, the step is skipped rather than misplaced.

// Targeting rules are evaluated in order.
{
  selector: "#new-project",         // CSS selector on the host page
  fallback: "skip",                 // or "center" to show anyway
  when: [
    { type: "url",      op: "contains", value: "/home" },
    { type: "property", key: "plan",    op: "equals", value: "trial" },
    { type: "step",     op: "completed", value: "st_2" }
  ]
}

4. Styling

By default guides read your app's computed fonts, colors, and radii so they don't look bolted on. Override any of it explicitly.

strykethru("theme", {
  inherit: false,              // default is true
  fontFamily: "Söhne, sans-serif",
  radius: "2px",
  accent: "#E24B4A"
});